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

この勉強会では、Copilot Playbook で紹介されているシンプルな概念を実際に手を動かして体験します。

PLAN → CODE → REVIEW → TEST & SECURE → OPERATE のフェーズに沿って GitHub Copilot を使い、最終的には Playbook の簡易版（Markdown を綺麗に閲覧できるサイト）を Copilot と一緒に作り上げます。

本日のゴール

• PLAN: MCP・Instruction・Skill で Copilot に「文脈」「ルール」「型」を仕込む
• CODE: Copilot Chat（Plan / Agent）でサイトを設計・実装する
• REVIEW: Copilot Code Review で PR を自動レビューする
• TEST & SECURE: Dependabot・CodeQL（GHAS）と GitHub Actions（Playwright）で品質と安全性を担保する
• OPERATE: Cloud Agent・Copilot CLI・Agentic Workflow で日常運用に AI を組み込む

前提条件

以下の環境をご用意ください：

• 以下の機能が有効化されたプライベート Organization を持っていること：
  • GitHub Actions
  • GitHub Copilot（Pro+ / Business / Enterprise）
  • GitHub Advanced Security (GHAS)
• Organization 内でリポジトリを作成できる権限があること

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

プロジェクトURL: https://github.com/theomonfort/Github-copilot-workshop

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

1. プロジェクト URL をブラウザで開く
2. 右上の Use this template ボタンをクリックし、Create a new repository を選択

3. リポジトリ作成画面で以下を設定：

• Owner は Copilot / Actions / GHAS / Codespaces などが有効化された Organization を選択
• Visibility は Public を選択

Repository name（リポジトリ名）

• 任意の名前を入力してください（例: hands-on-yourname）

4. Create repository をクリック

ステップ2: Codespaces で開発環境を起動する

1. 作成したリポジトリのページで、緑色の Code ボタンをクリック
2. Codespaces タブを選択
3. Create codespace on main をクリック

DevContainer が自動的に Node.js 22 環境をセットアップし、以下が事前にインストールされます：

• GitHub Copilot & Copilot Chat 拡張機能
• GitHub CLI（gh）
• GitHub MCP Server（.vscode/mcp.json、自動検出有効化済み）
• Copilot CLI（@github/copilot）
• pnpm（パッケージマネージャ）
• gh-aw（Agentic Workflow CLI）
• Playwright（Chromium ブラウザ済み）

ステップ3: 題材コンテンツを確認する

src/content/playbook/ に Markdown ファイルが配置されています。これらが今日のサイトの題材です。

VS Code のエクスプローラで src/content/playbook/ を開き、いくつかファイルを覗いてみてください。後ほど Copilot にこれらを「グリッド + 詳細 + プレゼンテーションモード」で閲覧できるサイトに仕立ててもらいます。

このステップでは、Copilot に外部ツールへのアクセスを与える MCP（Model Context Protocol）Server を確認・追加します。MCP を整えると、Copilot が Issue 作成・最新ドキュメント参照などを直接実行できるようになります。

3.1 — GitHub MCP Server を確認する

このリポジトリには既に GitHub MCP Server が .vscode/mcp.json に設定されています。Codespace 起動時に VS Code が自動的に接続を確認します。

.vscode/mcp.json を開いて、以下の設定があることを確認してください：

{
  "servers": {
    "github-mcp-server": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/"
    }
  }
}

Copilot Chat の入力欄にある 🔧 ツールボタン（モデル選択の右側）をクリックして、github-mcp-server のツール（Issues / PRs / code search など）が一覧に表示されていることを確認しましょう。

⏱ 約1分

3.2 — Context7 MCP Server を追加する

Context7 は、ライブラリやフレームワークの 最新の公式ドキュメント を Copilot に取り込める MCP Server です。Astro / Tailwind / TypeScript など、進化の速いフレームワークを使う本ワークショップでは欠かせません。

1. Cmd+Shift+P (Windows/Linux は Ctrl+Shift+P) でコマンドパレットを開く
2. 「MCP: Add Server...」 を入力して選択
3. トランスポートに 「HTTP」 を選択
4. URL に https://mcp.context7.com/mcp を貼り付け
5. Server ID を聞かれたら、デフォルトの my-mcp-server-xxxxxxxx ではなく context7 に変更する（重要：Copilot Chat の # 補完やツール一覧で識別しやすくするため）
6. 保存先に 「Workspace」 を選択

