🔌

Claude Code 実践検証 Day 19｜MCP統合の基礎―CLIで足りないときだけ使う

に公開
Windows
Playwright
Model Context Protocol
Claude Code
tech

Claude Code 実践検証 Day 19｜MCP統合の基礎―CLIで足りないときだけ使う

MCPとは何か

MCPは外部サービスやツールをClaude Codeに接続するための仕組みです。

「ブラウザを操作したい」「外部APIと連携したい」といった場面で使います。今回はPlaywright MCPを例に、Windows環境での設定方法を解説します。

私は「CLIで代替できるものはCLI、CLIでは不可能なものだけMCP」という使い分けにしています。理由は透明性です。CLIならコマンドがそのまま見えますが、MCPは内部で何が起きているか見えにくいからです。なお、Day 20の検証でMCP利用時の透明性の確保方法を詳しく扱います。

MCPを使うべき場面

ユースケース CLI MCP 推奨
git操作 ✅ git status △ CLI
GitHub操作 ✅ gh pr list △ CLI
ファイル操作 ✅ ls, cat △ CLI
ブラウザ操作 ❌ ✅ Playwright MCP
OAuth認証連携 △ ✅ MCP

原則: CLIで実現可能ならCLI。CLIでは困難または不可能な場合にMCP。

Playwright MCPの設定（Windows環境）

1. 設定ファイルを作成

プロジェクトルートに .mcp.json を作成します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

この設定で動作しました。公式ドキュメントでは cmd /c ラッパーが推奨されていますが、環境によっては不要な場合もあります。動作しない場合は以下を試してください。

{
  "mcpServers": {
    "playwright": {
      "command": "cmd",
      "args": ["/c", "npx", "@playwright/mcp@latest"]
    }
  }
}

重要: .claude/.mcp.json ではなく、プロジェクトルート直下に配置してください。.claude/ 内に置くと読み込まれません。

2. 接続確認

claude mcp list

以下のように表示されれば成功です。

playwright: npx @playwright/mcp@latest - ✓ Connected

3. 動作確認

Claude Codeを起動して、以下のように指示します。

Googleのトップページを開いて、タイトルを教えてください

ブラウザ（Chrome）が起動し、結果が返ってくれば設定完了です。

Windows環境での注意点

警告は無視してOK

/mcp コマンドを実行すると、以下の警告が表示されます。

[Warning] Windows requires 'cmd /c' wrapper to execute npx

この警告が出ても動作は正常です。無視して問題ありません。

設定ファイルの配置場所

配置場所 読み込み
プロジェクトルート .mcp.json ✅
.claude/.mcp.json ❌ 読み込まれない

公式ドキュメントには .claude/.mcp.json も可能と書かれていますが、実際には読み込まれませんでした。プロジェクトルート直下に配置してください。

ブラウザの挙動

Playwright MCPで起動するブラウザには、いくつか特徴があります。

項目 挙動
ブラウザ Google Chrome（ヘッドフル）
プロファイル 隔離された新規プロファイル
ログイン状態 保持されない（未ログイン状態）
終了タイミング Claude Codeをexitすると終了

セッションごとにクリーンな状態で起動するため、ログイン状態を維持した操作には向きません。一方で、テスト用途やスクレイピングには適しています。

検証環境

項目 値
OS Windows 11 Pro
Claude Code 1.0.29
シェル Git Bash
検証日 2025-12-20

この基礎を使うと

Playwright MCPを設定すれば、「このURLを開いて内容を確認して」といった指示でブラウザ操作ができるようになります。CLIでは不可能だったWebページの確認やフォーム操作が可能になります。

シリーズを追いかける

12月25日まで毎日更新。フォローしておくと通知が届きます。

→ 著者ページ（Zenn）

次回：Day 20「MCP検証―透明性確保とデバッグの実態」

Discussion