CodeCraft Lab

開発に役立つMCPサーバーを導入する

GitHub・Slack・データベース等のMCPサーバーの導入手順と活用例を紹介します

ふつう11分で読了
MCPGitHubSlackデータベース

はじめに

MCPサーバーの基本的な設定方法を理解したら、次は実際の開発で役立つサーバーを導入してみましょう。GitHub、Slack、データベースなど、日常的に使うツールをClaude Codeから直接操作できるようになると、コンテキストスイッチが減り、開発フローが大幅に効率化されます。

このレシピでは、開発チームにおすすめのMCPサーバー5つを紹介し、それぞれのセットアップ手順と活用シーンを解説します。

おすすめMCPサーバー5選

サーバー用途トランスポート認証方法
GitHub MCPIssue・PR操作、コードレビューHTTP個人アクセストークン
Slack MCPメッセージ送信、チャンネル閲覧HTTPOAuth
PostgreSQL/MySQL MCPデータベースクエリ、スキーマ確認stdio接続文字列
Fetch MCPWeb APIの呼び出し、データ取得stdio不要
Figma MCPデザインデータの参照HTTPアクセストークン
選定のポイント

まずは自分が最も頻繁にブラウザで確認しているサービスから導入するのがおすすめです。「ブラウザとターミナルを行き来する回数」が最も多い作業こそ、MCPの恩恵を受けやすい領域です。

各MCPサーバーのセットアップ

1. GitHub MCP

GitHubのIssue確認、PR作成・レビュー、コード検索などをClaude Codeの会話内から行えます。

個人アクセストークンを取得する

GitHub Token設定ページを開き、Fine-grained personal access tokenを作成します。操作したいリポジトリへのアクセス権限を付与してください。

MCPサーバーを追加する

取得したトークンを使ってサーバーを登録します。

claude mcp add --transport http github \
  https://api.githubcopilot.com/mcp/ \
  --header "Authorization: Bearer YOUR_GITHUB_TOKEN"

YOUR_GITHUB_TOKEN は実際のトークンに置き換えてください。

動作を確認する

Claude Codeを起動して、GitHub関連の操作を試します。

自分に割り当てられているオープンなPRを一覧表示してください

活用シーン:

PR #123 の変更内容をレビューして、改善点があればコメントしてください
「ログイン時のバリデーションエラー」というタイトルで新しいIssueを作成してください。
再現手順と期待する動作を含めてください

2. Slack MCP

チャンネルの閲覧やメッセージの送信がClaude Codeから直接行えます。レビュー依頼やデプロイ通知の送信に便利です。

MCPサーバーを追加する

SlackのリモートMCPサーバーに接続します。

claude mcp add --transport http slack https://mcp.slack.com/mcp

OAuth認証を行う

Claude Codeを起動し、/mcp コマンドからSlackサーバーを選択して認証します。ブラウザが開くので、Slackワークスペースへのアクセスを許可してください。

動作を確認する

#general チャンネルの最近のメッセージを5件表示してください

活用シーン:

#dev-team チャンネルに「認証モジュールのリファクタリングPRを作成しました。
レビューをお願いします: https://github.com/...」と投稿してください

3. PostgreSQL / MySQL MCP

データベースに直接接続し、スキーマの確認やクエリの実行がClaude Codeから行えます。

MCPサーバーを追加する

接続文字列を使ってデータベースMCPサーバーを登録します。

claude mcp add --transport stdio database -- \
  npx -y @bytebase/dbhub \
  --dsn "postgresql://readonly_user:password@localhost:5432/mydb"

動作を確認する

データベースに接続して、usersテーブルのスキーマを表示してください
データベース接続の安全性

本番データベースに接続する場合は、必ず読み取り専用のユーザーを使用してください。Claude Codeが意図しないUPDATEやDELETEを実行するリスクを排除できます。接続文字列はコミットせず、環境変数で管理しましょう。

.mcp.json で環境変数を使った設定例:

{
  "mcpServers": {
    "database": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@bytebase/dbhub", "--dsn", "${DATABASE_URL}"],
      "env": {}
    }
  }
}

活用シーン:

