【Google Antigravity】話題のAI IDEを使って、家庭菜園シミュレータを1日で爆誕させた話
はじめに
先日発表されたGoogleの新しいエージェント型開発環境「Antigravity」。
「コードを書くのではなく、Agentを管理する」という新しいパラダイムを提唱するこのツールを使って、 1日で本格的な「家庭菜園シミュレータ（Garden Planner）」 を開発しました。
結論から言うと、 「詳細な仕様さえ渡せば、実装コストはほぼゼロになる」 という衝撃的な体験でした。
この記事では、実際にAntigravityに投げたプロンプト（指示書）の内容と、それによって生成されたコードの品質、そして開発体験のリアルなログを共有します。
作ったもの：Garden Planner
ブラウザ上で野菜の作付け計画を立てられるツールです。
マインクラフトのインベントリのように野菜をドラッグ＆ドロップで配置でき、「コンパニオンプランツ（相性の良い野菜）」を自動判定してエフェクトを表示する機能などを備えています。
技術スタック
Antigravityによって構築された環境は以下の通りです。
- Framework: Next.js 16 (App Router)
- Library: React 19
- CSS: Tailwind CSS v4
- UI: shadcn/ui, Lucide React
- State: Zustand
- DnD: @dnd-kit
開発の流れ：Antigravityへの「指示出し」
AIへの指示出しですが、漠然とした内容だと意図しないものが出来上がってしまうだろうと考え、今回は**要件定義、UX、データ構造（型定義）**までを一つのプロンプトにまとめて渡してみました。
実際にAntigravityに入力したプロンプトがこちらです。
実際に使用したプロンプト（クリックで展開）
プロジェクト: グリッド配置型 家庭菜園デザイナー (Garden Planner) 開発要件
あなたは熟練したFrontendエンジニア兼UIデザイナーです。
これから、家庭菜園の作付け計画をブラウザ上で直感的に作成できるWebアプリケーション「Garden Planner」を新規開発します。
以下の要件定義と技術スタックに基づき、プロジェクトの雛形とコア機能の実装を一気に行ってください。
1. 技術スタック
- Framework: Next.js (App Router)
- Language: TypeScript (Strict mode)
- Styling: Tailwind CSS
- UI Components: shadcn/ui (Radix UI base)
- Icons: Lucide React
- State Management: Zustand (永続化も見据えた設計)
- Drag & Drop: @dnd-kit/core, @dnd-kit/sortable (グリッド操作に使用)
- Animation: Framer Motion (操作フィードバック用)
2. アプリケーションの概要・UX
マインクラフトのインベントリ画面のようなUIです。
- 画面左側: 「野菜パレット」。トマト、ナス、キュウリなどの野菜アイコンが並んでいる。
- 画面中央: 「菜園グリッド」。ユーザーが設定したサイズ（例: 4x4）のマス目。
- 操作: パレットから野菜をドラッグし、グリッドの好きな場所にドロップして配置する。
-
コア機能（コンパニオンプランツ判定）:
- 野菜には「相性の良い野菜」「相性の悪い野菜」が定義されている。
- グリッド上に配置した際、隣接するマスに「相性の良い野菜」があれば笑顔アイコンや緑色のエフェクトを表示。
- 「相性の悪い野菜」があれば警告アイコンや赤色のエフェクトを表示。
3. データモデル設計 (TypeScript Interface)
この型定義を厳守してください。
// src/types/garden.ts
export type VegetableId = string;
export interface Vegetable {
id: VegetableId;
name: string; // 例: トマト
icon: string; // 絵文字またはアイコン名
color: string; // 背景色（Tailwind class safe）
goodCompanions: VegetableId[]; // 相性の良い野菜IDリスト
badCompanions: VegetableId[]; // 相性の悪い野菜IDリスト
description: string;
}
export interface GardenCell {
id: string; // `${x}-${y}`
x: number;
y: number;
content: VegetableId | null; // 配置されている野菜
}
export interface GardenState {
width: number;
height: number;
cells: GardenCell[];
// Actions
setDimensions: (w: number, h: number) => void;
placeVegetable: (cellId: string, vegetableId: VegetableId) => void;
removeVegetable: (cellId: string) => void;
moveVegetable: (fromCellId: string, toCellId: string) => void;
}
4. 実装ステップ
以下の手順で実装を進め、ファイルを作成・編集してください。
Step 1: プロジェクト基盤のセットアップ
- Next.jsプロジェクトの初期化（もし必要なら）。
-
src/types/garden.tsの作成。 -
src/data/vegetables.tsを作成し、主要な野菜（トマト、ナス、キュウリ、ピーマン、バジル、マリーゴールド等）のデータを定義すること。コンパニオンプランツのルールも適当なデータを入れておくこと。
Step 2: UIコンポーネントの実装
-
components/garden/VegetablePalette.tsx: ドラッグ可能な野菜リスト。 -
components/garden/GardenGrid.tsx: ドロップ可能なグリッドエリア。CSS Gridを使用。 -
components/garden/GardenCell.tsx: 個別のセル。ここにコンパニオンプランツ判定ロジック（隣接セルのチェック）を組み込み、相性によって枠線の色を変えるなどの視覚フィードバックを実装する。
Step 3: 状態管理の実装
-
src/store/useGardenStore.ts: Zustandを使ったストアの実装。
Step 4: メイン画面の組み立て
-
app/page.tsx: ヘッダー、パレット、グリッドをレイアウト。レスポンシブ対応（スマホではパレットを下に配置など）。
5. デザインガイドライン
- 全体的に「自然」「土」「緑」を感じさせる配色（Earth tone & Green）。
- UIはモダンでクリーンに。角丸やドロップシャドウを適切に使い、安っぽくならないようにする。
- ユーザーが操作した時のインタラクション（掴んだ時、離した時）のアニメーションを重視する。
まずはこれらを実装し、ブラウザで動作確認できる状態にしてください。
必要なnpmパッケージのインストールコマンドも教えてください。
このプロンプトを投げた直後、Antigravityの**Mission Control（エージェント管理画面）**が動き出し、以下のようなアクションが実行されました。
- Project Initializing: npx create-next-app が裏で走る。
- Dependencies Install: shadcn-ui, zustand, @dnd-kit 等の追加。
- File Creation: 指定した src/types/garden.ts を作成し、そこから依存するStoreやComponentを次々と生成。
私は生成されていくファイルツリーをコーヒーを飲みながら眺めていただけです。
**「見ているだけでびっくりするほど簡単に動く画面が出来上がっていく」**体験は、これまでのコーディングとは全く別次元のものでした。
生成されたコードの中身
「AIが書いたコードなので、ある程度の手直しは必要だろう」と予想していましたが、今回はデータモデル（型定義）を厳密に渡していたためか、生成されたコードの整合性はかなり高かったです。
- ディレクトリ構造
最終的なファイル構成（tree）も非常に整理されていました。
src
├── components
│ ├── garden
│ │ ├── GardenGrid.tsx # グリッド本体
│ │ ├── GardenCell.tsx # 個別のセル（ここに判定ロジックが入る）
│ │ ├── VegetablePalette.tsx
│ │ └── ...
│ └── ui # shadcn/uiのコンポーネント群
├── data
│ └── vegetables.ts # 野菜のマスターデータ
├── store
│ └── useGardenStore.ts # Zustandによる状態管理
└── types
└── garden.ts # 最初に指定した型定義
コンポーネントの責務が明確に分離されており、後から人間が手を入れるのも容易な構造です。
- 野菜のマスターデータ
野菜のマスターデータです。
細かい指示を与えなくても栽培時期やサイズをある程度適切と思える値を入れてくれています。
相性がいい野菜のリストも自動的に作成してくれています。
export const VEGETABLES: Vegetable[] = [
// --- 春夏野菜 (Spring/Summer) ---
// 果菜類
{
id: 'tomato',
name: 'トマト',
icon: '🍅',
color: 'bg-red-100 border-red-300 text-red-700',
season: 'spring-summer',
goodCompanions: ['basil', 'leek', 'parsley', 'onion', 'garlic'],
badCompanions: ['potato', 'eggplant', 'cucumber'],
description: '家庭菜園の人気No.1。日当たりと水はけの良い場所を好みます。',
plantingPeriod: '4月下旬〜5月',
harvestPeriod: '7月〜9月',
tips: '脇芽かきをこまめに行いましょう。雨よけがあると病気を防げます。',
sizeCm: 50,
},
{
id: 'mini-tomato',
name: 'ミニトマト',
icon: '🍅',
color: 'bg-red-50 border-red-200 text-red-600',
season: 'spring-summer',
goodCompanions: ['basil', 'leek', 'shiso'],
badCompanions: ['potato', 'eggplant'],
description: '大玉トマトより育てやすく、初心者におすすめ。プランターでもよく育ちます。',
plantingPeriod: '4月下旬〜5月',
harvestPeriod: '7月〜10月',
tips: '肥料を与えすぎると葉ばかり茂るので注意。',
sizeCm: 40,
},
開発体験：ここがすごかった
- 仕様書（プロンプト）通りの忠実な実装
特に驚いたのが**「コンパニオンプランツ判定」**の実装です。
プロンプトで「隣接するマスに相性の良い野菜があれば枠線の色を変える」と指定したところ、GardenCell.tsx 内で隣接セルをチェックするロジックが正確に実装され、相性を判定して色を変えるコードが一発で生成されました。
- エラー修正の自律性
開発中、いくつかの型エラーや依存関係の競合が発生したようですが、Antigravityのエージェントがログを解析し、勝手に修正コミットを行っていました。人間がスタックトレースを追う時間はゼロでした。
まとめ
Google Antigravityを使って感じたのは、 「プログラミングにおける『実装』のフェーズは、AIエージェントの仕事になった」 という確信です。
私たち人間に求められるのは、以下の2点に集約されていくでしょう。
- 「何を作りたいか」を明確に言語化する力（要件定義）
- AIが迷わないための「型（データ構造）」を設計する力
今回のように、interface をしっかり定義して渡せば、AIはそれを守って完璧な実装を返してくれます。Antigravityは、まさにその未来を先取りするツールでした。
1日でここまで動くものが作れるなら、個人開発の可能性は無限大です。
ぜひ皆さんも、Antigravityで「指示するだけ開発」を体験してみてください。
Discussion