Daijiro Taira

学習・データベースブラウザで動く

DB Design Academy

データベース設計を、教科書的な説明だけでなく「実際にSQLを書いて動かしながら」学べる学習サイトです。

ツールを開く

1つの章は、たとえ話中心のやさしい説明→図解でしくみを理解→もう一段深い解説、という3段階で進み、章の後半では自分でSQLを書いて実行できる演習コーナー（Lab）があります。特徴的なのは「わざと制約違反のSQLを書いて、データベースに怒られる」という体験を用意している点で、主キーの重複（UNIQUE制約違反）や必須項目を空にする（NOT NULL制約違反）などを実際に起こし、日本語のエラー解説とあわせて学びます。章末クイズに全問正解するとその章がクリア扱いになり、ホーム画面に「クリア n/10」として進捗が表示されます。サーバーは使わず、SQLの実行はすべてブラウザの中だけで完結します。

使い方

  1. ホーム画面を開く

    ホーム画面を開く

    index.htmlを開いた直後の画面。上部にER図（students・courses・enrollmentsの3テーブルを線でつないだ図）がヒーロー画像として表示され、その下にタイトルとリード文、スキルツリー（01〜06・①②③・★の10ステップ）、凡例（クリア済み／挑戦済み・未クリア／未挑戦）、現在の進捗「クリア 0 / 10」が並ぶ。

  2. スキルツリーで章を選ぶ

    スキルツリーで章を選ぶ

    画面を下にスクロールすると、章カードが「基礎編」（ch01〜ch06）「実事例編」（case01〜03）「総合演習」「まとめ」の4グループに分類されて並ぶ。各カードにはタイトル・1行説明・所要目安（20〜25分）が表示され、クリックするとそのページに移動する。

  3. 章のレッスンページを読む（Lv1直感セクション）

    章のレッスンページを読む（Lv1直感セクション）

    ch01「テーブルと主キー」の冒頭。UI約1割・API約3割・データベース設計約6割の積み木状SVGで「DB設計が最も重要」というメッセージを図解し、その下に「身につくこと」3枚のカードと所要目安（約20分）、Lv1バッジ付きの本文が続く。

  4. SQLを実行して制約違反に「怒られる」

    SQLを実行して制約違反に「怒られる」

    Lab「怒られる体験① 同じ学籍番号を使ってしまう」。テキストエリアに書かれたINSERT文（既にid=1が存在するのに同じidで再度INSERTしようとするSQL）を「実行」ボタンで動かすと、赤いエラーボックスに生のエラー文「UNIQUE constraint failed: students.id」と日本語解説「主キー（一意制約）の重複です。同じ値の行は2つ入れられません。」が表示され、続けて緑色で「正しく怒られました！これが制約の守りです。」と表示される。

  5. 章末クイズに挑戦し、まとめを読む

    章末クイズに挑戦し、まとめを読む

    「理解度クイズ」で1問ずつ4択が出題される画面（問題1/5）。クイズの下には「この章のまとめ」カードと次章への橋渡し文、画面最下部に「ホーム」「次の章 →」ボタンが並ぶ。

仕組みと使った技術

全体の流れ

  1. index.html（ホーム）＋ ch01〜ch06（基礎6章）＋ case01〜case03（実事例3本）＋ boss.html（総合演習）の計10ページと、slides/summary.html（Marpまとめスライド）からなるビルド不要の静的サイト。各ページは相対パスで shared/theme.css・shared/game.js・shared/sqlab.js を読み込む。
  2. 各ページはDBA.initPage()でヘッダー（ブランド・進捗「クリア n/10」）と章末ナビ（前の章／ホーム／次の章）を自動描画する。DBA.renderQuiz()は選択式クイズを1問ずつ表示・採点し、全問正解した章のみを『クリア』として記録する。
  3. SQL演習はDBA.renderSQLLab()／renderSQLPlayground()が担う。sql.js（SQLiteのWebAssembly版）を遅延読み込みし、章ごとに独立したインメモリSQLiteデータベースを作成、PRAGMA foreign_keys=ONを自動実行してからユーザーが書いたSQLを実行し、結果テーブルまたはエラーメッセージを表示する。
  4. renderSQLLabのexpectオプションで、結果セット一致（result）・模範SQLとの結果比較（query）・想定エラーの正規表現一致（error）・カスタム判定関数（custom）の4モードの正誤判定を行い、正解するとDBA.markDone()で完了記録される。
  5. エラーメッセージはmapErrorMessage()が担当し、UNIQUE constraint failed・FOREIGN KEY constraint failed・NOT NULL constraint failed・CHECK constraint failed・no such table／column・syntax errorなど代表的なSQLiteのエラーを、それぞれ日本語の平易な解説文に変換して表示する。
  6. 進捗（章クリア状況・クイズ回答・Lab完了フラグ）はlocalStorageの単一キー dba_progress_v1 にJSONでまとめて保存される。localStorageが使えない環境（プライベートブラウジング等）でもエラーにならず、メモリ内フォールバックのstateオブジェクトで動作を継続する。
  7. file://で直接開かれた場合はisFileProtocolの判定でSQL演習を読み取り専用スケルトン＋案内メッセージ表示に切り替え、Webサーバー経由でのアクセスを促す。

