ブックマーク並べ替え機能の追加を通じて実装計画の確認方法を学ぶ

GoogleのAI開発ツール「Antigravity」を使ってエージェントファースト開発を実践する本連載。前回は、Antigravityのインターフェイスを把握し、サンプルアプリ「MyMarks」のひな形を作成するところまで進めた。エージェントに指示を出せば、ファイル構成の作成から動作テストまでを自律的にこなしてくれることが確認できたはずだ。

今回は、このひな形をベースに機能を追加していく過程を通じて、エージェントへの指示の出し方や、エージェントが立てる計画の確認方法、修正の指示の出し方などを詳しく見ていこう。

エージェントへの指示の出し方

ChatGPTなどのチャット型AIを使う場合と同様に、AIエージェントを使ったアプリケーション開発でも、エージェントには自然言語で指示を出すことができる。つまり、普段人間に頼み事をするときと同じように指示を出せばよい。ただし、指示の内容が曖昧すぎると、エージェントは意図とは異なる実装を行ってしまうことがある。そのため、AIの能力を生かすためには良い指示の出し方を意識する必要がある。

最も大切なのは、どんなプログラムを作りたいのかをできるだけ具体的に伝えることだ。例えば、MyMarksアプリでブックマークの並べ替え機能を追加することを考える。このとき、単に「ブックマークを並べ替えられるようにして」という指示では、エージェントが判断しなければならないことが多すぎる。何を基準に並び替えるのか、昇順・降順のどちらか、並び替えボタンはどこに置くのか、といったことが何も伝わっていない。このような指示でもエージェントは何らかの画面を作ってくれるが、最初に意図した通りになる可能性は低い。

この場合、最低限次のような指示を出すと、エージェントはより具体的な実装をしてくれる。

ブックマーク一覧にソート機能を追加してください。
ヘッダー部分にドロップダウンメニューを置き、「登録日時（新しい順）」「登録日時（古い順）」「タイトル順」の3種類から選べるようにします。
デフォルトは「登録日時（新しい順）」とします。
タイトル順のソートでは、英語タイトルは「A→Z」のアルファベット順、日本語タイトルは「あ→ん」の五十音順で並ぶように実装してください

ゴールが明示されており、ソートの基準、UIの配置場所、選択肢の種類、デフォルト値まで明確に指示している。特にタイトル順でのソートは、エージェントに任せると順序の扱いが曖昧になりやすいポイントなので、きちんと指示に盛り込んでおくことが重要だ。詳細な仕様まで決まっているのであればもっと細かく指示してもいいが、作りながら試していきたいという場合は、最初はこの程度の指示にとどめておいて、エージェントの反応を確認しながら指示を少しずつ増やして進めるというやり方でもよい。

良い指示のポイントをまとめると次のようになる。

• ゴールを明示する: 何を実現したいのかを明確に伝える
• UIの配置や形式を具体的に伝える: 「ヘッダーにドロップダウンを追加」「カード右上にボタンを配置」など
• 選択肢や初期値を伝える: 「3種類から選べるようにする」「デフォルトはxxを選択しておく」など
• 制約条件を伝える: 使用する技術、デザインの方向性、避けるべき実装など

逆に避けたほうがいい表現としては、「いい感じに」や「それっぽく」といった主観的な言葉がある。AIには何が「いい感じ」なのかを判断することは難しい。こういった曖昧な表現で適切な実装をして欲しい場合には、事前にどんなものが「いい感じ」なのかを教えておく必要がある。

一度に多くの指示を詰め込みすぎるのも避けたほうがいい。「ソート機能と検索機能を追加した上で、UIも全体的に整えて」といった感じで一度に指示をすると、エージェントの計画が複雑になりすぎて、意図したものとのずれが生じやすくなる。機能を少しずつ追加していく形で順番に指示を出す方が結果的にスムーズにいきやすい。

なお、指示は日本語でも英語でも構わない。ただし、変数名や関数名に英語を使いたい場合は、指示の中で「変数名は英語で」のように一言添えておくと、生成されるコードの中で一貫して英語名を使ってくれるようになる。

