xDev Asia

モデルコンテキストプロトコル (MCP) とは何ですか。 VS Code に MCP サーバーをインストールします。 Figma MCP、GitHub MCP、データベース MCP。カスタム MCP サーバーを作成します。セキュリティに関する考慮事項。実際の使用例: デザインからコードまで、DB クエリ、API 統合。自動化のための Copilot フック。

GitHub Copilot を使用した Vibe コーディング: 基本から高度まで

パート 4: コパイロットのカスタマイズと拡張

xdev.asia

1. モデルコンテキストプロトコル (MCP) とは何ですか?

MCP AI エージェントが通信できるようにする標準プロトコルです。 外部ツールとサービス。統合コードを自分で記述する代わりに、MCP サーバーをインストールして Copilot の機能を拡張します。

┌─────────────────────────────────────────────────┐
│              MCP ARCHITECTURE                    │
├─────────────────────────────────────────────────┤
│                                                  │
│  ┌──────────┐     ┌────────────┐                │
│  │ Copilot  │────▶│ MCP Server │                │
│  │ Agent    │◀────│ (Figma)    │                │
│  └──────────┘     └────────────┘                │
│       │                                          │
│       │           ┌────────────┐                │
│       └──────────▶│ MCP Server │                │
│       ◀───────────│ (Database) │                │
│                   └────────────┘                │
│       │                                          │
│       │           ┌────────────┐                │
│       └──────────▶│ MCP Server │                │
│       ◀───────────│ (GitHub)   │                │
│                   └────────────┘                │
│                                                  │
│  Copilot dùng tools từ MCP servers              │
│  như dùng built-in tools                        │
│                                                  │
└─────────────────────────────────────────────────┘

2. VS Code に MCP サーバーをインストールする

2.1. settings.json での構成

{
  "mcp": {
    "servers": {
      "figma": {
        "command": "npx",
        "args": ["-y", "@anthropic/mcp-server-figma"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "${env:FIGMA_ACCESS_TOKEN}"
        }
      },
      "github": {
        "command": "npx",
        "args": ["-y", "@anthropic/mcp-server-github"],
        "env": {
          "GITHUB_TOKEN": "${env:GITHUB_TOKEN}"
        }
      },
      "postgres": {
        "command": "npx",
        "args": ["-y", "@anthropic/mcp-server-postgres"],
        "env": {
          "DATABASE_URL": "${env:DATABASE_URL}"
        }
      }
    }
  }
}

2.2.プロジェクトごとの構成 (.vscode/mcp.json)

{
  "servers": {
    "project-db": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-server-postgres"],
      "env": {
        "DATABASE_URL": "postgresql://dev:password@localhost:5432/myapp_dev"
      }
    }
  }
}

3. 人気のある MCP サーバー

3.1. Figma MCP — デザインからコードまで

Figma を Copilot に接続して、設計をコードに変換します。

// Prompt ví dụ:
Look at the Figma design for the login page and create
a React component that matches it exactly.
Use TailwindCSS for styling.

2026 年 3 月: Figma MCP サーバーの可能性 VS Code から直接デザインレイヤーを生成。

3.2. GitHub MCP — リポジトリ操作

// Copilot có thể:
- Tìm và phân tích issues
- Đọc pull request comments
- Tạo issues từ code analysis
- Review PR changes

3.3.データベース MCP — クエリとスキーマ

// Prompt ví dụ:
Show me the schema of the users table and write a query
to find all users who registered in the last 30 days
but haven't made any purchases.

3.4.他の MCP サーバー

MCPサーバー	機能
ファイルシステム	ワークスペース外のファイルの読み取り/書き込み
ブレイブサーチ	Copilot 内からの Web 検索
人形遣い	ブラウザの自動化とスクリーンショット
たるみ	Slack からメッセージを送信し、問題を作成する
記憶	会話の永続的な記憶
GitKraken	高度な Git 操作

4. カスタム MCP サーバーの作成

内部ツール用に別の MCP サーバーを作成できます。

// custom-mcp-server/index.ts
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';

const server = new Server({
  name: 'internal-api',
  version: '1.0.0',
}, {
  capabilities: {
    tools: {},
  },
});

// Register tool
server.setRequestHandler('tools/list', async () => ({
  tools: [{
    name: 'get_customer',
    description: 'Lấy thông tin khách hàng từ CRM',
    inputSchema: {
      type: 'object',
      properties: {
        customerId: { type: 'string', description: 'Customer ID' },
      },
      required: ['customerId'],
    },
  }],
}));

server.setRequestHandler('tools/call', async (request) => {
  if (request.params.name === 'get_customer') {
    const { customerId } = request.params.arguments;
    // Call internal API
    const customer = await fetchCustomer(customerId);
    return { content: [{ type: 'text', text: JSON.stringify(customer) }] };
  }
});

const transport = new StdioServerTransport();
await server.connect(transport);

5. コパイロットフック — ライフサイクルイベントでの自動化

フックを使用すると、特定のイベントでカスタムコマンドを実行できます。

{
  "github.copilot.chat.hooks": {
    "postSave": [
      {
        "command": "npm run lint:fix",
        "pattern": "**/*.{ts,tsx}"
      }
    ],
    "postCreate": [
      {
        "command": "npx prettier --write",
        "pattern": "**/*.{ts,tsx,css}"
      }
    ]
  }
}

フックにより AI コードが常に生成されるようにする フォーマットとリントを自動的に行う。

6. セキュリティに関する考慮事項

⚠️ MCP サーバーには強力なアクセス権があります。

データベース MCP: データベースの読み取り/書き込みが可能 → 開発データベースでのみ使用
ファイルシステム MCP: ワークスペース外のファイルにアクセス可能
MCP API: 資格情報を使用して外部 API を呼び出すことができます

ベストプラクティス:

使用する 環境変数 ハードコードではなく秘密の場合
範囲を制限する: MCP サーバーに必要な権限のみを付与します
MCP ソースを確認する: インストールする前に MCP サーバーコードを確認してください
別々の環境: 開発データベースは実稼働データベースとは異なります
監査ログ: MCP サーバーのアクティビティを監視します

7. まとめ

MCP サーバーは Copilot を コードジェネレーター に フル開発アシスタント 設計ツール、データベース、API、外部サービスと対話できます。

MCPサーバー	Vibe コーディングの使用例
フィグマ	「このデザインをビルドする」 → コード
データベース	「このスキーマの API を作成」 → 完全な CRUD
GitHub	「自分に割り当てられた問題を修正する」 → 自動実装
カスタム	「CRMとの統合」 → ドメイン固有のツール

パート 5 からは、学んだすべての知識を応用していきます 実戦プロジェクト — Vibe コーディングを使用して完全なフルスタックアプリを構築します。

レッスン 13: MCP サーバー — AI を外部世界に接続する

1. モデル コンテキスト プロトコル (MCP) とは何ですか?