Claude Code VSCode MCP連携ガイド：拡張機能で開発を効率化

Claude Code for VSCodeの機能を大幅に拡張できるMCP（Model Context Protocol）の活用方法を解説します。おすすめのMCPサーバーから設定手順、実践的な活用事例まで網羅的に紹介します。

Claude Code VSCode MCPとは

MCPの基本概念

Model Context Protocol (MCP)

• Claudeが外部ツールやデータにアクセスするための標準プロトコル
• ファイルシステム、データベース、API等に接続可能
• プラグインのように機能を追加できる仕組み

VSCode環境でのメリット

• 開発環境に特化した機能拡張
• ローカルリソースへの安全なアクセス
• カスタムツールの統合が容易

VSCode向けおすすめMCPサーバー

1. ファイルシステムMCP

filesystem MCPサーバー

# インストール
npx -y @modelcontextprotocol/server-filesystem /path/to/workspace

設定ファイル

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "${workspaceFolder}"
      ]
    }
  }
}

できること

• ワークスペース内のファイル読み書き
• ディレクトリ構造の把握
• ファイル検索と一括操作

2. GitHub MCP

github MCPサーバー

# インストールと設定
npm install -g @modelcontextprotocol/server-github

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "${env:GITHUB_TOKEN}"
      }
    }
  }
}

できること

• Issue/PRの作成・更新
• コードレビューの自動化
• リポジトリ情報の取得

3. データベースMCP

PostgreSQL MCPサーバー

# インストール
npm install -g @modelcontextprotocol/server-postgres

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-postgres",
        "postgresql://localhost/mydb"
      ],
      "env": {
        "PGPASSWORD": "${env:DB_PASSWORD}"
      }
    }
  }
}

できること

• スキーマ情報の取得
• クエリの実行と結果分析
• データベース設計のレビュー

4. Playwright MCP

ブラウザ自動化MCPサーバー

# インストール
npm install -g @executeautomation/playwright-mcp-server

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

できること

• E2Eテストの自動生成
• ブラウザ操作の記録
• スクリーンショットの取得

VSCodeでのMCP設定方法

設定ファイルの配置

プロジェクト単位の設定

# ワークスペース設定
.vscode/claude-code.json

{
  "mcpServers": {
    "server-name": {
      "command": "command-to-run",
      "args": ["arg1", "arg2"],
      "env": {
        "VAR_NAME": "value"
      }
    }
  }
}

グローバル設定

# ユーザー設定
~/.config/Code/User/claude-code.json

環境変数の設定

安全なシークレット管理

{
  "mcpServers": {
    "api-server": {
      "command": "node",
      "args": ["server.js"],
      "env": {
        "API_KEY": "${env:MY_API_KEY}",
        "DATABASE_URL": "${env:DATABASE_URL}"
      }
    }
  }
}

実践的な活用事例

事例1: フルスタック開発環境

設定

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "${workspaceFolder}"
      ]
    },
    "postgres": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-postgres",
        "${env:DATABASE_URL}"
      ]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

活用例

プロンプト:
「ユーザー管理機能を実装してください。
1. データベーススキーマを確認
2. APIエンドポイントを作成
3. E2Eテストを生成」

→ MCPを使って自動的に:
  - DBスキーマ確認
  - コード生成
  - テスト作成

事例2: CI/CD環境との連携

GitHub Actions + MCP

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "${env:GITHUB_TOKEN}"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "${workspaceFolder}/.github/workflows"
      ]
    }
  }
}

セキュリティベストプラクティス

1. シークレット管理

{
  "mcpServers": {
    "secure-server": {
      "env": {
        // ❌ ハードコードしない
        "API_KEY": "sk-...",

        // ✅ 環境変数を使用
        "API_KEY": "${env:API_KEY}"
      }
    }
  }
}

2. アクセス制限

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        // 特定のディレクトリのみアクセス許可
        "${workspaceFolder}/src"
      ]
    }
  }
}

まとめ

Claude Code VSCodeでのMCP活用により、開発効率が大幅に向上します。

重要なポイント

• 適切なMCPサーバーの選択
• セキュアな設定管理
• プロジェクトに応じたカスタマイズ
• トラブルシューティングの理解

おすすめの導入手順

1. ファイルシステムMCPから始める
2. プロジェクトに必要なMCPを追加
3. カスタムMCPで独自機能を実装
4. セキュリティ設定の見直し

MCPを活用することで、Claude Codeの可能性が大きく広がります。