NormalizationZoo

ブラウザで動作する、データベース正規化のインタラクティブ教材です。
学習者が表を実際に編集しながら、更新異常・挿入異常・削除異常や、正規化前の「面倒だけど正しい操作」を体験できるようにしています。

公開URL: https://kobashi.github.io/NormalizationZoo/

ねらい

• 正規化を定義暗記ではなく、データ操作の体験から理解する
• 非正規形から 5NF までを段階的に学ぶ
• 「なぜ分解したくなるのか」を、表の更新のしづらさから実感する

主な対象は、データベースを初めて学ぶ日本語話者の学習者です。

現在の収録ステージ

• 非正規形
• 第1正規形（1NF）
• 第2正規形（2NF）
• 第3正規形（3NF）
• BCNF
• 第4正規形（4NF）
• 第5正規形（5NF）

前半は注文・顧客・商品・営業の題材を中心にし、BCNF 以降は概念に合わせた小さな業務場面へ切り替えています。

できること

• ステージごとのサンプルテーブル表示
• セル編集
• 行追加
• 選択行削除
• テーブル単位のリセット
• 「異常検出」による問題点の表示
• 問題セルのハイライト
• 主キー / 複合主キーの表示
• ヒントモーダルで構造の説明を表示
• 「試してみよう」シナリオの自動実行
• 変更されたセルの赤字表示
• 更新異常の例と、「面倒だけど正しい操作」の例を色分けで表示
• 用語ホバー解説
  • 原子的
  • 決定項がスーパーキーではない
  • 組合せの直積

学び方

1. ステージを選ぶ
2. テーブルを直接編集する
3. 異常検出 を押して、何が問題かを見る
4. 試してみよう のシナリオを実行する
5. ヒント を開いて、従属や分解の考え方を確認する
6. 次の正規形へ で次の段階に進む

技術構成

• Vite
• React
• JavaScript
• CSS
• Browser only

バックエンド、データベースサーバー、認証機能はありません。状態はすべてブラウザ内のローカル状態で管理しています。

セットアップ

Node.js

• Node.js 20 系
• .nvmrc に合わせて利用

nvm を使う場合:

nvm install
nvm use

依存関係のインストール

npm install

開発サーバー起動

npm run dev

ビルド

npm run build

ローカルでビルド成果物を確認

npm run preview

GitHub Pages 公開

このリポジトリは GitHub Pages で公開しています。
main ブランチへ push すると、GitHub Actions により dist/ が Pages へ公開される構成です。

基本的な流れ:

1. ローカルで npm run build を確認する
2. main にコミットして push する
3. GitHub Actions の完了を待つ
4. 公開URLで反映を確認する

補足

• この教材は、完全な理論証明ツールではなく、学習体験を優先した教材です。
• 異常検出はルールベースです。
• BCNF / 4NF / 5NF は、初学者に伝わりやすい業務場面へ簡略化して表現しています。

設計メモ

BCNF / 4NF / 5NF をどう教材化したかの設計メモは以下にあります。

• docs/advanced-normal-forms-design.md