MyMarksにブックマークの並べ替え機能を追加する

それでは、実際に前回作成した「MyMarks」にブックマークの並べ替え機能を追加してみる。Agent ManagerでMyMarksワークスペースを開き、チャット欄に次のような指示を入力しよう。

ブックマーク一覧にソート機能を追加してください。
ヘッダー部分にドロップダウンメニューを置き、「登録日時（新しい順）」「登録日時（古い順）」「タイトル順」の3種類から選べるようにします。
デフォルトは「登録日時（新しい順）」とします。
タイトル順のソートでは、英語タイトルは「A→Z」のアルファベット順、日本語タイトルは「あ→ん」の五十音順で並ぶように実装してください

エージェントは指示を受けるとまず実装計画（Implementation Plan）を作成する。この計画書には、実装の概要、必要なファイルの追加・変更、UIの構成、テスト方法などが記載される。この計画書を確認することで、エージェントがどんな実装をしようとしているのか把握できる。

• 

  エージェントに機能追加の指示を出した例

具体的な実装方法は環境や使用しているAIモデルによって異なるが、筆者の環境ではまず設計方針として次の内容が提示された。

# ブックマーク一覧にソート機能を追加

ブックマーク一覧に3種類のソート（新しい順・古い順・タイトル順）を追加する。ドロップダウンはリスト上部に配置し、デフォルトは「新しい順」。タイトル順は英語・日本語の両方に対応。

## 設計方針

- ソートは表示時のみの変換（LocalStorage のデータ順序は変えない）
- ソート状態 (SortOrder) は page.tsx が保持し、BookmarkList へ props で渡す
- タイトル順のソートには String.prototype.localeCompare を使用し、ロケール ['en', 'ja'] を指定することで英語（A→Z）・日本語（あ→ん）の両方に対

指示の内容をエージェントがほぼ正確に理解して実装を始めようとしていることがわかる。ソート状態をどう保持して、どうUIに反映するかなどもこの計画書に記載されている。

実装計画には、さらに次のように具体的な変更内容も記載される。

## 提案する変更

### ページロジック

#### [MODIFY] page.tsx

- SortOrder = 'newest' | 'oldest' | 'title' 型を追加してエクスポート
- sortBookmarks(bookmarks, order) 関数を追加
    - newest: createdAt 降順
    - oldest: createdAt 昇順
    - title: localeCompare(['en', 'ja']) で昇順
-   sortOrder state（デフォルト 'newest'）を追加
    - filteredBookmarks をさらに sortBookmarks() に通した sortedBookmarks を BookmarkList に渡す

### コンポーネント

#### [MODIFY] BookmarkList.tsx

- sortOrder: SortOrder と onSortChange: (order: SortOrder) => void を props に追加
- リスト上部に「ブックマーク一覧」見出し＋ソートドロップダウン (<select>) を含む .list-header を追加
- 選択肢: 「登録日時（新しい順）」「登録日時（古い順）」「タイトル順（A→Z / あ→ん）」

### スタイル

#### [MODIFY] globals.css

- .list-header: flex 横並び、見出しとドロップダウンを両端配置
- .sort-wrapper: グラスモーフィズム風のドロップダウンコンテナ（既存デザインと統一）
- .sort-select: ネイティブ select のデフォルト UI を除去してカスタムスタイルを適用
- @media (max-width: 768px): .list-header を縦並びに変

どのファイルにどのような変更を加えようとしているのかがわかるだろう。

実装後のテスト方法は「検証計画」の項目に記載されている。

## 検証計画

### 自動テスト

```plaintext
npx tsc --noEmit
```

TypeScript コンパイルエラーがないことを確認。

### 手動確認

- ドロップダウンを切り替えて順序が正しく変わることを目視確認
- 日本語タイトルと英語タイトルが混在している場合にタイトル順が正しいことを確認
- モバイル幅 (768px 以下) でレイアウトが崩れないことを確

