VS Code エージェントモード + MCP 完全活用術【2026年3月】GitHub Copilotでバイブコーディング入門

「Cursor や Claude Code を使わなくても、VS Code だけで AI エージェント開発ができるようになった」

2026年2月リリースの VS Code 1.110（February 2026 Update）で、GitHub Copilot の エージェントモード（Agent Mode） と MCP（Model Context Protocol）サポートが正式に安定版（Stable）入りしました。

つまり、新しいエディタに乗り換えなくても、使い慣れた VS Code のまま AI エージェントを活用できる時代が来たということです。

この記事でわかること：

• VS Code エージェントモードとは何か（どう変わったのか）
• Agent Mode の有効化手順（ステップバイステップ）
• MCP サーバーの追加・設定方法
• 実践的なユースケース5選
• 新機能（Lifecycle Hooks・Session Memory・SKILL.md）の活用法
• Cursor・Claude Code との使い分け

VS Code 1.110 で何が変わった？

2026年2月、VS Code 1.110 は「エージェントの実用化」という観点で画期的なアップデートを遂げました。主な変更点を整理します。

安定版になった主要機能

エージェントモードとは

エージェントモードとは、GitHub Copilot が単なる「コード補完・質問回答ツール」から、自律的にタスクを実行するエージェントに変わるモードです。

通常の Copilot（Inline / Chat）は「人間が質問→ Copilot が答える」という受動的な動きですが、エージェントモードでは：

• コードベースを自律的に調査
• 複数ファイルを同時に編集
• ターミナルコマンドを実行
• エラーを発見したら自動修正
• 外部ツール（MCP 経由）を呼び出す

という能動的な動きをします。まさに 「AI が同僚として自律作業する」 体験です。

エージェントモードの有効化手順

前提条件

• VS Code 1.110 以上（2026年2月リリース）
• GitHub Copilot 拡張機能（v1.300 以上）
• GitHub Copilot サブスクリプション（Individual $10/月〜）

ステップ1：VS Code と Copilot 拡張を最新版に更新

# VS Code のバージョン確認
code --version

VS Code のメニューから「Help → Check for Updates」で最新版に更新します。拡張機能も Extensions パネルから「Update All」で更新してください。

ステップ2：エージェントモードを有効化

Ctrl + Shift + P（macOS: Cmd + Shift + P）でコマンドパレットを開き：

GitHub Copilot: Open Chat

を選択して Copilot Chat を開きます。チャット入力欄の左側にモード切替アイコンがあります：

• Chat（通常モード）：質問・相談
• Edit（編集モード）：ファイル編集
• Agent（エージェントモード）：自律実行

「Agent」を選択するだけで有効化完了です。

ステップ3：設定ファイルでのオプション設定（任意）

settings.json に以下を追加すると、エージェントモードの挙動をカスタマイズできます：

{
  "github.copilot.chat.agent.enabled": true,
  "github.copilot.chat.agent.autoRunTools": true,
  "github.copilot.chat.agent.confirmCommands": true
}

• autoRunTools：ツール（コマンド実行など）の自動実行の有無
• confirmCommands：コマンド実行前に確認を求めるか

MCP サーバーの追加設定

MCP（Model Context Protocol） とは、AI モデルが外部ツール・サービスと連携するための標準規格です（詳しくは MCP 完全ガイド をご覧ください）。

VS Code 1.110 から MCP サーバーの設定が大幅に簡単になりました。

MCP サーバーの追加方法

VS Code の設定（settings.json）に以下の形式で MCP サーバーを追加します：

{
  "mcp": {
    "servers": {
      "github": {
        "command": "npx",
        "args": ["-y", "@modelcontextprotocol/server-github"],
        "env": {
          "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token-here"
        }
      },
      "filesystem": {
        "command": "npx",
        "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
      }
    }
  }
}

おすすめの MCP サーバー一覧

MCP サーバーの動作確認

Copilot Chat（Agent モード）で以下のように話しかけるとツールが呼び出されます：

「GitHub の issues で 'bug' ラベルが付いているものを一覧してください」

→ GitHub MCP が自動で呼び出され、Issue 一覧を取得して表示します。

実践ユースケース5選

ユースケース1：バグ修正の自動化

「npm test を実行して失敗しているテストを修正してください」

エージェントが行うこと：

1. ターミナルで npm test を実行
2. 失敗したテストのエラーメッセージを解析
3. 関連ファイルを特定して原因を調査
4. 修正案を実装
5. 再テストして確認

ユースケース2：新機能の実装

「ユーザー設定ページを追加してください。
- メールアドレス変更
- パスワード変更
- アカウント削除
の3機能を含めてください。既存のデザインシステムに合わせて。」

エージェントが行うこと：

1. 既存コードベースを調査（デザインシステム・ルーティング構成を把握）
2. 必要なファイルを新規作成・既存ファイルを修正
3. フォームバリデーション・API 連携も実装

ユースケース3：Figma デザインからコードを生成

Figma MCP サーバーが接続済みの場合：

「Figma のこのフレーム（URL: ...）を React コンポーネントに変換してください。
Tailwind CSS を使い、既存の Button・Input コンポーネントを活用してください。」

