はじめに
最近、Difyなどのワークフローツールの「ノードを繋いでぬるぬる動かせるUI」って触っていて気持ちいいですよね。
「あのUIで、ブラウザ上で直感的にER図を作れるツールがあったら便利だな…」と思い、話題のAIコーディングエージェント Antigravity (by Google DeepMind) とペアプログラミングをして、実際にイチから作ってみました。
この記事では、完成したツールの紹介と、「Antigravityにどう指示したら上手くいったか（AIペアプロのコツ）」 をまとめます。
作ったもの
技術スタック: React + Vite, Tailwind CSS, Zustand, React Flow
データ保存: LocalStorage
主な機能
-
ぬるぬる動くキャンバス
- テーブル（ノード）を自由に配置・ドラッグ可能。
- カラム同士の接続ポイント（Handle）をドラッグして、ER図らしい直角ステップ線（smoothstep）でリレーションを可視化。
-
直感的なテーブル編集
- インラインでのテーブル名・カラム名の編集。
- 主キー（PK）のトグルスイッチ。
-
データ型のプルダウン＋自由入力:
INT,VARCHAR等をサジェストしつつ、ENUM('A', 'B')などの独自型も入力できるハイブリッドUI。
-
プロジェクト管理 & CSVインポート
- 複数のER図を別々のプロジェクトとして保存・切り替え可能。
-
table_name, column_name, data_type, is_pk形式のCSVを読み込ませるだけで、一括でテーブルノードを自動生成。
Antigravityとのペアプロを成功させる3つのコツ
今回、Antigravityにただ「コードを書いて」と頼むのではなく、少し工夫した進め方をしました。これが非常に上手くいったので共有します。
1. いきなりコードを書かせず、「設計と計画」から始めさせる
最初のプロンプトで以下のように指示しました。
「プロジェクトを作成する前に、仕様書・設計書・機能一覧を日本語で作成して、確認しながら進めたいと考えています。コードは、運用負荷を極力避けられるような構成やコメントの入れ方にしてください。」
するとAntigravityは、いきなりコーディングを始めるのではなく、以下のような markdown ファイル（ドキュメント）を自動生成してくれました。
-
implementation_plan.md(実装計画・技術スタックの提案) -
task.md(詳細なタスクのチェックリスト)
ここで「DBはどうする？（BaaSかLocalStorageか）」「TypeScriptにするかJavaScript＋JSDocにするか」などの提案をAI側からしてくれたため、方針のすり合わせがしっかりできました。
2. 「ふわっとした要望」から最適な技術を選定してもらう
「Difyのような形で簡単にER図作成できるツール。左ペインでボックス追加して、ER図自体はぬるぬる動かせるようなものを想定」
このように「ぬるぬる動かせる」といったユーザー体験（UX）の要望を伝えたところ、Antigravityは React Flow と Zustand の組み合わせを提案してくれました。
結果として、自分でライブラリを調べ回る時間をゼロにしつつ、要件にドンピシャなモダン技術を採用できました。
3. 追加実装は「Phase（フェーズ）」を分けて指示する
ベースの機能が動くようになった後、「プロジェクト管理」「CSV取り込み」「データ型のプルダウン化」の3つを追加要望として出しました。
するとAntigravityは、
-
implementation_plan.mdに「Phase 2」として計画を追記。 - 既存のデータ構造（旧バージョン）と新しい複数プロジェクト対応の構造の間に、自動マイグレーション処理 を書いてくれる（データを失わない配慮！）。
- 途中でJSXのパースエラー（コンポーネント内に定数を定義してしまうミス）が発生しても、エラー画面の指摘だけで即座に構造をリファクタリングして修正。
実装の面白かったポイント（React Flow × Zustand）
ER図特有の「リレーション線」を引くため、React Flowの MarkerType.ArrowClosed を使い、エッジのスタイルをカスタマイズしています。
状態管理には Zustand を用いることで、React Flowの nodes と edges を一元管理し、コンポーネント外（例えばサイドバーからの「CSVインポート」処理）からも簡単にキャンバスを更新できる疎結合なアーキテクチャになりました。
// Zustandの一部抜粋
addTableFromCSV: (tableData) => {
const newTableId = `table-${uuidv4()}`;
const newNode = {
id: newTableId,
type: 'tableNode',
position: { x: Math.random() * 300 + 50, y: Math.random() * 300 + 50 },
data: {
tableName: tableData.tableName,
columns: tableData.columns.map(col => ({ ...col, id: uuidv4() }))
}
};
set({ nodes: [...get().nodes, newNode] });
}
まとめ
Antigravity は「単なるコード生成AI」ではなく、「アーキテクチャの提案」「タスク管理」「実装」「デバッグ」までを伴走してくれる優秀なリードエンジニア でした。
特に最初に「計画を立てて合意してから進めて」と指示するだけで、プロジェクトの見通しと保守性が劇的に上がります。
