Zenn
📝

Anthropic API で、AIを使ったSQL学習サービスをつくってみた①

に公開
AI
React
SQL
API
Anthropic
tech

はじめに

今回はSQL学習サービスを開発。
本記事は、ユーザー向けのレベル分け用の理解度チェックの実装まで。

開発手順

1. プロジェクト構成・初期セットアップ

概要

フロントエンド（React）、バックエンド（Express）、データベース（SQLite）を統合したディレクトリ構成を作成し、開発・実行に必要な設定を行った。

代表的なコード例：package.jsonのproxy設定

{
  // ...省略...
  "proxy": "http://localhost:3001"
}

React開発サーバー（3000番）からの/api/リクエストが自動的にExpressサーバー（3001番）へ転送され、CORSやURLの違いを意識せずAPI通信ができるように設定。

実施内容

  • sql-learning-appディレクトリを作成し、フロントエンド（React）・バックエンド（Express）・DB（SQLite）を統合
  • 必要なディレクトリ・ファイル（src/, server/, public/, package.json など）を作成
  • package.jsonにproxy設定を追加し、フロントエンドからAPIリクエストをバックエンドへ転送

2. SQLiteデータベース設定

概要

ユーザー情報を管理するため、SQLiteのusersテーブルを作成し、Node.jsスクリプトで初期化できるように。

代表的なコード例：server/db/init.js

const Database = require('better-sqlite3');
const db = new Database('sample.db');

db.exec(`
CREATE TABLE IF NOT EXISTS users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  username TEXT NOT NULL UNIQUE,
  password TEXT NOT NULL,
  level INTEGER DEFAULT NULL
);
`);

console.log('usersテーブルを作成しました');
db.close();

このスクリプトを実行することで、sample.dbにusersテーブルが作成される。ユーザー名は一意で、パスワードとレベル（初期値null）を持つ。

実施内容

  • sample.dbファイルをプロジェクト直下に配置
  • usersテーブルを作成（id, username, password, levelカラム）
  • テーブル作成用のNode.jsスクリプト（server/db/init.js）を用意

3. バックエンド（Express）API実装

概要

ユーザー認証やSQL学習機能のためのAPI（新規登録・ログイン・レベル更新・問題取得など）をExpressで実装。

代表的なコード例：server/routes/auth.jsの新規登録API

router.post('/register', (req, res) => {
  const { username, password } = req.body;
  if (!username || !password) return res.status(400).json({ error: 'ユーザー名とパスワードは必須です' });
  const exists = db.prepare('SELECT * FROM users WHERE username = ?').get(username);
  if (exists) return res.status(409).json({ error: 'このユーザー名は既に使われています' });
  const stmt = db.prepare('INSERT INTO users (username, password) VALUES (?, ?)');
  const info = stmt.run(username, password);
  const user = db.prepare('SELECT * FROM users WHERE id = ?').get(info.lastInsertRowid);
  res.json({ id: user.id, username: user.username, level: user.level });
});

新規登録APIは、ユーザー名・パスワードが必須で、重複チェック後にDBへ登録。登録成功時はユーザー情報を返す。

実施内容

  • /api/auth/register：新規登録（ユーザー名・パスワード必須、重複チェック）
  • /api/auth/login：ログイン（ユーザー名・パスワード必須、一致チェック）
  • /api/auth/me/:id：ユーザー情報取得
  • /api/auth/update-level：ユーザーレベル更新
  • /api/assessment/questions：SQL理解度テストのサンプル問題を返す
  • /api/assessment/submit：回答を受け取り、スコア・レベル・詳細（正誤・解説）を返す
  • /api/problems/generate：レベルに応じたSQL問題を返す
  • /api/feedback：SQLクエリのフィードバックを返す

4. フロントエンド（React）実装

概要

ログイン・新規登録画面、ユーザー情報の管理、SQL理解度テストや問題演習画面など、Reactで主要なUIとロジックを実装。

代表的なコード例：src/App.tsxのユーザー名表示とログアウト

<header className="header">
  <h1>SQL学習支援サービス</h1>
</header>
{user && (
  <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, marginBottom: 12 }}>
    <span>ようこそ、{user.username} さん</span>
    <button className="button" onClick={handleLogout}>ログアウト</button>
  </div>
)}

ログイン後、画面上部にユーザー名とログアウトボタンを表示。ログアウトボタンを押すとユーザー情報がクリアされ、ログイン画面に戻る。

実施内容

  • ログイン・新規登録画面（Login.tsx）
  • ユーザー名・パスワード入力、ログイン/新規登録切り替え、バリデーション、エラーメッセージ表示
  • ボタンのUI改善（色分け・幅・余白調整）
  • App全体の状態管理（App.tsx）
  • ログイン状態・ユーザー情報の管理
  • ログイン後に「ようこそ、ユーザー名 さん」とログアウトボタンをヘッダーの上に表示
  • ログアウトでユーザー情報・localStorageをクリア
  • SQL理解度テスト画面（LevelTest.tsx）
  • サンプル問題の出題、回答、スコア・レベル判定、詳細（正誤・解説）表示
  • テスト完了時にユーザーレベルをサーバー・localStorageに保存
  • 問題演習画面（ProblemGen.tsx）
  • レベルに応じた問題の出題、ヒント表示、SQLエディタ連携
  • SQLエディタ（SQLEditor.tsx）
  • SQLクエリ入力、フィードバック表示

5. その他の設定・改善

  • .envファイルでAPIキー管理（dotenv）
  • .gitignoreでnode_modules/, .env, *.dbなどを除外
  • READMEにセットアップ・起動手順を記載
  • DBファイルのパスを絶対パス指定に修正し、常に同じDBを参照するよう統一
  • サーバー・フロントエンドのエラーハンドリング強化

6. 開発・運用上の注意

  • サーバー（npm run server）とフロントエンド（npm start）を同時に起動
  • DBのテーブル作成・初期化はnode server/db/init.jsで実行
  • 新規登録・ログイン時はユーザー名・パスワード必須
  • ログイン後はユーザー名とログアウトボタンが画面上部に表示

最後に

次回はレベルに応じたSQL問題の提供〜

Discussion