対象読者環境を極限まで最適化したい上級開発者

達成目標三位一体設計（AGENTS.md+Skills+MCP）とSpec-Kitを実践導入できる

前提条件章1〜8の実践経験

所要時間25分

プロフェッショナル環境構築

VS Codeの完全最適化から、AGENTS.md + Skills + MCPの三位一体設計、仕様駆動開発、カスタムエージェントの実戦パターンまで。Copilotのポテンシャルを最大限に引き出すプロフェッショナル環境を構築します。

VS Code設定の完全最適化

エンジニア個人のVS Code環境をCopilot最大活用のために最適化する全設定です。以下の settings.json をコピーして、すぐにプロフェッショナル環境を構築できます。

推奨 settings.json（コピペ用完全版）

settings.json

{
  // === Copilot Core ===
  "github.copilot.nextEditSuggestions.enabled": true,
  "chat.agent.enabled": true,
  "github.copilot.chat.codeGeneration.useInstructionFiles": true,
  "github.copilot.chat.agent.autoApprove": "allow-listed",
  "chat.useNestedAgentsMdFiles": true,

  // === Editor UX ===
  "editor.inlineSuggest.enabled": true,
  "editor.inlineSuggest.showToolbar": "onHover",
  "github.copilot.editor.enableAutoCompletions": true,

  // === Chat / Agent ===
  "github.copilot.chat.localeOverride": "ja",
  "chat.commandCenter.enabled": true,

  // === Terminal ===
  "terminal.integrated.suggest.enabled": true,
  "github.copilot.chat.terminalChatLocation": "chatView"
}

各設定の効果と必要性

設定	効果	なぜ必要か
`nextEditSuggestions.enabled`	波及修正の自動提案（NES）	リファクタ時の修正漏れゼロ
`chat.agent.enabled`	Agent Mode有効化	自律的なマルチファイル編集
`useInstructionFiles`	カスタム指示の自動読み込み	チームルールの自動適用
`autoApprove: "allow-listed"`	許可リストベースの自動承認	安全性を保ちつつ効率化
`useNestedAgentsMdFiles`	ネストAGENTS.md対応	モノレポ・大規模プロジェクト
`localeOverride: "ja"`	日本語での応答	日本語チームの利便性

✅ Tip

この設定を .vscode/settings.json としてリポジトリにコミットすれば、チーム全員が同じ環境で作業できます。個人設定はユーザーレベルの settings.json に追加してください。

AGENTS.md + Skills + MCP の三位一体設計

3つの仕組みを連携させることで、Copilotが「専門家チーム」として動作します。それぞれの役割を明確にし、統合的に設計することが鍵です。

設計パターン

ディレクトリ構造

AGENTS.md
├── プロジェクト全体のルール・教訓（永続記憶）
├── Reference: .github/skills/ のスキル一覧
└── Reference: MCP接続の利用ガイドライン

.github/skills/
├── playwright-e2e/SKILL.md     ← E2Eテスト専門スキル
├── api-design/SKILL.md         ← API設計専門スキル
└── debug-prisma/SKILL.md       ← Prismaデバッグ専門スキル

.vscode/mcp.json
├── playwright                   ← ブラウザ操作
├── github                       ← Issue/PR操作
└── postgres                     ← DB接続

AGENTS.md から Skills を参照するパターン

AGENTS.md（抜粋）

## Available Skills
以下のスキルが利用可能です。タスクに応じて適切なスキルを活用してください:
- `playwright-e2e`: E2Eテストの作成・実行
- `api-design`: RESTful API設計のベストプラクティス
- `debug-prisma`: Prisma ORMのトラブルシューティング

## MCP Tools
- Playwright MCP: ブラウザ操作が必要な場合に使用
- GitHub MCP: Issue/PR操作に使用（読み取り専用トークン推奨）

📝 Note

AGENTS.mdを「司令塔」、Skillsを「専門部隊」、MCPを「道具箱」と考えると設計しやすいです。司令塔が全体の方針を定め、専門部隊が各分野の知識を提供し、道具箱が外部ツールへのアクセスを可能にします。

Spec-Kitで仕様駆動開発を実践する

vibe coding（なんとなくプロンプト）から脱却し、仕様書をSingle Source of Truthにするアプローチです。仕様を明確にすることで、AIの出力精度が劇的に向上します。

初期化

ターミナル

specify init

完全ワークフロー

要件定義
自然言語で要件を入力します。
specify "ユーザー認証機能を追加。OAuth2.0 + JWT。Google/GitHubログイン対応"
仕様書生成
AIが対話的に .specify ファイルを作成します。要件の曖昧な部分を質問で明確化します。
アーキテクチャ決定
/speckit.plan で設計判断を文書化します。技術選定の理由やトレードオフを記録します。
タスク分解
/speckit.tasks で実装可能な単位に分割します。各タスクは独立してテスト可能なサイズにします。
実装
各タスクをAgent Modeで自動実装します。仕様書がコンテキストとして自動的に参照されます。
検証
仕様書に基づいた自動テスト生成により、実装が仕様を満たしているか検証します。

なぜ強力か

「何を作るか」が明確 — AIの出力精度が劇的向上
仕様変更の追跡が容易 — 変更履歴がバージョン管理される
テスト仕様も同時生成 — 品質保証が自動化
チーム全員が同じ仕様を参照 — 認識齟齬ゼロ

⚠️ Warning

