🤝

【開発効率5倍】Claude Codeの真価は"MCP"にあり。複数サービスをAIで操る次世代開発術を完全攻略

2025/07/09に公開

Model Context Protocol

はじめに

こんにちは！株式会社 OCT-PATHで CTO をしている黛政隆（X はこちら）です。

日々の開発業務、本当にお疲れ様です！今日もデータベース、API、テスト、ドキュメント...と、様々なツールを行き来しながら開発を進めていることと思います。

「Supabase でテーブル作って、API 実装して、Playwright でテスト書いて、GitHub に PR 出して...」

このような一連の作業、それぞれのツールは素晴らしいのですが、ツール間の連携って意外と面倒ですよね。コピペしたり、手動で同期を取ったり、コンテキストスイッチで頭が疲れたり...

でも、もしこう言ったらどうでしょう？

「Claude Code に『ユーザー管理機能を作って』と頼むだけで、DB 設計からテストまで、すべてのサービスを AI が連携させて完成させてくれる」

夢物語のように聞こえるかもしれませんが、MCP（Model Context Protocol） を使えば、これが現実になります。

今回は、Claude Code と MCP を組み合わせることで実現する「AI がつなぐ開発新時代」について、実践的な活用方法を徹底解説します。この記事を読み終わる頃には、あなたも複数のサービスを AI に賢く連携させて、開発効率を劇的に向上させることができるはずです！

MCPの本質：AIが実現する「つながる開発」

まず、MCP（Model Context Protocol）とは何かを、エンジニア向けにシンプルに説明します。

MCPは、AIに外部サービスへの「扉」を開く技術

従来の AI コーディングツールは、基本的にコードの読み書きしかできませんでした。データベースの中身を見たり、ブラウザを操作したり、外部サービスと連携したりするには、私たち人間が橋渡しをする必要がありました。

MCP は、この制限を取り払います。AI が直接、様々なサービスにアクセスできる「扉」を提供するのです。

今までとの違い：複数サービス間をAIがシームレスに行き来

これまでの開発フローを思い出してください：

Notion で仕様を確認
Supabase でテーブル作成
VSCode でコード実装
Playwright でテスト作成
GitHub で PR 作成

各ステップでツールを切り替え、コンテキストも切り替え、情報をコピペして...正直、疲れますよね。

MCP を使うと、これらすべてを Claude が一つの会話の中で処理してくれます。あなたは「ユーザー管理機能を作って」と伝えるだけ。AI が各サービスを適切に連携させて、一貫した実装を行ってくれるのです。

開発者のメリット：コンテキストを保ったまま複数ツールを活用

最大のメリットは、コンテキストの一貫性です。

従来：「さっき Supabase で作ったテーブル構造、なんだっけ...」
MCP 時代：AI が全てを覚えていて、整合性を保ちながら開発を進めてくれる

これにより、ミスが減り、開発スピードが向上し、何より本質的な設計や創造的な作業に集中できるようになります。

実践編：AIがつなぐ5つのサービス連携術

それでは、実際に Claude Code で使える MCP サーバーと、その実践的な活用方法を見ていきましょう。

3.1 Supabase MCP：データベースとコードの垣根をなくす

MVP開発では特にSupabaseをお勧めしていますが、こちらはMCPにも対応しています。
Supabase MCP を使うと、Claude がデータベースの中身を直接見ながら、最適な API を生成してくれます。

設定方法

claude mcp addコマンドを使った方法（推奨）：

# 環境変数を設定
export SUPABASE_URL="https://your-project.supabase.co"
export SUPABASE_SERVICE_ROLE_KEY="your-service-key"

# MCPサーバーを追加
claude mcp add supabase \
  --command "npx" \
  --args "-y" "@quegenx/supabase-mcp-server"

または、手動でJSON設定する方法：

{
  "mcpServers": {
    "supabase": {
      "command": "npx",
      "args": ["-y", "@quegenx/supabase-mcp-server"],
      "env": {
        "SUPABASE_URL": "https://your-project.supabase.co",
        "SUPABASE_SERVICE_ROLE_KEY": "your-service-key"
      }
    }
  }
}

実例：「このテーブル構造に合わせたCRUD APIを作って」

あなた: ユーザー管理機能を作りたい。メールアドレス、名前、ロール（admin/user）を持つテーブルとCRUD APIを実装して。

Claude: 了解しました。Supabase MCPを使ってテーブルを作成し、それに合わせたAPIを実装します。

[Claudeが実行]
1. usersテーブルを作成（id, email, name, role, created_at）
2. Row Level Securityの設定
3. TypeScriptの型定義生成
4. CRUD API実装（Next.js API Routes）
5. エラーハンドリングとバリデーション追加

