演習 6 - GitHub Copilot の作業を反復して改善する

← 前のレッスン: エージェントの監視と管理

作業をレビューする

このラボでは、ユーザー体験を改善するいくつかのタスクに GitHub Copilot と取り組んできました。エージェントモードでクライアントとサーバーの両方にフィルターを追加し、Playwright MCP サーバーでその作業をブラウザーから手動でテストしました。その後、カスタムエージェントを使って、高コントラストモードとライトモードの切り替えというアクセシビリティ機能を実装し、進行中のセッションを方向付けして作業を広げました。次は、そのローカルの作業を公開し、チームと同じ方法でレビューします。

シナリオ

生成 AI が加わっても、ソフトウェア設計と DevOps の基本は変わりません。Copilot が生成するものには、引き続きしっかりとしたレビューのサイクルが必要です。このことを踏まえて、codespace からアクセシビリティの変更をプッシュし、プルリクエストを作成して、チームのほかのメンバーに参加してもらう前に差分を確認しましょう。

アクセシビリティ機能を公開する

演習 4と演習 5でアクセシビリティ用カスタムエージェントと実装した、高コントラストモードとライトモードの切り替えは、コミット済みの変更として codespace にあります。チームのほかのメンバーがレビューできるように、ブランチにプッシュしてプルリクエストを作成します。

codespace に戻ります。
VS Code の Source Control ビューを開きます。
アクセシビリティの変更がコミット済みであることを確認します。演習 5 の未コミットの変更がある場合は、今ステージして、Add high-contrast and light-mode toggles などの内容が分かるメッセージでコミットします。
Publish Branch を選択してブランチを公開します (または … メニュー → Push を使います)。
VS Code から新しいブランチを github.com で開くように促されます。そのプロンプトを受け入れるか、手動でリポジトリに移動し、ブランチのバナーで Compare & pull request を選択します。
分かりやすいタイトル (例: Add high-contrast and light-mode toggles) と、何をなぜ行ったかをまとめた短い説明を設定します。
Create pull request を選択します。
PR が作成されたら、Files changed タブを選択し、作業全体をレビューします。特に次の点に注意します。
- モードを切り替えるためのトグル UI コンポーネント。
- ユーザー設定を永続化するためのローカルストレージの使用。
- 高コントラストモードとライトモード用の CSS またはスタイルの変更。
- アクセシビリティ属性 (ARIA ラベル、キーボードナビゲーションなど)。
- モード切り替えを管理する JavaScript/TypeScript コード。
Conversation タブに戻ります。
承認待ちのワークフローがある場合は、Approve and run workflows を選択します。
ワークフローの完了を待ちます。問題がなければ、成功したことを確認できるはずです。

アクセシビリティの作業について別の意見が必要ですか。PR コメントで @copilot をタグ付けし、「この PR にほかの WCAG の問題がないかレビューしてください」や「キーボードナビゲーションの改善を提案してください」などと依頼します。Copilot は、そのコメントに対応する新しいセッションを開始します。

省略可能な演習 - ローカルでさらに試す

IDE 内でエージェントと反復的に作業することもスキルの 1 つであり、身に付けるには繰り返しが欠かせません。VS Code から実行できる追加セッションのアイデアを紹介します。

ゲーム詳細ページに、支援に関心のある人向けのフォームを追加します。
ゲーム一覧ページにページネーションを実装します。
src/lib/ のデータアクセスヘルパーに入力検証とエラー処理を追加します。
アクセシビリティエージェントの対象範囲を広げます。たとえば、サイト全体のキーボードフォーカスの順序を監査します。

まとめ

おめでとうございます。VS Code コースを完了しました。このラボでは、次のことに取り組みました。

Playwright MCP を使って機能を手動でテストしました。 Playwright MCP サーバーを追加し、プルリクエストを作成する前に Copilot にブラウザーを操作させてフィルター機能を検証しました。
エージェントモードでスタック全体にまたがる変更を連携して進めました。 1 回のセッションで、クライアント、サーバー、テストにまたがるフィルター機能を追加しました。
カスタムエージェントを使いました。 エージェント選択メニューからアクセシビリティに特化したカスタムエージェントを選び、リポジトリに高コントラストモードを実装する様子を確認しました。
エージェントのセッションを管理し、方向付けしました。 提案された変更をインラインでレビューし、必要なものを受け入れ、ライトモードの追加依頼でセッションを広げました。
プルリクエストで一連の作業を締めくくりました。 ローカルの作業を公開し、チームと同じ方法で全体をレビューしました。

振り返りと次のステップ

これで必須の VS Code コースは終了です。ここでワークショップを完了して構いません。

Copilot のエージェント機能について視野を広げたい場合は、ほかのコースで、異なる操作環境から関連するシナリオに取り組めます。

💻 CLI コース — Copilot CLI を使ってターミナルから同様の流れに取り組みます。プランモード、エージェントスキル、カスタムエージェント、/share、/context、/delegate などのスラッシュコマンドを扱います。
☁️ クラウドエージェントコース — クラウドエージェントへの Issue の割り当て、エージェントページでのセッションの監視、プルリクエストでの非同期の反復作業に重点を置きます。

ここで始めた作業をさらに発展させることもできます。awesome-copilot には、自分のプロジェクトに応用できる指示ファイル、カスタムエージェント、スキルが豊富にあります。

省略可能な拡張演習である省略可能: Foundry を組み込むでは、VS Code と Microsoft Foundry Toolkit を使ってモデルを準備し、Backer Concierge をデプロイしてサイトに接続します。

リソース

← 前のレッスン: エージェントの管理