GitHub Copilotワークショップへようこそ！

本日のゴール

• Agentic Workflow
• GitHub Copilot CLI

このワークショップでは、以下のGitHubリポジトリを使用します：

プロジェクトURL: https://github.com/NRI-Enablement-Lab/moulongzhang

ステップ1: テンプレートからリポジトリを作成する

まず、上記のプロジェクトURLをブラウザで開き、テンプレートから自分のリポジトリを作成します：

1. プロジェクトURL（https://github.com/NRI-Enablement-Lab/moulongzhang）をブラウザで開く
2. 右上の Use this template ボタンをクリックし、Create a new repository を選択

テンプレートからの作成が完了すると、あなたのGitHubアカウントに新しいリポジトリが作成されます。

ステップ2: 開発環境のセットアップ

作成したリポジトリを使って、GitHub Codespacesで開発環境を準備します：

1. 作成したリポジトリのページで（https://github.com/NRI-Enablement-Lab/[あなたのリポジトリ名]）
2. 緑色の Code ボタンをクリック
3. Codespaces タブを選択
4. Create codespace on main をクリック

GitHub Actions と Copilot を組み合わせることで、自律的なタスクを実行する Agentic Workflow を体験しましょう。

Agentic Workflow とは

Agentic Workflow は、GitHub Actions のワークフロー内で Copilot（AI）を活用し、コードの変更に応じた自律的なタスクを実行する仕組みです。

Auto Healing DevOps の作成

CI/CD のジョブが失敗した時にそれらを検知し、修正するワークフローを作成します。

一つ目のプロンプト

Copilot に以下のプロンプトを入力してください：

以下のURLを参照して GitHub Agentic Workflow を作成してください。
https://github.com/github/gh-aw/blob/main/create.md

ワークフローの目的は以下のとおりです：
リポジトリで失敗したワークフロー実行を検知し、原因を分析してIssueを自動作成する。
作成したissueにはCopilotを自動アサインする。

二つ目のプロンプト

ワークフローが作成できたら、意図的にビルドを失敗させて動作を確認します。Copilot に以下のプロンプトを入力してください：

System.out.println("Hello World!"); を System.out.println("Hell World!"); にして push して

Push 後、GitHub Actions のワークフローが失敗を検知し、Copilot が自動的に Issue を作成してアサインされることを確認しましょう。

ドキュメントの自動更新

コードに変更が加わった際に、関連するドキュメントを自動更新するワークフローを作成します。

Copilot に以下のプロンプトを入力してください：

以下のURLを参照して GitHub Agentic Workflow を作成してください。
https://github.com/github/gh-aw/blob/main/create.md

ワークフローの目的は以下のとおりです：
- copilotWebRelay 配下のコードが更新された時に実行されます
- copilotWebRelay 配下のコードの内容に応じて copilotWebRelay/docs のドキュメンテーションを更新し、ソースコードとドキュメンテーションが常に一致するようにします

ここからは上級編として、Copilot Web Relay — ブラウザから GitHub Copilot CLI にアクセスできる Web アプリケーションを構築します。

このセクションでは、ポモドーロタイマーとは異なるアプローチを取ります。事前に用意された設計書をCopilotに読み込ませ、設計書をもとに対話しながら段階的に実装していくワークフローを体験します。

Copilot Web Relay とは？

ローカルで動作する GitHub Copilot CLI を、ターミナルを直接操作することなくブラウザ上のUIを通じてリアルタイムにやり取りできるようにするWebアプリケーションです。

アーキテクチャ概要

Browser ↔ WebSocket（双方向通信）↔ Backend Server ↔ PTY/stdin/stdout（子プロセス管理）↔ Copilot CLI

開発の進め方

このセクションでは以下の流れで進めます：

1. 設計書を確認 — プロジェクトに配布された設計書を確認し、アプリケーションの全体像を理解する
2. GitHub Copilot CLI — ターミナルで CLI を立ち上げ、問題なく動作することを確認する
3. AI 駆動開発 — 設計書を活用し、GitHub Copilot CLI と対話しながら Web アプリケーションを Vibe Coding で実装する

1. 設計書の確認

プロジェクト内の copilotWebRelay/planning.md に、Copilot Web Relay の設計書が配布されています。まずはこのファイルを開いて、アプリケーションの全体像を確認しましょう。

設計書には以下の内容が含まれています：

• アーキテクチャ: Browser ↔ WebSocket ↔ FastAPI ↔ PTY ↔ Copilot CLI の構成
• コンポーネント構成: Frontend（React/TS）、Backend（FastAPI）、CLI Bridge（pexpect）
• 機能要件: Phase 1（MVP）と Phase 2（チャット UI 強化）
• WebSocket プロトコル設計: メッセージ形式と状態管理の仕様
• ディレクトリ構造: ファイル配置と各ファイルの役割
• 実装タスク一覧: タスク間の依存関係
• 実装上の重要な注意事項: つまずきやすいポイントの事前対策

2. GitHub Copilot CLI の起動確認

VS Code のターミナルを開き、以下のコマンドを入力して GitHub Copilot CLI を起動してみましょう：

copilot

正常に起動すると、対話型のインターフェースが表示されます。/help と入力して、利用可能なコマンドを確認してみましょう。

3. GitHub Copilot CLI のコマンド一覧

GitHub Copilot CLI では、テキストで自然言語の指示を入力するほか、/ で始まるスラッシュコマンドを使用できます。

コード関連

パーミッション

セッション管理

ヘルプ・フィードバック

その他

カスタム指示ファイル

Copilot CLI は以下の場所にあるカスタム指示ファイルを自動的に読み込みます：

