📘 Introduction STEP 02 / 15 ⏱ 15分 ⏳ 残り190分

INTRO：セットアップ

このセクションでは、以下のテンプレートリポジトリを複製してハンズオン用リポジトリを作成し、それを Codespace で開いて作業を始めます。Codespace が使えない場合は、ローカルにクローンして作業してください。

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

2.1 — ハンズオン用リポジトリを作成する

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

Use this template → Create a new repository

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

    • Owner: テスト用リポジトリを自由に作成できる Organization（Copilot / Actions / GHAS / Codespaces が有効）を選択
    • Repository name: 任意の名前（例: hands-on-yourname）
    • Visibility: Private を選択

  2. Create repository をクリック

Create repository ボタンをクリック

2.2 — リポジトリを開く

作成したリポジトリを開発環境で開きます。オプション 1（Codespaces） を推奨しますが、使えない場合は オプション 2（ローカル） でも進められます。

オプション 1：Codespaces（推奨）

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

オプション 2：ローカル

  1. VS Code で ターミナル を開く（メニュー Terminal → New Terminal、または Ctrl+`）

  2. リポジトリページの緑色の Code ボタン → Local タブ → GitHub CLI タブを開き、コピー用のクローンコマンドをコピーする

    Code → Local → GitHub CLI のクローンコマンドをコピー

  3. ターミナルに貼り付けてローカルにクローンする：

    gh repo clone <owner>/<repo-name>

  4. クローンしたフォルダを VS Code で開く：

    code -r <repo-name>

いずれのオプションでも、DevContainer が Node.js 22 環境をセットアップし、以下が事前にインストールされます（ローカルの場合は DevContainer 対応の拡張機能を使うか、手動でご用意ください）：

  • GitHub Copilot & Copilot Chat 拡張機能
  • GitHub CLI（gh）
  • GitHub MCP Server（.vscode/mcp.json、自動検出有効化済み）
  • Copilot CLI（@github/copilot）
  • gh-aw（Agentic Workflow CLI）

2.3 — 題材コンテンツを確認する

src/content/playbook/ に、GitHub / Copilot に関する複数の Markdown ファイルが配置されています。これらが今日のサイトの題材です。各ファイルの frontmatter には title / summary / icon / color と、SDLC の category（introduction / plan / develop / review / secure / operate など）が定義されています。さらに、サイト構築に使えるアイコンや画像（惑星画像など）のアセットも public/ に用意されています。