VISUAL NOTE
株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)
サイト改善のため、同意した場合だけGoogle AnalyticsとPostHogを読み込みます。拒否しても、学習コンテンツとお問い合わせは利用できます。詳細
株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)

Claude Code と VS Code の連携手順を3ステップで解説。拡張機能のインストール、ターミナル統合、Ctrl+G などショートカット、設定ファイルの書き方まで網羅。

CursorとClaude Codeの料金・機能・作業画面・自動化・チーム管理を比較。どちらを選ぶか、同じリポジトリで安全に併用する方法を解説します。
Claude Code・OpenAI Codex・Cursorを、作業画面、ローカル・クラウド実行、指示ファイル、自動化、チーム運用の観点で比較。仕事別の選定手順を公式情報に基づいて解説します。
連携先を増やす前に、作業範囲と確認ポイントをレッスンで整理します。
Claude Code の MCP(Model Context Protocol) 連携を使うと、外部のツールやサービスを AI エージェントに直接接続できます。データベース、API、ファイルシステム、SaaS ツールなど、あらゆる外部リソースへのアクセスを Claude Code に追加し、開発の自動化範囲を大幅に拡大できます。
本記事では、MCP の基本概念から、Claude Code での設定方法、実用的な活用例、おすすめの MCP サーバー、自作 MCP サーバーの作り方、セキュリティ対策、そしてトラブルシューティングまでを 2026 年時点の仕様に沿って詳しく解説します。
MCP は Anthropic が 2024 年 11 月に発表し、その後オープンソース化された AI モデルと外部ツールを接続する標準プロトコル です。USB-C が周辺機器を統一したように、MCP は「AI エージェントが外部世界とつながる際の共通インターフェース」を目指して設計されました。
2026 年現在、Anthropic だけでなく OpenAI、Google、Microsoft、IDE 各社(Cursor、Zed、Continue など)が MCP をサポートしており、AI エージェント時代の事実上の標準となりつつあります。
MCP 登場以前、AI エージェントに外部ツールを使わせる方法は「ベンダー独自のプラグイン API」「OpenAPI 連携」「Function Calling のスキーマを毎回書く」など、ツールごとに作り直す必要がありました。
MCP はこの 「組み合わせ爆発(M × N 問題)」 を解決します。M 個のホスト(Claude Code、Cursor など)と N 個のツール(GitHub、PostgreSQL など)があっても、MCP に準拠していれば一度の実装で全ホストから利用できます。
MCP は 3 つのプリミティブ で構成されています。
| プリミティブ | 説明 | 例 |
|---|---|---|
| Tools | Claude Code が呼び出せる関数(副作用あり) | query_database, send_message, create_issue |
| Resources | 読み取り可能なデータソース(副作用なし) | データベースのスキーマ、API ドキュメント、ファイル |
| Prompts | 事前定義されたプロンプトテンプレート | レビューガイドライン、コーディング規約、雛形 |
MCP サーバーは「Claude Code に新しい能力を追加するプラグイン」と考えるとわかりやすいでしょう。サーバーが提供する Tools がそのまま Claude Code から呼び出せる関数になります。
Tools、Resources、Promptsの役割をさらに整理したい場合は、MCPツールとリソースの用語解説を参照してください。
MCP は クライアント・サーバー型 で、3 つの役割で構成されます。
MCP サーバーとの通信には主に 3 種類のトランスポートがあります。
| トランスポート | 用途 | 起動方法 |
|---|---|---|
| stdio | ローカルで動作する MCP サーバー(最も一般的) | コマンドを子プロセスとして起動 |
| HTTP + SSE | リモートで動作する MCP サーバー | URL に接続。OAuth 認証も可能 |
| Streamable HTTP | 2026 年に標準化された次世代方式 | 単一エンドポイントで双方向通信 |
ローカル開発で使う MCP サーバーはほぼすべて stdio、Cloudflare や Stripe などが提供するリモート MCP サーバーは HTTP + SSE か Streamable HTTP を使います。
MCP は JSON-RPC 2.0 をメッセージ形式に採用しており、以下の流れで動作します。
initialize を送信し、プロトコルバージョンと能力(capabilities)を交換tools/list を呼び出し、サーバーが提供するツール一覧を取得tools/call を呼び出しClaude Code 利用者がこの低レベルなやりとりを意識することはありませんが、トラブルシューティング時に initialize が失敗していれば「プロトコルバージョン不一致」、tools/list が空なら「サーバーのツール定義漏れ」と切り分けられます。
Claude Code では MCP サーバーを 3 つのスコープ で管理できます。スコープによって優先順位と共有範囲が変わります。
| スコープ | 設定場所 | 共有範囲 |
|---|---|---|
| User | ~/.claude/settings.json の mcpServers | 自分の全プロジェクトで有効 |
| Project | プロジェクトルートの .mcp.json | チーム全体で共有(Git にコミット可能) |
| Local | プロジェクト内 .claude/settings.local.json | そのプロジェクトの自分の環境のみ |
~/.claude/settings.json の mcpServers セクションに記述すると、すべてのプロジェクトで利用可能になります。GitHub MCP のように複数プロジェクトで共通利用するものはここに置くのが便利です。
{
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxx"
}
}
}
}プロジェクトルートの .mcp.json に記述すると、git clone した全員が同じ MCP サーバーを使えます。プロジェクト固有の DB やデザインファイルへの接続情報を共有する用途に適しています。
{
"mcpServers": {
"project-db": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres"],
"env": {
"DATABASE_URL": "postgresql://localhost:5432/mydb"
}
}
}
}API キーやパスワードを .mcp.json に直書きせず、env を ${VAR_NAME} 形式で参照することで、ユーザーごとの環境変数から差し込むのが安全です。詳細は
を参照してください。
claude mcp add コマンドで対話的に追加することも可能です。
# stdio タイプの MCP サーバーを追加
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /path/to/dir
# HTTP タイプ(リモート MCP)を追加
claude mcp add --transport http context7 https://mcp.context7.com/mcp
# スコープを明示
claude mcp add --scope project linear -- npx -y linear-mcpMCP サーバーの設定を変更した後は Claude Code を再起動 する必要があります。/mcp コマンドで接続状態を確認できます。
> /mcp
# 接続中のサーバーとそのステータスが一覧表示される
# ✓ filesystem (3 tools)
# ✓ github (12 tools)
# ✗ postgres (connection failed)Anthropic の公式リポジトリ(modelcontextprotocol/servers)と、大手 SaaS ベンダーが提供する公式 MCP サーバーを用途別にまとめます。
| サーバー | 用途 |
|---|---|
@modelcontextprotocol/server-filesystem | ローカルファイル読み書き |
@modelcontextprotocol/server-postgres | PostgreSQL への読み取り専用接続 |
@modelcontextprotocol/server-sqlite | SQLite ファイルへの接続 |
@modelcontextprotocol/server-github | GitHub Issue・PR・Actions 操作 |
@modelcontextprotocol/server-google-drive | Google Drive のファイル検索・取得 |
@modelcontextprotocol/server-slack | Slack メッセージ送信・履歴取得 |
@modelcontextprotocol/server-puppeteer | ブラウザ自動化(スクリーンショット、操作) |
@modelcontextprotocol/server-fetch | 任意の HTTP URL のフェッチ |
| 提供元 | サーバー | 用途 |
|---|---|---|
| Stripe | @stripe/mcp | 顧客・サブスク・決済情報の操作 |
| Cloudflare | @cloudflare/mcp-server-cloudflare | Workers / KV / R2 / D1 の操作 |
| PostHog | posthog-mcp | プロダクト分析データの SQL クエリ |
| Linear | linear-mcp | Issue・Project 管理 |
| Notion | @notionhq/notion-mcp-server | ページ・データベース操作 |
| Figma | figma-developer-mcp | デザインファイルのノード読み取り |
| Sentry | @sentry/mcp-server | エラー検索・スタックトレース取得 |
| Block (Square) | block-mcp | 決済 / 在庫 / 注文管理 |
| サーバー | 用途 | 特徴 |
|---|---|---|
firecrawl-mcp | Web スクレイピング | JS レンダリング・サイトクロール対応 |
context7-mcp | 最新ライブラリのドキュメント取得 | バージョン指定で正確な API 仕様を回答 |
playwright-mcp | ブラウザ自動化 | E2E テスト、フォーム自動入力 |
chrome-devtools-mcp | Chrome DevTools 連携 | パフォーマンス計測、コンソールログ取得 |
サーバーの最新一覧は公式の MCP Servers Registry(github.com/modelcontextprotocol/servers)と、コミュニティ運営の Smithery(smithery.ai)でカテゴリ別に検索できます。
ここでは特に利用頻度の高い 3 つのサーバーを例に、.mcp.json への記述から動作確認までを示します。
Claude Code は標準で「カレントプロジェクト内」のファイルしか操作できません。プロジェクト外のフォルダ(過去案件、設計書フォルダなど)を参照したい場合に filesystem MCP が便利です。
{
"mcpServers": {
"design-docs": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/me/Documents/design-docs",
"/Users/me/Documents/specs"
]
}
}
}引数として「許可するディレクトリ」を渡すと、それ以外の場所はサンドボックスでブロックされます。
GitHub MCP を入れると、gh CLI を覚えなくても「Issue #42 を読んで」「このブランチで PR を作って」のような自然言語指示が通ります。
{
"mcpServers": {
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxx"
}
}
}
}PAT は最小権限の原則で repo / read のみ に絞ること。Issue 削除など破壊的操作を含むスコープ(delete_repo 等)は付けないことを推奨します。
Claude Code に DB スキーマを リアルタイムで参照させる ことで、テーブル名やカラム名の取り違えがほぼゼロになります。
{
"mcpServers": {
"db": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-postgres",
"postgresql://readonly:pass@localhost:5432/mydb"
]
}
}
}公式 postgres MCP は 読み取り専用 で、SELECT のみ実行可能。本番 DB に接続するときも、読み取り専用ユーザーで接続するように徹底してください。
設定追加後、Claude Code を再起動して /mcp で ✓ db (2 tools) のように表示されれば接続成功です。試しに「users テーブルのスキーマを確認して」と指示してみると、スキーマ情報を読み取って結果を返してくれます。
既存のサーバーでカバーできない場合、社内 API や独自データソース を Claude Code から扱えるようにする最も柔軟な方法は、MCP サーバーを自作することです。Anthropic は TypeScript・Python・Java・Kotlin・C# 向けに公式 SDK を提供しています。
@modelcontextprotocol/sdk を使って、hello ツールを 1 つだけ持つ最小の MCP サーバーは次のように書けます。
import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import {
CallToolRequestSchema,
ListToolsRequestSchema,
} from "@modelcontextprotocol/sdk/types.js";
const server = new Server(
{ name: "my-custom-server", version: "1.0.0" },
{ capabilities: { tools: {} } },
);
server.setRequestHandler(ListToolsRequestSchema, async () => ({
tools: [
{
name: "hello",
description: "挨拶を返す",
inputSchema: {
type: "object",
properties: { name: { type: "string" } },
required: ["name"],
},
},
],
}));
server.setRequestHandler(CallToolRequestSchema, async (request) => {
if (request.params.name === "hello") {
const name = request.params.arguments?.name ?? "world";
return { content: [{ type: "text", text: `Hello, ${name}!` }] };
}
throw new Error("Unknown tool");
});
const transport = new StdioServerTransport();
await server.connect(transport);ビルド後、.mcp.json で command: "node", args: ["./dist/index.js"] のように起動すれば、hello ツールが Claude Code から呼び出せます。
get_user, create_issue)— Claude が役割を推測しやすいdescription は冗長気味で OK — Claude がツール選択に使うのはこの記述inputSchema で必須・型を厳密に — モデルが不要な引数を渡すのを防げるisError: true で返す — Claude が原因を理解してリトライできる社内 API や独自のデータソースへのアクセスが必要な場合は、カスタム MCP サーバーを作成して
に登録するのが最も柔軟なアプローチです。
MCP サーバーはローカルプロセスとして起動し、Claude Code に その権限と同等のアクセス を与えます。便利な分、設定を誤ると本番 DB を破壊したり機密情報を漏らしたりするリスクもあります。
package.json の dependencies と main エントリだけは目視.mcp.json をリポジトリにコミットする場合、API キーは環境変数経由で渡すClaude Code には permissions という機構があり、各 MCP ツールの実行を「許可」「拒否」「都度確認」に分類できます。
{
"permissions": {
"allow": ["mcp__github__list_issues", "mcp__github__get_issue"],
"ask": ["mcp__github__create_pull_request"],
"deny": ["mcp__github__delete_repository"]
}
}危険な操作(DB 書き込み、リポジトリ削除、外部送信など)は ask か deny にしておき、一括承認モード(--dangerously-skip-permissions)では絶対に使わないという運用が安全です。
MCP は単なる「外部ツール接続」ではなく、エージェント時代の 新しいワークフロー を生み出します。代表的なパターンを 4 つ紹介します。
Figma MCP でデザインカンプを読み、Linear MCP で要件チケットを取得し、PostgreSQL MCP で既存スキーマを確認しながら実装する。「仕様」「データ」「デザイン」の 3 つを横断する作業を 1 つの会話で完結させられます。
Sentry MCP / PostHog MCP / GitHub MCP を組み合わせて、「直近 24 時間で最も多いエラーを取得 → 原因コードを Git ブレーム → 修正 PR を作成」までを 1 つの指示で実行できます。SRE オンコール業務の半自動化に近い体験になります。
Notion MCP / Google Drive MCP / Slack MCP を接続すると、社内ドキュメント横断検索ができます。「先月の議事録から、認証基盤の意思決定を要約して」のような質問が通るようになります。
ヘッドレスモード(claude -p)の Claude Code は CI 内でも MCP を利用できます。GitHub Actions から MCP 経由で Linear のチケットを更新するなど、開発以外のワークフローも自動化対象になります。詳細は
を参照してください。
/mcp で「error」と表示されるMCP サーバーの起動時にクラッシュしている可能性があります。ターミナルでサーバーを直接実行してエラーを確認するのが最短ルートです。
# 直接実行してエラーを確認
npx -y @modelcontextprotocol/server-postgres "postgresql://..." 2>&1接続失敗、認証失敗、Node.js のバージョン不一致が典型的な原因です。
MCP サーバーは起動しているのに /mcp でツール数が 0 と表示される場合、以下を確認してください。
capabilities.tools を宣言しているかtools/list が空配列を返していないか依存パッケージを最新版にアップデートすると解決することが多いです。
HTTP 系の MCP サーバーは OAuth 2.1 をサポートするものが増えています。Claude Code は初回接続時にブラウザを開いて認証フローを通す方式です。トークンは macOS Keychain / Windows Credential Manager に保存されます。
MCP プロトコル自体は無償のオープンスタンダードです。MCP サーバーの 裏側のサービス にコストがかかる場合はあります(Firecrawl API、Cloudflare の有料機能など)。Claude Code のサブスク料金は
を参照してください。
複数スコープに同名のサーバーがある場合、Local > Project > User の順で優先されます。チーム共有設定をベースに、自分だけ環境変数を上書きする運用が典型です。
MCP の体系的な学習は本ガイド第 8 章のレッスンで進められます。実機で手を動かしながら理解したい方は次のレッスンから始めてください。
Claude Code の MCP 連携を使うと、AI エージェントの能力を大幅に拡張できます。
MCP を活用することで、Claude Code は単なるコーディングアシスタントから、開発プロセス全体をオーケストレーションする 統合開発エージェント へと進化します。まずは GitHub MCP や Filesystem MCP のような扱いやすいサーバーから導入し、徐々に自社の業務フローに合わせて拡張していくのがおすすめです。