過去30日間で最も注文数が多いユーザーのトップ10を取得してください
ordersテーブルのスキーマを確認して、
新しい「discount_code」カラムを追加するマイグレーションを作成してください

4. Fetch MCP

外部APIからデータを取得したり、Webページの内容を取り込んだりできるシンプルなMCPサーバーです。

MCPサーバーを追加する

claude mcp add --transport stdio fetch -- \
  npx -y @anthropic-ai/mcp-fetch

動作を確認する

fetchを使って https://api.github.com/zen からGitHubの格言を取得してください

活用シーン:

https://api.example.com/v1/products のレスポンスを確認して、
それに対応するTypeScriptの型定義を作成してください
fetchを使ってライブラリのドキュメントを読み、
使い方の例をコードに組み込んでください

5. Figma MCP

Figmaのデザインデータを参照して、デザインに忠実なUI実装を支援します。

アクセストークンを取得する

Figmaの設定画面から個人アクセストークンを作成します。

MCPサーバーを追加する

claude mcp add --transport http figma \
  https://mcp.figma.com/mcp \
  --header "Authorization: Bearer YOUR_FIGMA_TOKEN"

動作を確認する

Figmaのデザインファイルからログイン画面のコンポーネントを確認してください

活用シーン:

Figmaの最新デザインを参照して、ボタンコンポーネントのCSSを
デザインに合わせて更新してください

活用シーン別の使い方

Issue駆動開発

GitHub MCPを使って、Issueの内容を読み取りから実装、PR作成までを一気通貫で行えます。

GitHub Issue #42 の内容を確認して、そこに記載されたバグを修正してください。
修正後はテストを追加し、PRを作成してください。
PRの説明にはIssueへのリンクを含めてください。

データベース設計の検討

データベースMCPを使って、既存のスキーマを確認しながら設計を進められます。

データベースのスキーマを確認してください。
新しい「notifications」テーブルを追加したいのですが、
既存のusersテーブルとの関連を考慮した設計を提案してください。
マイグレーションファイルも作成してください。

コードレビューと通知の連携

GitHub MCPとSlack MCPを組み合わせて、レビュー結果を自動通知できます。

PR #78 の変更をレビューして、問題がなければApproveしてください。
レビュー結果の要約を #code-review チャンネルに投稿してください。

複数MCPサーバーの同時利用

複数のMCPサーバーを.mcp.jsonにまとめて定義することで、1つのセッションからすべてのサービスにアクセスできます。

{
  "mcpServers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer ${GITHUB_TOKEN}"
      }
    },
    "slack": {
      "type": "http",
      "url": "https://mcp.slack.com/mcp"
    },
    "database": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@bytebase/dbhub", "--dsn", "${DATABASE_URL}"]
    },
    "fetch": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-fetch"]
    }
  }
}
MCPサーバーの数とコンテキスト

多くのMCPサーバーを接続するとClaude Codeのコンテキストウィンドウを消費します。Claude Codeにはツール検索機能が搭載されており、必要なツールだけをオンデマンドで読み込む仕組みになっているため、通常は問題になりませんが、実際に使うサーバーだけを接続することをおすすめします。

応用テクニック

チーム全体で設定を共有する

.mcp.json をリポジトリにコミットすれば、チーム全員が同じMCPサーバーを利用できます。ただし、認証情報は環境変数で管理し、各メンバーが自分のトークンを設定する運用にしましょう。

# チームメンバーは各自の環境で設定
export GITHUB_TOKEN="ghp_xxxxx"
export DATABASE_URL="postgresql://readonly:pass@db.example.com:5432/app"

MCPサーバーの検索

Anthropic Directoryで、レビュー済みのMCPサーバーを検索できます。Claude Codeのセッション内からも、MCPサーバーの検索と追加が可能です。

claude mcp add --transport http サーバー名 サーバーURL

まとめ

  • 開発で頻繁に使うサービスからMCPサーバーを導入し、コンテキストスイッチを減らす
  • GitHub、Slack、データベース、Fetch、FigmaのMCPサーバーで日常の開発フローを効率化できる
  • .mcp.json でチーム共有し、認証情報は環境変数で個別管理する
  • 複数のMCPサーバーを組み合わせることで、Issue起票からコード修正、レビュー、通知までを一気通貫で行える