• CLAUDE.md / GEMINI.md / AGENTS.md（git ルートおよびカレントディレクトリ）
• .github/instructions/**/*.instructions.md（git ルートおよびカレントディレクトリ）
• .github/copilot-instructions.md
• $HOME/.copilot/copilot-instructions.md

設計書の確認と GitHub Copilot CLI の動作確認ができたら、いよいよ Vibe Coding で Copilot Web Relay を実装していきます。

以下の 4 ステップを順番に実行するだけで、Copilot が設計書をもとにアプリケーションを構築してくれます。

ステップ 1: Copilot CLI を起動する

VS Code のターミナルで Copilot CLI を起動します。

copilot

ステップ 2: すべてのパーミッションを許可する

/allow-all

/allow-all は、Copilot CLI に対してツールの実行・ファイルアクセス・外部URLへのアクセスのすべてのパーミッションを一括で許可するコマンドです。

通常、Copilot CLI はセキュリティのために、ファイルの読み書きやコマンドの実行、外部通信を行う際にユーザーへ都度許可を求めます。/allow-all を実行することで、これらの確認プロンプトをスキップし、Copilot がファイルの作成・編集、パッケージのインストール、サーバーの起動などを自律的に実行できるようになります。

ステップ 3: ハイエンドモデルを選択する

/model Claude Opus 4.6

最も高性能なモデルを選択します。Copilot CLI は /model コマンドで使用する AI モデルを切り替えることができ、タスクの複雑さに応じて最適なモデルを選べます。今回のような複数コンポーネントを持つ Web アプリケーションの構築には、推論能力の高いハイエンドモデルが効果的です。

ステップ 4: Fleet モードで一気に実装する

/fleet Copilot Web Relay — ブラウザから GitHub Copilot CLI にアクセスできる Web アプリケーションを構築します。copilotWebRelay/planning.md の計画に沿って実装を進めてください。不明なことがあれば事前に私に聞いてください。

/fleet は、複数のサブエージェントを並行して起動し、大規模なタスクを分割・同時実行するためのコマンドです。

通常の Copilot CLI では 1 つのタスクを順番に処理しますが、/fleet を使うと Copilot が自動的にタスクを分解し、バックエンドの実装・フロントエンドの実装・設定ファイルの作成など複数の作業を並行して進めます。これにより、従来1つずつ指示して進めていた作業を、一度の指示で一気に完成させることができます。

Fleet モードでは以下のことが自動的に行われます：

• タスクの分解: 設計書を読み取り、実装すべきコンポーネントを特定
• 並行実装: バックエンド（FastAPI + CLI Bridge + WebSocket）とフロントエンド（React + xterm.js）を同時に実装
• 依存関係の解決: パッケージのインストール、設定ファイルの生成
• 統合テスト: 実装後の動作確認

つまずいた場合のヒント

Fleet モードの実装でエラーが発生した場合は、以下を試してみましょう：

• エラーメッセージをそのまま Copilot に共有: 「このエラーを修正してください」と伝えるだけで修正してくれます
• /diff で変更内容を確認: 意図しない変更がないかチェック
• /model でモデルを変更: 別のモデルに切り替えて再試行
• 設計書の注意事項を確認: planning.md の「実装上の重要な注意事項」セクションに、よくあるバグの対処法が記載されています

以下が、私の場合の1ショットでプロンプトを流した実装結果です。

Vibe Coding で実装した Copilot Web Relay のコードを、Copilot に解説してもらい理解を深めましょう。その後、問題点を見つけて改善まで行います。

1. コード全体の解説を依頼

まずは、実装されたコードの全体像を把握しましょう。エージェントモードで以下のプロンプトを入力してください：

この Copilot Web Relay アプリケーションのコード全体を確認して、アーキテクチャ、各ファイルの役割、主要な処理の流れを解説してください。

Copilot エージェントはプロジェクト内のファイルを自動的にスキャンし、コードの構造や処理の流れを解説してくれます。

2. 問題点を見つける

次に、コードの品質やセキュリティの観点から問題点を洗い出してもらいましょう：

この Copilot Web Relay アプリケーション全体を見て、どのような問題点や改善点がありますか？設計パターン、コードの品質、保守性、セキュリティの観点から教えてください。

さらに、特定のコンポーネントに絞って深掘りすることもできます：

backend/cli_bridge.py のエラーハンドリングとリソース管理に問題はありますか？改善案を提案してください。

frontend/src/App.tsx の WebSocket 接続管理に問題はありますか？React のベストプラクティスに従っているか確認してください。

3. 改善案を実装する

見つかった問題点を実際に修正してもらいましょう：

提示してくれたすべての改善案を実装してください。

Copilot はコードに対して直接変更を提案します。変更内容を確認し、チャット欄の「保持」もしくは「元に戻す」ボタンで受け入れるかどうかを決定しましょう。

4. 動作確認

改善を実装した後は、アプリケーションが引き続き正常に動作することを確認しましょう：

改善を実装した結果、アプリケーションが正常に動作することを確認してください。バックエンドの起動、フロントエンドのビルド、ブラウザでの動作確認を行ってください。

今日学んだこと

このワークショップでは以下のことを学びました：

1. GitHub Copilot の基本的な使い方
2. エージェントモードでのコードの解説・改善
3. AI をコントロールしながら実装するスペック駆動開発
4. 強力なモデルとツールを用いた AI 駆動開発

次のステップ

• 実際のプロジェクトでCopilotを活用してみる
• より複雑なアプリケーション開発に挑戦する
• Copilotの新機能をキャッチアップする
• Copilot Web Relay を自身の環境にデプロイしてみる

リソース

• GitHub Copilot Documentation
• GitHub Copilot ベストプラクティス

お疲れさまでした！