自動テストはTypeScriptがコンパイルエラーしないことを確認するだけのようだ。あとは手動テストとして、ブラウザー上でどのように確認をすればいいのかという項目が記載されている。

実装計画と同時に、実行するタスクのリスト（Task List）も作られる。今回のケースではタスクリストは次のようになった。

□ 実装計画を作成してユーザー確認を得る
□ src/app/page.tsx — SortOrder 型・sortBookmarks 関数・ソート state を追加
□ src/components/BookmarkList.tsx — ソートドロップダウン UI を追加
□ src/app/globals.css — ドロップダウンのスタイルを追加（レスポンシブ含む）
□ TypeScript コンパイルエラーがないことを確

タスクリストを確認することで、現在どのタスクまでが実行済みで、この先どのタスクが残っているのかを一目で確認できるようになっている。

実装計画に修正案のコメントをつける

もしもエージェントが提案した実装計画やタスクリストに満足できない場合には、コメントをつけて修正を求めることができる。コメントは、各行の右端にある吹き出しマークのアイコンをクリックして記入する。たとえば、エージェントの提案ではドロップダウン上のタイトル順の選択肢が「タイトル順（A→Z / あ→ん）」になっている。これを単に「タイトル順」に変更するようにコメントをつけると、エージェントはその指示に従って実装を修正してくれる。

• 

  実装計画に修正のコメントを付ける

実装計画ができたら、「Proceed」ボタンをクリックして実装を開始する。エージェントは、計画に従ってファイルの修正を行なっていく。変更する範囲や実装の複雑さによっては、実装が完了するまでに時間がかかる場合もある。

実装結果をコード差分で確認する

実装が完了すると、テストを実行する前に作業が停止して、人間による確認が求められる。この時点で、各ファイルに対してどのような変更を行なったのかを、コード差分（Code Diff）として確認できる。今回の例ではBookmarkList.tsxの変更内容は次のようになった。緑の部分が、今回追加・変更した新しい箇所になる。

• 

  BookmarkList.tsxのコード差分を確認する

コード差分では、まず変更範囲が意図通りかを確認しよう。指定していないファイルが変更されていないか、指定したファイルが正しく変更されているかをチェックする。今回のソート機能であれば、もしもソート関連のコンポーネントと一覧を管理するファイル以外のものが変更されていれば、その理由をエージェントに確認したほうがいい。

次に、変数の定義やロジックの詳細も可能な限り確認する。ソートの選択肢をどのように表現しているかや、並べ替えの処理の実装方法など、コード上の誤りがないかをできる限りチェックしよう。コードの内容が理解できない場合は、この段階でチャットでエージェントに聞いて明らかにしておいた方がいい。

Webブラウザで動作確認する

実装に問題がなければ、エージェントは実装計画の「検証計画」のタスクに進もうとする。まず自動テストを実施していいか聞かれるので、「Run」を押せば、実装計画通りにTypeScriptのコンパイルテストが行われる。

• 

  自動テストの実行

これで問題が発生しなければ実装は完了だ。

• 

  実装の完了

完成したアプリを実行するには、指示どおりプロンプトに「npm run dev」と入力すればよい。アプリが立ち上がったら、Webブラウザで「http://localhost:3000」にアクセスし、実行計画書の手動テストの項目にしたがって動作確認を行おう。なお、Antigravityによるテスト用のブラウザー環境は、Agent Managerの左下のブラウザアイコンで起動できる。

• 

  ブックマークリストの左上に並べ変えのドロップダウンが追加された

• 

  選択肢も正しくされている

今回は「エージェントに指示を出す→実装計画を確認する→修正または承認する→実装結果を確認する」という一連のサイクルを体験した。このサイクルを繰り返すことが、エージェントファースト開発の基本的な流れになる。最初のうちは計画書やコード差分の確認に時間がかかるかもしれないが、慣れてくると「この計画は信頼できる」「ここは要確認」という判断が素早くできるようになってくるはずだ。

次回は引き続き、エージェントにフィードバックを与えながらアプリの修正を進める方法について解説する。