インストール後、.vscode/mcp.json に context7 が追加されていることを確認してください：

{
  "servers": {
    "github-mcp-server": { "type": "http", "url": "https://api.githubcopilot.com/mcp/" },
    "context7": {
      "type": "http",
      "url": "https://mcp.context7.com/mcp"
    }
  }
}

.vscode/mcp.json を開くと、各サーバーの上に Running | N tools のような小さなステータス表示が出ます。context7 の横に 2 tools（resolve-library-id と get-library-docs）が表示されていれば接続成功です。表示されない場合は Start をクリックしてください。

動作確認として、Copilot Chat で以下を試してみましょう：

Context7 を使って Astro の content collections の最新ドキュメントを要約してください。

⏱ 約2分

Instruction ファイルは、リポジトリやファイル単位で Copilot に 常駐ルール を与える「指示書」です。チーム全員の Copilot が同じ規約に従うようになります。

このステップでは、2 種類の Instruction ファイルを作成します：

• .github/copilot-instructions.md — リポジトリ全体に常時適用 (言語・Stack・規約)
• .github/instructions/frontend.instructions.md — フロントエンド系ファイルにのみ適用される Path Instruction（デザイントークン）

4.1 — リポジトリ共通の Instruction を作成する

Copilot Chat で以下のプロンプトを貼り付けてください：

.github/copilot-instructions.md を作成してください。本文はすべて日本語で書いてください。
内容は以下のとおりにしてください：

# Copilot Instructions

## 言語

- すべての応答・コメント・コミットメッセージ・PR 説明は **日本語** で書く。

## Stack

- **Astro** のみ。Next.js・React Router・SvelteKit は使わない。
- ページ・レイアウトは Astro コンポーネント (.astro) を使う。
- マークダウンコンテンツは Astro の **content collections** (src/content/) を使う。
- スタイルは Tailwind CSS。必要に応じてスコープ付き <style> ブロック。
- TypeScript をすべての場所で使う (.ts, .astro frontmatter)。

## 規約

- ページは src/pages/。
- 再利用 UI は src/components/。
- マークダウンは src/content/<collection>/*.md。スキーマは src/content.config.ts。
- パッケージマネージャは **pnpm**。

## ドキュメント参照（必ず守る）

外部ライブラリ・フレームワーク・言語のコードを書く前に、**必ず Context7 MCP の以下のツールを呼び出してから実装する**：

1. `resolve-library-id` でライブラリ ID を解決する。
2. `get-library-docs` で最新ドキュメントを取得する。
3. 取得したドキュメントに基づいて実装する。

対象例: Astro（content collections, integrations, routing）、Tailwind CSS、Mermaid、Playwright、pnpm など。

**禁止事項**：
- 学習時点の記憶だけでコードを書かない。
- 「知っているはず」と判断して Context7 をスキップしない。馴染みのある技術であっても毎回ドキュメントを確認する。
- ライブラリの API・設定ファイル形式・CLI フラグは古くなっている可能性が高い。憶測ではなく Context7 で裏を取る。

⏱ 約2分

4.2 — フロントエンド専用の Path Instruction を作成する

特定のファイルパターンにだけ適用される Path Instruction を作成します。VS Code は applyTo の glob にマッチするファイルを触るときだけ、このルールを Copilot に渡します。

Copilot Chat で以下のプロンプトを貼り付けてください：

.github/instructions/frontend.instructions.md を作成してください。
本文はすべて日本語で書いてください。先頭の YAML frontmatter は以下のとおりにしてください：

---
applyTo: "**/*.{astro,css,tsx,jsx,ts,js,html}"
description: "フロントエンドのデザイントークン（レトロ JRPG テーマ）"
---

本文は以下を日本語で含めてください：

# フロントエンド設計ルール

スタイル・コンポーネント・レイアウトを触るときは、以下のトークンを必ず適用する。

## テーマ

レトロ JRPG / サイバーパンクのアーケード。暗い背景にネオンのアクセント、ピクセル系タイポグラフィ。

## カラー