Spec-Kitは比較的新しいツールです。プロジェクトへの導入前に小規模なタスクで試し、チームのワークフローに合うか検証してください。

カスタムエージェントの実戦パターン集

.github/agents/ に配置する実戦的なエージェントプロファイル5選です。チームの生産性を大幅に向上させるエージェントをすぐに導入できます。

1. パフォーマンス最適化エージェント

.github/agents/perf-optimizer.agent.md

---
description: パフォーマンス最適化。ベンチマーク計測→最適化→再計測→比較
tools:
  - codebase
  - terminal
prompt: |
  1. 対象コードの現在のベンチマーク結果を取得
  2. パフォーマンスボトルネックを特定
  3. 最適化を実施
  4. 再度ベンチマークを実行して比較
  5. 改善率が5%未満なら変更を元に戻す
  6. 結果をPRのdescriptionに記載
---

2. セキュリティ監査エージェント

.github/agents/security-auditor.agent.md

---
description: OWASP Top 10ベースのセキュリティ監査
tools:
  - codebase
  - diffs
prompt: |
  変更されたコードをOWASP Top 10の観点で監査:
  - A01: アクセス制御の不備
  - A02: 暗号化の失敗
  - A03: インジェクション
  - A07: 認証の不備
  シークレットのハードコード、依存パッケージの脆弱性もチェック
---

3. テスト生成エージェント

.github/agents/test-generator.agent.md

---
description: 変更されたコードのユニットテストを自動生成
tools:
  - codebase
  - terminal
prompt: |
  1. diffから変更されたファイルを特定
  2. 各関数/メソッドのテストケースを生成
  3. エッジケース（null、空配列、境界値）を含める
  4. テスト実行して全パス確認
  5. カバレッジ率をレポート
---

4. ドキュメント同期エージェント

.github/agents/doc-sync.agent.md

---
description: コード変更に合わせてドキュメントを自動更新
tools:
  - codebase
prompt: |
  変更されたファイルを分析し:
  - 公開APIの変更 → README.mdを更新
  - 新しい関数 → JSDoc/docstringコメントを追加
  - アーキテクチャ変更 → docs/architecture.mdを更新
  - 設定変更 → .envの例を更新
---

5. コードレビューエージェント

.github/agents/code-reviewer.agent.md

---
description: PRの変更をレビューし改善提案を行う
tools:
  - codebase
  - diffs
prompt: |
  変更されたファイルを以下の観点でレビュー:
  - バグの可能性（null参照、型不一致、ロジックエラー）
  - パフォーマンス（N+1、不要なループ、メモリリーク）
  - 可読性（命名、複雑度、関数長）
  - プロジェクト規約との整合性（AGENTS.md参照）
---

✅ Tip

カスタムエージェントはリポジトリにコミットしてチーム共有しましょう。各メンバーが自分の専門分野のエージェントを作り、チーム全体の資産にしていくのが理想です。

.vscode/mcp.json 実戦構成パターン集

プロジェクトの種類に応じたMCP構成テンプレートです。必要なサーバーだけを接続し、最小権限の原則を守ります。

Webアプリ開発（フルスタック）

.vscode/mcp.json

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    },
    "github": {
      "command": "docker",
      "args": ["run", "-i", "--rm",
        "-e", "GITHUB_PERSONAL_ACCESS_TOKEN",
        "ghcr.io/github/github-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN_READONLY}"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-postgres"],
      "env": {
        "DATABASE_URL": "${DEV_DATABASE_URL}"
      }
    }
  }
}

フロントエンド専用

.vscode/mcp.json

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

API開発

.vscode/mcp.json

{
  "servers": {
    "github": {
      "command": "docker",
      "args": ["run", "-i", "--rm",
        "-e", "GITHUB_PERSONAL_ACCESS_TOKEN",
        "ghcr.io/github/github-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  }
}

⚠️ Warning

本番環境のDBには絶対に接続しないでください。MCP経由のDB接続は開発/ステージング環境のみに限定します。トークンは必ず環境変数で管理してください。

copilot-setup-steps.yml — エージェント環境の自動構築

Coding Agentの成功率を劇的に上げるのが .github/workflows/copilot-setup-steps.yml です。依存関係の事前インストールや環境変数を定義し、エージェントが「起動後すぐに作業開始できる」環境を整えます。

.github/workflows/copilot-setup-steps.yml

# .github/workflows/copilot-setup-steps.yml
name: "Copilot Setup Steps"
on: workflow_dispatch

steps:
  - uses: actions/checkout@v4

  - name: Setup Node.js
    uses: actions/setup-node@v4
    with:
      node-version: '20'
      cache: 'npm'

  - name: Install dependencies
    run: npm ci

  - name: Setup database
    run: |
      docker compose up -d postgres
      npx prisma migrate deploy

  - name: Verify environment
    run: |
      npm run typecheck
      npm run test -- --reporter=silent

なぜ重要か

Coding Agentはクラウド上の隔離環境で動作するため、ローカルの開発環境を知りません
このファイルがないと、エージェントは依存関係のインストールから試行錯誤を始め、PRUを大量に浪費します
事前に環境を整えることで、エージェントの成功率と速度が劇的に向上

✅ Tip

copilot-setup-steps.yml は「エージェントの新人研修マニュアル」です。新しいチームメンバーが初日に何をすべきかを定義するのと同じように、エージェントが最初に行うべき環境構築手順を明示しましょう。

← 前のページ

よくある落とし穴

高度なテクニック