はじめに

近年、LLM（大規模言語モデル）の進化によって「プロンプトからアプリケーションを自動生成する」技術が現実味を帯びてきました。しかし、実際に複雑なシステムを全自動で生成しようとすると、多くのエンジニアが次の壁にぶつかります。

「AIにコードを書かせる際、データ構造やビジネスルールが曖昧だと、生成されるコードはハルシネーション（嘘）だらけになる」

業務システムのモデリングは、大きく分けて「何を管理したいか（帳簿のデザイン）」と「どう管理したいか（画面やAPIのデザイン）」に大別されると思います。この内、AI開発時代に人間がやるべきは「何を管理したいか」をデザインすること、つまりデータモデリングなのではないでしょうか。

本記事では、前回までの記事で簡単に紹介したSchemaDesignerの詳細を示します。
データモデルを精緻に構成し、その作成を視覚的・機能的にトータルサポートするこだわりをご確認ください。
さらに「1枚のポータブルなHTMLファイル」としてどこでも手軽に動かせるスキーマ設計ツールであることも認識して頂けると思います。

SchemaDesignerとは？

SchemaDesignerは、ブラウザ上で動作するスキーマ設計・データベース設計ツールです。
React + Vite + Tailwind CSS (v4) を用いて構築されており、ビルドすると 「1つのHTMLファイル（CSSやJSをすべて内包）」 として出力されます。

画面イメージ

[!TIP]
ビルド後の dist/index.html は、エクスプローラーからダブルクリックするだけで動作します。ログイン不要、サーバー不要、完全オフラインで動作する超ポータブル設計です。

「データモデルを精緻に作り上げる」ための5つのこだわり

世の中には多くのER図描画ツールやモデリングツールがありますが、SchemaDesignerは「システム自動生成のメタデータとしての完成度」にこだわり、以下の特徴的な機能を備えています。

1. 複合主キー・複合外部キーへの完全対応

実務のデータベース設計、特にレガシーマイグレーションやドメイン駆動設計（DDD）を取り入れた設計では、単一のサロゲートキー（id）だけでなく、ビジネスルールを表す 複合主キー（Composite Primary Key） や、それに伴う 複合外部キー（Composite Foreign Key） が頻繁に登場します。

SchemaDesignerでは、テーブル間のリレーションシップを繋ぐ際、複数のカラムマッピングを視覚的に定義できます。

多くの簡易ツールが「単一カラムの結合」しかサポートしない中、SchemaDesignerはこれを厳密に定義し、整合性を保ったDDLやモックデータを生成します。

2. 「導出項目」の明示的な定義

パフォーマンスチューニングや、画面表示の都合上、データベースにあえて冗長なデータを持たせる「非正規化（導出項目）」を行うことがあります。
これをただの「カラム」として放置すると、AIや開発メンバが「このデータはどこから更新され、どう整合性を保つべきか」を見失い、自動生成のバグの温床になります。

SchemaDesignerでは、属性区分として「独立（通常カラム）」と「導出項目（Derived）」を明示的に区別し、 導出ロジック をメタデータとして記録できます。
これにより、システム自動生成AIに対する「これは冗長化データだから、参照先が更新された際に同期するトリガー（またはアプリケーションコード）を作れ」という強力な指示書になります。

3. ユースケースを定義する「CRUDマトリクス」

データ構造があるだけでは、システムは動きません。「どの機能（ビジネスロジック）が、どのテーブルに対してどうアクセスするのか」がセットになって初めて、システム全体の仕様が精緻化されます。

SchemaDesignerは、標準で CRUDマトリクス定義機能 を搭載しています。

これにより、データベース構造とアプリケーションのアクセス仕様が1つの設計図（JSON）に紐付き、APIエンドポイントや画面設計のコード自動生成が一挙に現実味を帯びます。

4. Gemini API連携による「AIモックデータ自動生成」

「このデータモデルで本当に実務の業務が回るか？」を検証する最も手っ取り早い方法は、リアルなサンプルデータを流し込んでみることです。

SchemaDesignerは、Gemini APIと連携し、設計したスキーマおよびリレーションシップ（複合キーを含む！）を解釈して、リレーションの整合性を保ったモックデータを自動生成します。

下図ではAIへの指示として「費目.費目名に”交通費”を追加してください。」を与えることで、交通費に関するインスタンスが追加される様子を示しています。

データモデルを精緻に作るプロセスにおいて「モックデータを入れて確認する」フィードバックループがその場で超高速に回せます。

5. ポータビリティとローカルファーストの徹底

どれだけ高機能でも、起動に時間がかかったり、クラウドの契約が必要だったりすると、設計の初動が遅れます。

Vite + vite-plugin-singlefile: すべてのアセット（CSS、JS、アイコン）をインライン化。成果物は dist/index.html 1ファイルのみ
ローカル自動保存 & ショートカット: 編集内容は localStorage へ即座に自動保存。Ctrl + S で設計データを綺麗なJSON形式でローカルにエクスポート可能
DDLエクスポート: 設計が完了したら、ワンクリックで標準的なSQL (DDL) が出力され、そのままデータベースに適用可能

技術スタック

フロントエンド: React (v18) / Tailwind CSS (v4)
ビルドツール: Vite + vite-plugin-singlefile
アイコン: FontAwesome (CDN経由でインライン利用)
AI連携: Gemini API (ローカルに安全に保存されたAPIキーを使用)

「システム自動生成の一里塚」としてのデータモデリングと、今後の展望

SchemaDesignerで出力される設計データ（JSON）は、データモデル、リレーション、導出ロジック、CRUDマトリクスが完全に精緻化された 「システムの設計書そのもの」 です。

今後の展望として、このJSONをインプットに受け取り、コードを全自動生成するジェネレータツールの開発を進めていきます。

SchemaDesignerの完成度もまだまだ改善の余地は大いにありますが、これからもAI開発に向けたアイディアを発信していきたいと思います。

参考

Github
ぜひ、ローカルで動かして体験してみてください！
https://github.com/yokota101010/SchemaDesigner

Antigravity
ツールの開発にはAntigravity IDEを使用しました。このツールが無ければSchemaDesignerを開発することもなかったと思います。
https://antigravity.google/

渡辺幸三さんの各種書籍
いつも勉強させて頂いています。この記事の原点は渡辺式ER図にあります。
https://dbc.in.coocan.jp/