ハンズオン — プレイブック

一言で

題材は このプレイブックサイトの簡略版。今読んでいるこのサイトを、Copilot と一緒にゼロから作り直します。

リポジトリを Codespaces で開けば、環境構築なしでブラウザからすぐに始められます。

何を作るのか

ハンズオンのゴールは、特別なデモアプリではなく 今見ているこのサイトそのもの（の簡略版）です。

Playbook で 「なぜ」 を学んだら、ハンズオンで その知識を実践に落とし込みます ── 題材は他でもないこのプレイブック自身。読んだ機能をそのまま使って、自分の手で再構築できます。

今日作る Copilot Playbook サイトのプレビュー（Context Engineering ページ）

ワークショップで体験する流れ

flowchart TB
  Plan["<div style='min-width:560px;text-align:center'>1️⃣ <b>PLAN</b> : MCP・Instructions・Skill で AI にハーネスを着せる</div>"]
  Code["<div style='min-width:560px;text-align:center'>2️⃣ <b>CODE</b> : Plan モードで設計し、Agent モードで実装する</div>"]
  Review["<div style='min-width:560px;text-align:center'>3️⃣ <b>REVIEW</b> : Copilot Code Review が PR を自動レビューする</div>"]
  Improve["<div style='min-width:560px;text-align:center'>4️⃣ <b>IMPROVE</b> : Cloud Agent に Issue を任せて改善 PR を生成する</div>"]
  Operate["<div style='min-width:560px;text-align:center'>5️⃣ <b>OPERATE</b> : Agentic Workflow で運用そのものを自動化する</div>"]

  Plan --> Code --> Review --> Improve --> Operate

  classDef prep fill:#0a1a14,stroke:#9bbc0f,color:#9bbc0f,stroke-width:2px
  classDef dev  fill:#1a0a2e,stroke:#ff2e88,color:#ff2e88,stroke-width:2px
  classDef rev  fill:#1a1408,stroke:#ffb000,color:#ffb000,stroke-width:2px
  classDef ops  fill:#0a0e27,stroke:#00f0ff,color:#00f0ff,stroke-width:2px
  class Plan prep
  class Code,Improve dev
  class Review rev
  class Operate ops

はじめ方

最短ルート — ブラウザだけで完結:

🌐 リポジトリを開く: theomonfort/Github-copilot-workshop ↗
🟢 緑の Code ボタン → Codespaces タブ → Create codespace on main
📖 ハンズオンを開く: ハンズオンを開く →
⌨️ 1 ステップずつ進めながら Copilot に話しかける

💡 ローカルに環境が無くても OK。Codespaces で必要な拡張機能・依存関係はすべて準備済みです。 🤖 ワークショップ中に詰まったら、その場で Copilot Chat に質問するのも学びの一部です。