| 役割              | Hex        | 用途                              |
| ----------------- | ---------- | --------------------------------- |
| 背景 (ベース)     | `#05060f`  | body / page                       |
| 背景 (パネル)     | `#0a0e27`  | カード・サイドバー                |
| ネオンマゼンタ    | `#ff2e88`  | プライマリアクセント・アクティブ  |
| ネオンシアン      | `#00f0ff`  | セカンダリ・ホバー・リンク        |
| アンバー          | `#ffb000`  | 警告・ハイライト                  |
| フォスファ緑      | `#9bbc0f`  | 成功・CRT 風テキスト              |
| テキスト (通常)   | `#e6f1ff`  | 暗い背景上の本文                  |
| テキスト (薄)     | `#7a8aa8`  | 補助テキスト                      |

## フォント

- 見出し / UI: **`'DotGothic16'`** (ピクセル)、fallback `monospace`。
- 本文 (日本語 + ラテン): **`'Noto Sans JP'`**、fallback `system-ui, sans-serif`。
- コード: `'JetBrains Mono', 'Menlo', monospace`。

Tailwind ユーティリティ: `font-pixel` (DotGothic16)、`font-body` (Noto Sans JP)。

## エフェクト

- 画面オーバーレイに控えめな CRT スキャンライン。
- ネオングロー: `text-shadow: 0 0 8px <color>` / `box-shadow: 0 0 12px <color>`。
- ボーダー: `1px dashed` または `2px solid` のネオンカラー。
- コントラストは高めに。淡いパステルグラデは禁止。

## してはいけないこと

- 明るい / 白の背景。
- 完全な丸 (pill) 形状。角丸は最大 4px まで。
- 灰色のソフトドロップシャドウ。グロー (neon glow) のみ使う。

⏱ 約2分

Agent Skill は、Copilot に「特定のタスクのこなし方」を仕込む再利用可能な指示セットです。プロンプトに合致したときに自動で召喚され、毎回テンプレを説明し直す必要がなくなります。

このステップでは、Issue を整った形で書ける Skill を入れて、実際に Issue を 1 件作ってみます。

5.1 — github-issues Skill をインストール

theomonfort/skills から github-issues Skill を入れます。このスキルは bug report / feature request / task など複数のテンプレを持ち、ラベル・優先度・依存関係まで含めた構造化された Issue を書けるようになります。

VS Code のターミナルで以下を実行してください：

gh skill install theomonfort/skills github-issues

実行すると CLI から 対象エージェント と インストール先（scope） を選ぶよう聞かれます：

• Agent: copilot を選択（VS Code の GitHub Copilot Chat 用）
• Scope: project（プロジェクト = このリポジトリ専用にインストール）

インストールが完了すると .agents/skills/github-issues/SKILL.md が追加されます。中身を開いて Copilot がどんなときにこの Skill を呼ぶのか、どんなテンプレを持っているのかを確認してみてください。

⏱ 約1分

5.2 — Skill で Issue を作成する

github-issues Skill を使って、構造化された Issue を 1 件作成します。Copilot Chat で以下のプロンプトを入力してください（GitHub MCP は前のステップで既に有効になっているので、Copilot は自然と Issue 作成ツールを呼んでくれます）：

github-issues skill を使って、このリポジトリに以下の Issue を作成してください。
ユーザーストーリー・受け入れ基準・実装ノートを含む構造化された feature request にしてください。

タイトル: Add English support on the website

背景:
- 現在サイトはすべて日本語で書かれている。海外のエンジニアにも届けたい。

要件:
- Astro の i18n ルーティング (`/en/...`) で英語版を追加する。フォールバックは日本語。
- ナビゲーション・ボタン等の UI 文字列は src/i18n/ja.ts / en.ts に切り出す。
- src/content/ のマークダウンは ja / en の両言語を併設できる構造にする。
- 言語切替トグルをサイトのヘッダーに追加する。

受け入れ基準:
- /en/ ルートでサイト全体が英語で閲覧できる。
- 翻訳が無いページはフォールバックで日本語を表示し、上部に warning banner を出す。
- 既存の SEO (sitemap, OG tags) が両言語で正しく出力される。

ラベル: feature, i18n, frontend

⏱ 約2分

ここまでで PLAN 側 (MCP・Instruction・Skill) のハーネスが整いました。いよいよ Copilot Chat の Plan モード で実装計画を立て、Agent モードで一気に実装します。

6.1 — モデルを Claude Opus 4.6 に切り替える

Copilot Chat 画面下部のモデルセレクターをクリックし、Claude Opus 4.6 を選択します。

