レッスン 2 - 星評価の追加で小さな成果を得る

前のレッスンでは、ワークスペースを確認し、クイックチャットを使いました。ここでは、エージェントセッションを開始し、プロジェクトに最初の変更を加えます。変更は小規模なものにします。ゲームのデータにはすでに星評価が含まれていますが、ホームページのゲームカードにはまだ表示されていません。エージェントに表示を依頼し、変更をレビューして、最初の pull request としてマージします。

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

• エージェントセッションを開始し、セッションの構成を理解する。
• プロジェクトに小規模で対象を絞った変更を加えるようエージェントに依頼する。
• ワークスペースの差分ビューで変更をレビューする。
• アプリをローカルで実行し、ブラウザーで変更を確認する。
• 最初の pull request を作成してマージする。

シナリオ

Tailspin Toys の各ゲームには星評価を設定でき、ゲーム詳細ページにはすでに表示されています。一方、ホームページのゲームカードには、タイトル、カテゴリー、パブリッシャー、説明だけが表示されています。最初のセッションの準備運動として、各カードに既存の評価を表示するようエージェントに依頼します。小規模で自己完結した、最初のセッションに最適な変更です。

セッションの構造

セッションとは、分離された独自のワークスペースで実行されるエージェントとの会話です。すべてのセッションに専用の git worktree とブランチが割り当てられます。そのため、一方では機能を追加し、もう一方ではバグを修正するなど、変更を競合させずに複数のセッションを同時に実行できます。セッションはリポジトリごとにグループ化されてサイドバーに表示され、選択すると切り替えられます。

セッション内には、エージェントとの会話、ファイルを調査および編集するときのエージェントのツールアクティビティ、差分付きの変更済みファイル一覧という3つの要素が表示されます。

セッションを開始して変更を依頼する

新しいセッションを開始し、プロジェクトの調査と機能の実装に取りかかります。前のレッスンでは、GitHub リポジトリからプロジェクトを追加しました。そのリポジトリ用の新しいセッションを作成し、変更を依頼します。

1. GitHub Copilot app に戻ります。アプリを閉じている場合は開きます。

2. Projects の横にある + を選択します。

3. リポジトリとして tailspin-toys を選択します。

4. プロンプトボックスの下で new working tree と Interactive モードを選択します。次のプロンプトを使って変更を依頼します。

   Show each game's starRating out of 5 in the game cards on the list page. If the rating is null, show "No rating yet". Keep the card layout as it is, add tests, and run the relevant checks.

5. Enter を押して、プロンプトを Copilot に送信します。

Copilot app は、最初にプロジェクトの分離されたコピーである新しい worktree を作成して作業を開始します。次にプロジェクトを調査し、新機能の追加に必要な更新対象ファイルを見つけて、必要なコードを作成します。これで Copilot app を使って新機能を追加できました。

差分をレビューする

AI が生成したすべての変更は、どれほど小さくてもマージ前にレビューする必要があります。Copilot app 内で変更を確認します。

1. アプリの右上隅にある Toggle review panel を選択します。Copilot が行った未処理の変更がすべて表示される差分画面が開きます。

   

2. ゲームの詳細表示に使用される中心的なファイル GameCard.astro にコードが追加されていることを確認します。次のような小さなブロックが追加されているはずです。評価がある場合は表示し、starRating が null の場合は “No rating yet” を表示します。

   {game.starRating !== null ? (
       <span class="text-xs font-medium px-2.5 py-0.5 rounded bg-amber-900/60 text-amber-300" data-testid="game-rating">
           ★ {game.starRating} / 5
       </span>
   ) : (
       <span class="text-xs font-medium text-slate-500" data-testid="game-rating-empty">
           No rating yet
       </span>
   )}

Copilot は、すべての生成 AI ツールと同様に決定論的ではなく確率的に動作するため、実際のコードは上記と異なる場合があります。ただし、比較的よく似たものになります。

変更を確認する

ブラウザーを開く前に、エージェントの自動チェック結果をレビューします。数値の starRating と null の場合の代替表示をテストしていることを確認します。前提条件が不足していたり、チェックがスキップされていたりする場合は成功ではありません。インストールの要求は内容を確認してから承認してください。

コードを読むだけで動くと判断するのではなく、Copilot に Web サイトを開かせて、更新された UI を確認しましょう。Web サイトを起動し、ブラウザーキャンバスで開くよう依頼できます。

キャンバスは、Copilot app 内で利用できるインタラクティブなウィジェットです。後のレッスンではカスタムキャンバスを調べ、自分でも作成しますが、ここでは組み込みのブラウザーキャンバスを使用します。

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.

最初の pull request を作成してマージする

機能を作成できました。次は、新しいコードを既存のコードベースにマージするための pull request (PR) を作成します。

1. 右上隅にある Create PR を選択します。
2. 求められた場合は Sign in with your browser を選択し、画面の指示に従って認証します。
3. Copilot が PR の作成を開始します。
4. チャットのすぐ上にある PR バブルを選択し、レビューペインで PR を開いて pull request を確認します。必要に応じて、ここで PR をレビューできます。
5. 準備ができたら Ready to merge を選択します。
6. 新しいダイアログウィンドウで Merge pull request を選択し、pull request をマージします。

まとめと次のステップ

最初のエージェントセッションを開始し、最初の変更をリリースしました。具体的には、次の作業を行いました。

• エージェントセッションを開始し、セッションの構成を学習した。
• ゲームカードに小規模で対象を絞った変更を加えるようエージェントに指示した。
• ワークスペースの差分ビューで変更をレビューした。
• アプリをローカルで実行し、ブラウザーで星評価を確認した。
• PR 1 を作成し、チェックをレビューして、明示的にマージした。

次は、フィルター機能の Issue から開始し、Plan モードと Autopilot モードを使用して、より大規模な機能を構築します。

リソース

• GitHub Copilot app でのエージェントセッションの操作
• GitHub Copilot app について
• GitHub Copilot app での Issue と pull request の管理