CLI でやると何度もコマンドを打つ必要がありますが、MCP ならAIがDBスキーマを見ながら、一貫性のあるコードを生成してくれます。

3.2 PostgreSQL Pro MCP：開発環境DBを賢く活用

多くの業界でもスタンダードで利用されているPostgreSQLですが、こちらもMCPが利用可能です。
今回取り上げるPostgreSQL Pro MCP は公式ではありませんが、書き込み権限もあるため、開発環境での活用に最適です。

設定方法（Dockerを使った簡単セットアップ）

PostgreSQL Pro MCPはDockerで起動するのが最も簡単です。以下の手順で設定してください：

# 1. Dockerイメージを取得
docker pull crystaldba/postgres-mcp

# 2. 環境変数を設定（host.docker.internalを使うことが重要！）
export DATABASE_URI="postgresql://user:pass@host.docker.internal:5432/my_db"

# 3. Claude Codeに登録（--access-mode=unrestrictedが必須）
claude mcp add postgres-pro -s user -- \
  docker run --rm -i -e DATABASE_URI="$DATABASE_URI" \
  crystaldba/postgres-mcp --access-mode=unrestricted

活用例：テストデータ生成とパフォーマンス最適化

あなた: postgres-pro MCPを使って、開発用に1000件のリアルなユーザーデータを生成して。あと、検索が遅いからインデックスも最適化して。

Claude: postgres-pro MCPを使って対応します。

[実行内容]
1. 1000件のテストデータ生成（名前、メール、登録日をランダムに）
2. EXPLAIN ANALYZEでクエリ分析
3. 最適なインデックス提案と作成
4. 実行計画の改善確認

単なるデータ投入ではなく、パフォーマンスも考慮した開発環境を AI が整えてくれます。

3.3 Playwright MCP：UIとテストをAIがつなぐ

Playwright MCP により、Claude が実際にブラウザを操作しながらテストを作成できます。

設定方法

claude mcp addコマンドを使った方法（推奨）：

claude mcp add playwright \
  --command "npx" \
  --args "-y" "@microsoft/playwright-mcp"

または、手動でJSON設定する方法：

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

実例：画面を見ながらE2Eテスト生成

あなた: さっき作ったユーザー管理画面のE2Eテストを作って。登録、ログイン、一覧表示のシナリオで。

Claude: Playwright MCPで画面を確認しながらテストを作成します。

[生成されるテスト]
- ユーザー登録フロー（バリデーションエラーも含む）
- ログイン/ログアウト
- ユーザー一覧の表示と検索
- 権限による表示制御の確認

画面の実際の動作を確認しながらテストを書くので、より現実的で堅牢なテストになります。

3.4 GitHub MCP：コードとプロジェクト管理の架け橋

GitHub MCP を使うと、コードの変更とプロジェクト管理が自然に連携します。

設定方法

claude mcp addコマンドを使った方法（推奨）：

# 環境変数を設定
export GITHUB_PERSONAL_ACCESS_TOKEN="your-github-pat"

# MCPサーバーを追加
claude mcp add github \
  --command "npx" \
  --args "-y" "@modelcontextprotocol/server-github"

または、手動でJSON設定する方法：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-github-pat"
      }
    }
  }
}

活用例：コミットからリリースノートまで一貫管理

あなた: 今回の変更をPRにして。あと、最近のコミットからリリースノートも作成して。

Claude: GitHub MCPで対応します。

[実行内容]
1. 変更内容を整理してブランチ作成
2. わかりやすいコミットメッセージで分割コミット
3. PRを作成（テンプレートに沿って）
4. 過去のコミットを分析してリリースノート生成
5. 関連するIssueも自動でリンク

手動でやると面倒なプロジェクト管理タスクも、AIが文脈を理解して処理してくれます。

3.5 Context7 MCP：最新ドキュメントと実装をリアルタイム連携

Context7 MCP は、最新のライブラリドキュメントを参照しながら実装できる強力なツールです。
AIコーディングの弱点となる、最新のフレームワークなどが弱いを補助してくれます。

設定方法

claude mcp addコマンドを使った方法（推奨）：

claude mcp add context7 \
  --command "npx" \
  --args "-y" "@upstash/context7"

または、手動でJSON設定する方法：

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7"]
    }
  }
}

実例：新しいフレームワークでも確実な実装

あなた: Next.js 15のServer Actionsを使ってフォーム処理を実装して。 use Context7

Claude: Context7でNext.js 15の最新ドキュメントを確認しながら実装します。

[Context7が提供する情報]
- Server Actionsの最新仕様
- エラーハンドリングのベストプラクティス
- キャッシュ無効化の方法
- 実際の使用例

[生成されるコード]
- 型安全なServer Actions
- プログレッシブエンハンスメント対応
- エラーバウンダリーの実装