6.2 — Plan モードに切り替える

Copilot Chat のモード切替えから 「Plan」 を選択してください。

6.3 — 実装計画を依頼する

以下のプロンプトをそのままコピーして Copilot Chat に貼り付けてください：

小さな Astro サイトを作ってください（日本語のみ。i18n / 英語対応は不要）。新しいブランチ（例: feature/playbook-site）で作業してください。

src/content/playbook/*.md を **Presentation モード（スライド表示）** で見るためのサイトです。インデックスページや詳細ページは作らず、最初からプレゼンテーション UI を表示してください。

- 各マークダウンファイルを 1 つの「セクション」として扱う。セクション内では `##` 見出しごとに 1 スライドに分割する。
- キーボード操作：
    * `←` `→` ... 同じセクション内のスライドを移動
    * `↑` `↓` ... 前 / 次のセクション（md ファイル）に移動
- 左サイドバーに全セクションの目次を表示し、現在のセクションをハイライトする。
- 各セクションのテーマカラーは、md ファイルの frontmatter（例: `color:` フィールド）から取得し、スライド背景・タイトル・サイドバーのアクセントに反映する。frontmatter にない場合はデフォルト色。
- マークダウン内の Mermaid 図（` ```mermaid `）をレンダリングできるようにする。

Copilot がいくつか質問してくる場合があります（例：パッケージマネージャー、UI フレームワーク、デプロイ先など）。copilot-instructions.md を読んでいるはずなので Astro / Tailwind / pnpm を前提に答えてくれるはずですが、不足があれば回答してあげましょう。

⏱ 約3分

6.4 — Autopilot で実装する

Plan に納得したら 「Start with Autopilot」 をクリックして実装を開始します。

⏱ 約15〜20分

Copilot が以下を自動で実行します：

• Astro プロジェクトの初期化（pnpm）
• src/content.config.ts で playbook collection を定義
• Presentation UI（スライド表示）
• キーボード操作（← → ↑ ↓）
• 左サイドバー（セクション目次 + 現在セクションのハイライト）
• frontmatter の color に基づくセクションごとのテーマカラー
• Mermaid 図のレンダリング
• design token に沿った Tailwind スタイル

実装が完了したら開発サーバーを起動して確認しましょう：

pnpm dev

ポートフォワーディングの通知から 「ブラウザで開く」 をクリックして動作確認してください。

実装が動いたら、PR を作る前に Copilot Code Review をハーネスに組み込みます。copilot-instructions.md のルール（言語・Stack・コードレビュー観点）が自動でレビューに反映されます。

7.1 — Copilot Code Review の設定を有効化する

まず、Copilot Code Review の設定を確認します。

1. リポジトリの Settings → Copilot → Code review
2. 以下を有効化：
   • Use custom instructions when reviewing pull requests → On

7.2 — 自動レビューの Ruleset を作成する

PR 作成時に Copilot が自動的にコードレビューを行うように設定します。Code review 設定ページから直接 Ruleset を作成すると速いです。

1. Settings → Copilot → Code review のページで、Automatic code review セクションを探す
2. Add a ruleset （または Create ruleset）をクリック → Ruleset 作成画面が Automatically request Copilot code review が有効化された状態で開きます

7.3 — PR を作成して結果を確認する

セクション 6 で作ったサイトをリモートに push して PR を作ると、7.2 で設定した Ruleset で Copilot Code Review が自動実行されます。Copilot Chat の Agent モードに任せましょう：

現在のブランチの変更をコミットして push し、main に対する PR を作成して。タイトルと本文は変更内容を要約して日本語で。

PR が開くと、Copilot Code Review が自動的に走ります（⏱ 約5分）：

• ✅ Pull Request Overview — PR 全体のサマリーコメント
• ✅ コード提案 — 各ファイルへの具体的な改善提案

7.4 — レビュー提案を修正する

Copilot のレビュー提案を修正する方法は2つあります：

1. Commit suggestion — 個別の提案を1つずつコミット
2. Fix batch with Copilot — すべての提案を一括で修正（おすすめ）

Fix batch with Copilot をクリックすると、修正内容を含む 新しい PR が自動的に作成されます（⏱ 約15分）。

1. まず 修正用の新しい PR をマージ
2. 次に 元の PR をマージ

依存関係の脆弱性チェックを Dependabot で有効化します。設定は数クリックで完了します。

8.1 — Dependabot を有効化する

1. リポジトリの Settings → Security and quality → Advanced Security
2. Dependabot セクション：
   • Dependabot security updates を有効化
   • Dependabot version updates を有効化 → エディタが開き .github/dependabot.yml のテンプレートが表示されます
3. テンプレートの package-ecosystem: "" を "npm" に変更（本リポジトリは pnpm / npm エコシステム）：

   version: 2
   updates:
     - package-ecosystem: "npm"
       directory: "/"
       schedule:
         interval: "weekly"
   

4. Commit changes... → 「Create a new branch and start a pull request」 を選択 → PR を作成してマージ

コードに潜むセキュリティ脆弱性を静的解析でスキャンする CodeQL を有効化します。

9.1 — CodeQL を有効化する

1. リポジトリの Settings → Security and quality → Advanced Security
2. Tools → CodeQL analysis → Set up → Default → Enable CodeQL

Presentation サイトの キーボードナビゲーション が壊れないように、Playwright で E2E テストを書き、PR ごとに自動実行する Actions ワークフローを作ります。

10.1 — Presentation モードのテストを作成する

Copilot Chat（Agent モード）で以下を入力してください：

新しいブランチ `test-creation` を作成して、そのブランチで作業してください。

Presentation サイトのキーボードナビゲーションを検証する Playwright E2E テストを作成してください。

前提：
- src/content/playbook/ に少なくとも 2 件のエントリーがあるとする。
- サイトを開くと最初から Presentation モードが表示される。

テストケース：
1. `←` / `→` を押すと同じセクション内のスライドが前後に移動する（## 見出しごとに 1 スライド）。
2. `↓` / `↑` を押すと次 / 前のセクション（md ファイル）に移動する。
3. 左サイドバーに全セクションが目次として表示され、現在のセクションがハイライトされている。
4. frontmatter の `color` が異なるセクションを切り替えると、テーマカラー（背景・タイトル・サイドバーアクセント）が変わる。

ファイル配置:
- テストは tests/e2e/presentation.spec.ts に配置。
- 必要なら playwright.config.ts も更新してください（baseURL、webServer に pnpm dev を起動する設定）。

テストを書き終えたらローカルで `pnpm exec playwright test` を実行して全部 pass することを確認してください。

⏱ 約5分

10.2 — PR で自動実行する Actions ワークフローを作成する

続けて Copilot Chat に以下を入力してください：

同じ `test-creation` ブランチで作業してください。

.github/workflows/test.yml を作成してください。
PR の作成・更新時にトリガーし、以下を実行してください：

1. Node.js 22 をセットアップ
2. pnpm をセットアップ
3. 依存関係をインストール
4. Playwright のブラウザをインストール（npx playwright install --with-deps chromium）
5. `pnpm exec playwright test` を実行
6. テスト失敗時は Playwright のレポートを artifact としてアップロード

⏱ 約2分

PR を作成し直すと、Actions タブで test.yml の実行が確認できます。Presentation モードの挙動を変更したときにこの workflow が早期に壊れを検知してくれます。

5.1 — Copilot の設定を確認する

Cloud Agent を使用するために、以下の設定を確認します：

1. GitHubの右上のプロフィールアイコン → Copilot settings
2. Copilot Cloud Agent が有効になっていることを確認

5.2 — 既存の Issue に Cloud Agent をアサインする

Step 1.4 で作成した Issue の中から、Cloud Agent に実装させたい Issue を開きます。

1. Issue を開く
2. 右サイドバーの Assignees をクリック
3. Copilot（GitHub）、Claude（Anthropic）、Codex（OpenAI）から選択してアサイン

アサイン時に以下をカスタマイズできます：

• 追加プロンプト — Issue の説明に補足指示を追加
• モデル選択 — Copilot / Claude / Codex から選択
• ベースブランチ — 作業の起点となるブランチを指定

5.3 — PR を確認してマージする

Cloud Agent が作成した PR は Draft（下書き） 状態で作成されます。

1. PR を開き、内容を確認
2. Ready for review をクリックして Draft を解除
3. Copilot Code Review が自動的に開始されます
4. レビュー完了後、PR をマージ

5.4 — 最新コードを取得して確認する

Cloud Agent の PR がマージされたら、Codespace で最新のコードを取得してサイトを確認しましょう。

git checkout main && git pull && pnpm install && pnpm dev

ポートフォワーディングの通知が表示されたら 「ブラウザで開く」 をクリックして、Cloud Agent が実装した新機能を確認してください。

Copilot（Chat / CLI / Cloud Agent など）が .github/ の設定ファイルや .env、pnpm-lock.yaml のような 触ってほしくないファイル を勝手に書き換えないよう、Hooks でガードレールを張りましょう。特に次の章では CLI で複数のエージェントを並列に走らせるので、その前に安全網を用意しておくのが理想的です。

Hooks は、エージェントがツールを呼び出す前後（PreToolUse / PostToolUse）に任意のスクリプトを差し込める仕組みです。PreToolUse で permissionDecision: deny を返せば、エージェントの動作を 物理的に止める ことができます。

N.1 — .github/hooks/hooks.json を作成する

リポジトリのルートに .github/hooks/hooks.json を新規作成し、以下をそのまま貼り付けてください：

{
  "version": 1,
  "hooks": {
    "PreToolUse": [
      {
        "type": "command",
        "matcher": ".*(edit|create|write|delete|remove|rename|move|patch|replace|insert|update|bash|shell|terminal|command|run|execute|apply).*",
        "bash": "node ./scripts/block-protected-paths.mjs",
        "cwd": ".github/hooks",
        "timeoutSec": 5
      }
    ]
  }
}

ポイント：

• matcher でファイル変更系・シェル実行系の mutating tools だけにフックを限定（読み込みや検索はブロックしない）。
• bash は cwd から相対実行されます。スクリプトは次のステップで作成。

N.2 — ブロック用スクリプトを作成する

.github/hooks/scripts/block-protected-paths.mjs を新規作成し、以下を貼り付けてください：

import { stdin, stdout } from 'node:process';

const rawPayload = await readStdin();
const payload = parseJson(rawPayload);
if (!payload) process.exit(0);

const toolName = String(payload.tool_name ?? payload.toolName ?? 'requested');
const toolInput = payload.tool_input ?? payload.toolArgs ?? {};

const normalizedInput = JSON.stringify(toolInput).replaceAll('\\\\', '/');
const protectedPath = findProtectedPath(normalizedInput);
if (!protectedPath) {
  process.exit(0);
}

deny(`Repository policy: agents must not modify ${protectedPath}. The ${toolName} tool referenced ${protectedPath}.`);

async function readStdin() {
  const chunks = [];
  for await (const chunk of stdin) chunks.push(chunk);
  return Buffer.concat(chunks).toString('utf8').trim();
}

function parseJson(raw) {
  if (!raw) return null;
  try { return JSON.parse(raw); } catch { return null; }
}

function findProtectedPath(value) {
  const protectedPaths = [
    { label: '.github/', pattern: /(^|[\/\s"'`=:([{])(?:\.\/)?\.github(?:\/|$)/i },
    { label: '.env', pattern: /(^|[\/\s"'`=:([{])(?:\.\/)?\.env(?:$|[\/\s"'`),}\]])/i },
    { label: 'pnpm-lock.yaml', pattern: /(^|[\/\s"'`=:([{])pnpm-lock\.yaml(?:$|[\/\s"'`),}\]])/i },
  ];
  return protectedPaths.find(({ pattern }) => pattern.test(value))?.label;
}

function deny(reason) {
  const additionalContext = 'This hook blocks agent writes to protected repository configuration, environment, and lock files. Choose a different path or ask the user to make the protected-file change manually.';
  stdout.write(JSON.stringify({
    permissionDecision: 'deny',
    permissionDecisionReason: reason,
    additionalContext,
    hookSpecificOutput: {
      hookEventName: 'PreToolUse',
      permissionDecision: 'deny',
      permissionDecisionReason: reason,
      additionalContext,
    },
  }));
}

ポイント：

• 保護対象は .github/、.env、pnpm-lock.yaml の 3 つ。
• 出力は Copilot CLI 形式（permissionDecision）と VS Code 形式（hookSpecificOutput）の両方を返すので、どちらの環境でも動きます。

N.3 — Copilot Chat を再起動する

Hook の設定を読み込ませるため、Copilot Chat のセッションを一度閉じて、新しいチャットを開いてください（💬 アイコン → 「+」で新規チャット）。

N.4 — エージェントを試す（わざとブロックさせる）

新しいチャットで以下を入力してください：

.github/test.md という新しいファイルを作って、中身は "hello hooks" にしてください。

期待する挙動：

• エージェントは create / write ツールを呼び出そうとする。
• Hook が起動 → .github/ 配下を検出 → permissionDecision: deny を返す。
• チャット上に「Repository policy: agents must not modify .github/」のような拒否メッセージが表示される。
• ファイルは作成されない。

⏱ 約10分

Copilot CLI は、ターミナル上で動作する対話型 AI アシスタントです。VS Code を開かずに、コード生成・レビュー・リファクタリングなどを自律的に実行できます。

ここでは Part 6 の最後で作成した Issue 群 を、CLI から /fleet で 並列に 実装してもらいます。

主なコマンド

12.1 — Copilot CLI を起動する

まず、最新のコードを取得します。Cloud Agent や Code Review から PR がマージされているはずなので、ローカルブランチも更新しておきます：

git checkout main
git pull

そして VS Code のターミナルで Copilot CLI を起動：

copilot

12.2 — モデル選択と Autopilot

CLI 内で以下を実行：

/allow-all

/model

最も高性能なモデル（例: Claude Opus 4.6）を選択してください。

そして Shift+Tab で Agent (Autopilot) モード に切り替えます。

12.3 — /fleet で Issue を並列に実装する

Part 6 で作成した 3〜5 件の Issue を、CLI に並列で実装させます。プロンプトの最後に、別モデル（Codex 系）でラバーダックレビューさせる指示も含めます。

/fleet このリポジトリの open Issue のうち、label が bug または enhancement のものをすべて、
1 Issue につき 1 つの fleet エージェントを割り当てて並列で実装してください。

各エージェントは以下のフローで作業すること：
1. Issue 番号と一致するブランチ (fix/<number>-<slug>) を切る
2. 修正を実装する
3. pnpm dev で動作確認できる状態にする
4. コミットして PR を出す（`Closes #<number>` を本文に入れる）

すべての PR が作成されたら、最後に **GPT-5 Codex** モデルに切り替えて
（実装させた Claude とは別モデルで盲点を避けるため）、
作成された全 PR の差分を読みラバーダック視点でレビューしてください。
観点：設計上の盲点・ロジックバグ、Issue 要件の漏れ、既存コードとの整合性、
テスト・エラーハンドリングの不足。スタイルや軽微な指摘は無視し、
本当に重要な問題だけ PR 単位で簡潔に列挙してください。

⏱ 約10〜15分

CLI が複数の fleet エージェントを spawn し、それぞれ別ブランチで実装 → PR 作成まで自律的に進めます。進捗はターミナルにストリーム表示され、最後に別モデルでのラバーダックレビューが出力されます。

実行中・実行後の進捗を確認するには：

/tasks

各 fleet エージェントの状態（実行中 / 完了 / 失敗）と現在のステップが一覧表示されます。

12.4 — Chronicle で利用状況を分析する

最後に、ワークショップ中の Copilot CLI 利用状況を Chronicle で振り返ります：

/experimental

chronicle

GitHub Actions と Copilot（AI）を組み合わせることで、コードの変更を検知して自律的なタスクを自動実行する Agentic Workflow を体験しましょう。

Agentic Workflow とは: GitHub Actions のワークフロー内で Copilot を活用し、リポジトリの変更に応じた自律的なタスク（レポート生成、ドキュメント更新、コード修正など）を実行する仕組みです。

gh aw のインストール

まず、Agentic Workflow の CLI ツールをインストールします。

ローカル環境の場合：

gh extension install github/gh-aw

Codespaces やネットワーク制限がある環境の場合（GA 前のため）：

curl -sL https://raw.githubusercontent.com/github/gh-aw/main/install-gh-aw.sh | bash

6.1 — Personal Access Token (PAT) を作成する

Agentic Workflow で Copilot を活用するために PAT を作成します。

1. https://github.com/settings/personal-access-tokens/new にアクセス
2. 設定内容：
   • Token name: copilot-workshop-agent
   • Resource owner: リポジトリを作成した Organization（または個人アカウント）
   • Repository access: Only select repositories → 作成したリポジトリを選択
   • Permissions:
     • Actions: Read and write
     • Contents: Read-only
     • Issues: Read and write
     • Metadata: Read-only（自動付与）
     • Pull requests: Read and write

3. 作成した PAT をコピー

リポジトリシークレットに設定

1. リポジトリの Settings → Secrets and variables → Actions
2. New repository secret をクリック
3. Name: COPILOT_GITHUB_TOKEN、Value: 作成した PAT

Workflow permissions の確認

1. Settings → Actions → General
2. Allow GitHub Actions to create and approve pull requests にチェック

6.2 — Daily Repo Status ワークフローを作成する

今日のリポジトリ活動を自動レポートする Agentic Workflow を作成しましょう。

エージェントモードで以下を実行：

以下の Agentic Workflow を作成してください。

ファイル: .github/workflows/daily-repo-status.md

目的: リポジトリの活動（Issue、PR、コード変更）を分析し、
日次ステータスレポートを Issue として自動作成する。

フォーマット:
- YAML front matter で設定を定義（on, permissions, tools, safe-outputs）
- Markdown 本文でワークフローの指示を記述

設定:
- トリガー: schedule: daily と workflow_dispatch
- permissions: contents: read, issues: read, pull-requests: read
- tools: github（lockdown: false, min-integrity: none）
- safe-outputs: create-issue で title-prefix "[repo-status] "、
  labels: [report, daily-status]、close-older-issues: true

ワークフローの指示:
1. リポジトリの最近の活動（Issue、PR、コード変更）を収集
2. 進捗やハイライトを分析
3. 結果を GitHub Issue として作成

参考: https://github.com/githubnext/agentics/blob/main/workflows/daily-repo-status.md

完了したら `gh aw compile` コマンドを実行してワークフローをコンパイルし、
変更をコミットして PR を作成してください。

PR をマージした後、Actions タブからワークフローを手動実行します：

1. リポジトリの Actions タブを開く
2. 左メニューから Daily Repo Status を選択
3. Run workflow → Run workflow をクリック

実行完了後（⏱ 約2分）、リポジトリの Issues タブに [repo-status] というプレフィックスの Issue が自動作成され、今日の PR、Issue、コード変更の活動サマリーが表示されます。

6.3 —（ボーナス）テストカバレッジ自動更新ワークフローを作成する

余裕がある方は、テストカバレッジレポートを自動更新するワークフローも作成してみましょう。

エージェントモードで以下を実行：

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

ワークフローの目的：
- main ブランチへの push 時にトリガー
- テストを実行してカバレッジレポートを生成
- カバレッジ結果を README.md のバッジとして自動更新
- 変更がある場合は PR を自動作成

ワークフローファイルは .github/workflows/coverage-update.md に配置してください。

今日学んだこと

このワークショップでは、GitHub Copilot を PLAN → CODE → REVIEW → TEST & SECURE → OPERATE のフェーズに沿って横断的に体験しました：

• PLAN：MCP サーバー — GitHub MCP・Context7 で Copilot に最新コンテキストを与える
• PLAN：Instruction — copilot-instructions.md と Path Instruction で Copilot の前提・スタイル・言語を固定する
• PLAN：Skills — awesome-copilot の Skill を導入し、Issue 作成を自動化する
• CODE：Copilot Chat — Plan モードで設計し、Agent モードでサイトを実装する
• REVIEW：Copilot Code Review — PR の自動レビューで品質を担保する
• TEST & SECURE：Dependabot & CodeQL — 依存関係とコードの脆弱性を継続的に検出する
• TEST & SECURE：Actions — GitHub Actions で Playwright テストを自動化する
• CODE：Cloud Agent — Issue を Copilot にアサインしてバックグラウンドで実装させる
• CODE：CLI — ターミナルから Copilot CLI で Plan ↔ Agent を行き来する
• OPERATE：Agentic Workflow — gh-aw で AI を組み込んだ自律的な CI/CD を構築する

次のステップ

• プレイブック を社内資料として参照・展開する
• 実際のプロジェクトで Copilot を /init → Plan → Agent の順で活用してみる
• Cloud Agent と Agentic Workflow で日常的なタスクを自動化する
• Copilot CLI を日々のターミナル作業に組み込む

リソース

• Theo's Copilot Playbook
• GitHub Copilot Documentation
• GitHub Copilot ベストプラクティス
• awesome-copilot
• gh-aw (Agentic Workflows)
• Copilot CLI