コンテンツにスキップ

レッスン 3 - エージェントモード: Plan と Autopilot

まず、プロジェクトに小さな機能を追加しました。しかし、より大規模な変更には、さらに堅牢なプロセスが必要です。GitHub Copilot app は組織の既存のフローに沿って作業できるように設計されており、適切なものを適切な方法で構築できます。このレッスンから数回にわたり、一般的なエージェント主導の開発プロセスを実践します。Issue を使って新機能を生成するところから始め、コードが有効で機能が期待どおりに動作することを確認し、最終的にプロジェクトへのマージを成功させます。

機能のワークフローを進める間は、同じセッションを使用します。通常は作業するファイルの種類ごとに異なるセッションや PR を使用しますが、ここでは中心となる概念に集中できるように手順を短縮します。

このレッスンでは、次の内容を学習します。

  • GitHub Issue から新しいエージェントセッションを開始した。
  • Plan モードで要件を定義する。
  • Autopilot モードを使用して新機能を実装する。
  • コードをレビューする。
  • ブラウザーキャンバスで機能を手動検証する。

この機能の作業を続けながら、リポジトリの指示を更新し、既存の quality-checks スキルをカスタマイズして、MCP による検証を追加し、QA エージェントを作成して、機能の PR を開きます。

シナリオ

Tailspin Toys のカタログが充実し、訪問者がカテゴリーとパブリッシャーでゲームを絞り込める機能が必要になりました。バックログの Issue に機能は記載されていますが、カテゴリーの組み合わせ方などはコーディング前に合意が必要です。Plan モードで決定事項を整理してから、Autopilot による範囲を限定した実装を承認します。

背景

AI コーディングエージェントを開発フローに導入しても、基本は変わりません。むしろ、基本はさらに重要になります。多くの開発者は、次のようなフローに従います。

  1. 必要な作業の詳細が記載された Issue を開く。
  2. 構築する内容の計画を作成する。
  3. コードを構築してレビューする。
  4. テストを実行してコードを検証する。
  5. 新機能を手動で検証する。
  6. pull request (PR) を作成する。
  7. コードのレビューと継続的インテグレーションプロセスが成功したら、コードをマージする。

正確な手順はチームや Organization によって異なりますが、多くの場合は上記の流れを変形したものです。

この標準的なアプローチを守ることで、AI が生成したコードが定められた要件を満たし、人間が作成したコードと同じ審査プロセスを通るようにできます。

セッションモード

セッションモードは、エージェントの自律性を制御します。プロンプトフィールド下のドロップダウンから設定し、いつでも変更できます。

  • Interactive: ユーザーとエージェントが共同で作業します。エージェントは変更を提案し、続行前に入力を待ちます。
  • Plan: エージェントが最初に計画を作成します。計画実行前に内容をレビューして承認します。
  • Autopilot: エージェントが完全に自律して作業し、入力を待たずにコードの作成、テストの実行、反復を行います。

Plan モードで開始し、計画をレビューしてから、Autopilot で実装します。

Issue からセッションを開始する

開始前に、星評価の PR がマージされ、ローカルの main が最新であることを確認します。

  1. Issues を選択し、Allow users to filter games by category and publisher を開きます。

  2. New session を選択し、更新済みの main に基づく new working tree を選びます。

    GitHub Copilot app の Issue ビューで、New session ボタンを矢印で示した画面

  3. Issue がセッションに添付されていることを確認し、モードセレクターで Plan を選択します。

フィルター機能を計画する

計画を立てることで、Copilot がコードを書く前にアプローチをレビューできます。Issue から開始したため、Copilot は機能のリクエストをすでにコンテキストとして持っています。次を送信します。

Build this feature.

Copilot の質問に回答し、Issue の受け入れ条件と計画を照らし合わせます。カテゴリーとパブリッシャーによる絞り込み、アクセシブルなコントロール、データアクセスの変更、テストが含まれていることを確認してください。複数のカテゴリーをどのように組み合わせるか、一致するゲームがない場合にどうなるかなど、不明確な動作について話し合います。

計画には、プロジェクトの既存ツールを使った lint、単体テスト、E2E テスト、型チェックを含めます。フィルター機能の実装とテストに範囲を絞ってください。PR は品質ワークフローの完了後に作成します。計画の修正は承認前に依頼し、後の検証に使えるよう Issue の URL と合意した追加の取り決めを控えておきます。

Autopilot を明示的に承認する

計画に納得したら、Approve and implement with autopilot、または使用中のバージョンで表示される同等のオプションを選択します。モード表示が Autopilot になっていることを確認してください。

Copilot が実装を開始します。作成した計画に沿ってコードを生成し、テストも実行しながら、プロセスを反復して進めます。

承認するとすぐに実装が始まる場合があるため、先に計画をレビューしてください。依存関係の不足やポート競合が報告された場合は、チェックを完了と判断する前にセットアップの問題を解決します。停止してよいのは、自分で起動したサーバーだけです。

実装をレビューして検証する

生成されたコードも、他のコードと同じようにマージ前のレビューが必要です。コードをレビューし、サイトを実行して問題がないことを確認しましょう。

  1. Changes を開き、フィルター機能の実装とテストを確認します。
  2. 複数カテゴリーとパブリッシャーの組み合わせも含め、結果を Issue と承認した追加の取り決めに照らし合わせます。変更が既存のリポジトリの指示に従っていることを確認します。
  3. lint、単体テスト、E2E テスト、型チェックの出力を確認します。スキップされたチェックは成功ではありません。
  4. 実装を承認する前に失敗を解消し、該当するチェックを再実行します。Playwright の E2E 設定はビルドしてプレビューを配信し、ローカルサーバーを再利用できるため、テスト対象が以前のレッスンではなくこの worktree のサーバーであることを確認します。

新機能を確認する

コードに問題がないように見えても、実際に動くでしょうか。前と同じようにアプリを起動し、ブラウザーキャンバスでサイトを開きます。

  1. 次のプロンプトを使い、アプリを起動してブラウザーキャンバスでページを開くよう Copilot に依頼します。

    Start the app and open it in the browser canvas.
  2. しばらくするとアプリが起動し、Copilot app 内にブラウザーウィンドウが開きます。

  3. 評価済みのゲームカードに5点満点の値が表示されることを確認します。

  4. 確認が終わったら、次のプロンプトを使い、このセッションで起動した開発サーバーを停止するよう Copilot に依頼します。

    Stop the dev server and close the browser canvas.

まとめと次のステップ

さまざまなエージェントモードを使用して、機能を構築およびレビューしました。このレッスンでは、次の作業を行いました。

  • GitHub Issue から新しいエージェントセッションを開始した。
  • Plan モードで要件を定義した。
  • Autopilot モードを使用して新機能を実装した。
  • コードをレビューした。
  • ブラウザーキャンバスで機能を手動検証した。

次は、カスタム指示を使用して、文書化されたプラクティスにコードを従わせる方法をさらに詳しく確認します。

リソース