これで ドキュメントが少ない新機能でも、正確な実装が可能になります。

連携の実例：こんな開発ができる

他にも、普段みなさんがお使いになられているサービスもMCPに対応しているものがあります！以下はそれらを活用した一例です。

Notion → Figma → コード生成の流れ

実際の使用例：

あなた: Notionにある「ユーザーダッシュボード仕様」を元に、Figmaのデザイン通りに実装して。

Claude: NotionとFigma MCPを使って情報を取得し、実装します。

[実行フロー]
1. Notionから機能要件を読み込み
2. Figmaからカラー、スペーシング、コンポーネント構造を取得
3. デザイントークンをCSS変数として定義
4. Reactコンポーネントを生成（デザインに忠実に）
5. APIとの連携部分も仕様通りに実装

Slack通知 → GitHub Issue → 自動修正PRの連携

DevinのようにSlack通知から自動的にPR作成までも自作できてしまいます。

Slackでのバグ報告: 「ユーザー一覧でソートが効かない」

[自動化フロー]
1. Slack MCPがメッセージを検知
2. GitHub MCPでIssueを自動作成
3. Claude Codeが該当コードを調査
4. 修正案を含むPRを自動生成
5. Slackに修正PR のリンクを通知

MCPを使いこなすためのコツ

各サービスの「得意分野」を活かす指示の出し方

❌ 悪い例：

「データベースを作って」（どのMCPを使うか不明確）

⭕ 良い例：

「Supabase MCPでユーザーテーブルを作成し、PostgreSQL Pro MCPで
パフォーマンステストをして、最適なインデックスを設定して」

連携時の注意点

認証情報の管理：各MCPサーバーの認証情報は環境変数で安全に管理
開発/本番の分離：PostgreSQL Pro MCPは開発環境のみで使用
エラーハンドリング：サービス間連携でのエラーを想定した実装

トラブルシューティング

# MCP接続確認
claude mcp list

# ログ確認
claude mcp logs supabase

# 再起動
claude mcp restart postgres-pro

まとめ：つながることで広がる可能性

MCP によって、今まで個別に使っていたツールが AI を介してシームレスにつながる時代が来ました。

開発スピードの向上：ツール切り替えの時間がゼロに
品質の向上：AIが一貫性を保証
創造性への集中：面倒な連携作業から解放

これは単なる効率化ではありません。AI と人間が、それぞれの得意分野で協力する新しい開発スタイルの始まりです。

今回紹介した MCP サーバーは、すぐに試せるものばかりです。まずは一つ、あなたの開発フローに組み込んでみてください。きっと、その便利さに驚くはずです。

さあ、AI がつなぐ新しい開発体験を始めましょう！

Happy Hacking!!🐙

株式会社 OCT-PATH では、AI・Web3 を活用したシステム開発を行っています。「AI で業務効率化したい」「Web3 プロダクトを作りたい」などのご相談がございましたら、ぜひお気軽にお声がけください！

また、インドネシアの AI・Web3 に強い若手エンジニアが集まる「NeoTechPark」というコミュニティを運営しております。私達はグローバルな人材発掘と最新技術の実用化に繋がるイベントを企画・運営しています。彼らが参加する、AI 技術をテーマに共同ハッカソンを開催しませんか？

お問い合わせ・ご相談は弊社ホームページよりお待ちしております！

はじめに

MCPの本質：AIが実現する「つながる開発」

MCPは、AIに外部サービスへの「扉」を開く技術

今までとの違い：複数サービス間をAIがシームレスに行き来

開発者のメリット：コンテキストを保ったまま複数ツールを活用

実践編：AIがつなぐ5つのサービス連携術

3.1 Supabase MCP：データベースとコードの垣根をなくす

設定方法

実例：「このテーブル構造に合わせたCRUD APIを作って」

3.2 PostgreSQL Pro MCP：開発環境DBを賢く活用

設定方法（Dockerを使った簡単セットアップ）

活用例：テストデータ生成とパフォーマンス最適化

3.3 Playwright MCP：UIとテストをAIがつなぐ

設定方法

実例：画面を見ながらE2Eテスト生成

3.4 GitHub MCP：コードとプロジェクト管理の架け橋

設定方法

活用例：コミットからリリースノートまで一貫管理

3.5 Context7 MCP：最新ドキュメントと実装をリアルタイム連携

設定方法

実例：新しいフレームワークでも確実な実装

連携の実例：こんな開発ができる

Notion → Figma → コード生成の流れ

Slack通知 → GitHub Issue → 自動修正PRの連携

MCPを使いこなすためのコツ

各サービスの「得意分野」を活かす指示の出し方

❌ 悪い例：

⭕ 良い例：

連携時の注意点

トラブルシューティング

まとめ：つながることで広がる可能性

Discussion