エージェントが行うこと：

1. Figma MCP からデザインデータを取得
2. レイアウト・色・フォントを解析
3. 既存コンポーネントを再利用したコードを生成

ユースケース4：GitHub Issue から実装まで

GitHub MCP サーバーが接続済みの場合：

「Issue #42 の内容を読んで、実装してから PR を作成してください。」

エージェントが行うこと：

1. GitHub MCP で Issue #42 の内容を取得
2. 要件を理解して実装
3. コミット・ブランチ作成・PR 説明の自動生成

ユースケース5：コードレビューとリファクタリング

「src/components ディレクトリのコードを見て、
改善できる点を指摘してから、承認を得た上でリファクタリングしてください。」

エージェントが行うこと：

1. コンポーネント全体をスキャン
2. パフォーマンス問題・設計上の問題点を報告
3. 承認後にリファクタリングを実行

2026年3月の新機能を活用する

Lifecycle Hooks

エージェントが特定のイベント（ファイル保存・コマンド実行前後など）に自動でアクションを実行する仕組みです。

.vscode/copilot-hooks.json で設定します：

{
  "hooks": {
    "onFileSave": {
      "action": "lint",
      "args": ["--fix"]
    },
    "beforeTerminalCommand": {
      "action": "confirm",
      "message": "このコマンドを実行してもいいですか？"
    }
  }
}

Session Memory

エージェントが会話をまたいでコンテキストを記憶する機能です。

「このプロジェクトではTypeScriptのstrictモードを使っています。
テストはVitestで書いています。これを覚えておいてください。」

次回から自動でこの情報をベースに作業してくれます。

SKILL.md

CLAUDE.md（Claude Code）や .cursorrules（Cursor）と同じように、VS Code の Copilot エージェントにプロジェクト固有のルール・スキルを教えるファイルです。

.vscode/SKILL.md に記載します：

# プロジェクトスキル設定
 
## コーディング規約
- TypeScript strict モードを使用
- コンポーネントは関数コンポーネント + hooks で実装
- CSS は Tailwind CSS v4 を使用（tailwind.config.ts は不要）
 
## テスト
- テストは Vitest で書く
- コンポーネントテストは React Testing Library を使用
 
## 禁止事項
- `any` 型の使用は禁止
- console.log は本番コードに残さない
 
## 言語
- コメントと説明は日本語で書く

VS Code エージェントモード vs Cursor vs Claude Code

どのツールを選ぶべきか、比較してみましょう。

VS Code + Copilot がベストな人

• 今すぐ使いたい（設定なしで始められる）
• VS Code から移行したくない（拡張・テーマ・設定を変えたくない）
• コストを抑えたい（$10/月 Individual が最安）
• GitHub・JetBrains の代わりに VS Code を使っている
• チームで統一ツールを使いたい（最も普及率が高い）

Cursor・Claude Code の方がいい場面

• コード品質を最重視（Claude Code の Opus 4.6 が最高精度）
• より高度なエージェント機能（Claude Code の CLAUDE.md・Hooks・サブエージェント）
• Windsurf など専用 IDE の体験（エージェントファーストの設計）

コスト別のおすすめ構成

月$10（最もコスパ優先）

VS Code（無料） + GitHub Copilot Individual（$10）
→ エージェントモード + MCP で十分なAI支援
→ すでにCopilot契約済みなら追加コスト0

月$20（バランス重視）

VS Code + GitHub Copilot Individual（$10）
+ Claude Pro（$10相当の単独利用）
→ Copilot でルーティンワーク自動化
→ Claude Code で複雑な実装・コードレビュー

月$30（最強スタック）

VS Code + GitHub Copilot Individual（$10）
+ Claude Code Pro（$20）
→ Copilot の GitHub 統合 × Claude の最高精度コード生成

まとめ

VS Code 1.110 のアップデートにより、使い慣れた VS Code そのままで本格的な AI エージェント開発ができる時代になりました。

特に：

• すでに GitHub Copilot を契約している人は今すぐ Agent Mode を試せます（追加コスト0）
• エディタを変えたくない人には最高の選択肢
• MCP でツール連携することで、Figma→コード・GitHub Issue→PR などの自動化が可能

Cursor や Claude Code と比べてコスト・学習コスト・移行コストが最も低いので、「AI エージェント開発を試したいけど、どこから始めればいいかわからない」という方には VS Code + Copilot Agent Mode が最初の一歩として最適です。

関連記事：

• GitHub Copilot 完全ガイド
• MCP（Model Context Protocol）完全ガイド
• GitHub Copilot CLI vs Claude Code 比較
• バイブコーディング（Vibe Coding）入門ガイド
• Claude Code ベストプラクティス

参考:

• VS Code 1.110 + GitHub Copilot 2026年3月アップデートまとめ（Qiita）
• GitHub Copilotでバイブコーディング：エージェントモードとMCPサポートがVS Codeユーザーに提供開始（GitHub Blog）
• VSCodeでAIエージェントとMCPが使えるようになったので試してみた（CDLE）