使った技術

HTML / CSS / JavaScript（Vanilla）
全ページの構造・スタイル・ロジック。ビルド工程・外部CDN・フレームワーク不使用
sql.js
SQLiteをWebAssemblyに移植したSQL実行エンジン。shared/vendor/に自己ホストし、ブラウザ内でSQLを実際に実行してLab／Playgroundの判定に使う
localStorage
章クリア状況・クイズ回答・Lab完了フラグを単一キー dba_progress_v1 にJSONでまとめて保存。使用不可時はメモリ内フォールバック
Marp CLI
slides/summary.md（Marp形式Markdown）からslides/summary.html（まとめスライド17枚）を生成するビルド時専用ツール。npx経由で一時利用し、サイトの実行時には使わない

実装の工夫

  • 060 ML Visual Academyの骨格（shared/配下の共通API・Lv1〜Lv3の3段階構成というページテンプレート）を流用しつつ、ゲーミフィケーション（XP・レベル・バッジ演出）は撤去し、「クリア n/10」というシンプルな進捗表示に置き換えている。
  • shared/（game.js・sqlab.js等）は各ページ実装者にとって『凍結API契約』（変更禁止・DBA.initPage／DBA.renderQuiz／DBA.renderSQLLab等の公開APIのみ呼び出し可）として扱われ、複数のSonnet builder subagentを並列起動して章を分担実装しても状態管理とデザインが一貫するようにしている。
  • SQL Labの正誤判定はresult（結果セット比較）・query（模範SQLとの実行結果比較）・error（想定エラーの正規表現一致）・custom（関数判定）の4モードを用意し、『制約に違反して怒られる』体験（errorモード）と『正しく書けたか』の確認（resultモード）を同じrenderSQLLabコンポーネントだけで実現している。

用語

主キー（PK: Primary Key）
テーブルの1行を一意に特定する列。一意性・不変性・NOT NULLの3条件を満たす必要がある。ch01のテーマ。
外部キー（FK: Foreign Key）
あるテーブルの列が、別テーブルの主キーを参照して関連付けるしくみ。ch02のテーマ。
正規化（1NF〜3NF）
データの重複と更新不整合を減らすためにテーブルを分割していく設計手法。第1〜第3正規形の段階がある。ch03のテーマ。
ER図（Entity-Relationship図：実体関連図）
テーブル（エンティティ）同士の関係を図示したもの。ホーム画面のヒーロー画像で使われている表現。ch04のテーマ。
ACID特性
原子性・一貫性・独立性・永続性の頭文字。複数人が同時にデータを更新しても安全であることを保証するトランザクションの性質。ch06のテーマ。
sql.js
SQLite（軽量なデータベースエンジン）をWebAssemblyに移植したライブラリ。このサイトでは`shared/vendor/`に自己ホストし、ブラウザ内で実際にSQLを実行するために使われている。
Lv1〜Lv3
各章に共通する3段階構成。Lv1直感（たとえ話中心）→Lv2しくみ（図解・Lab体験）→Lv3深掘り（もう一段詳しい解説）の順に理解を深める。
「怒られる」体験
UNIQUE・NOT NULL・FOREIGN KEY・CHECKなどの制約にわざと違反するSQLを実行し、SQLiteが返すエラーとその日本語解説を通して制約の意味を学ぶLabの設計パターン。
スキルツリー
ホーム画面に表示される、ch01→ch06→case01〜03→bossの10ステップを一覧できる図。クリア状況が色分けで示される。