『実践Claude Code入門』を読みながらDev Container環境でPlaywright MCPを動かしてみた

• URL: https://zenn.dev/unsoluble_sugar/articles/c1002e60e2fb8b
• 日付: 2026-06-26
• Tier: Tier 3
• 要旨: 書籍『実践Claude Code入門』第3章を参照しながら、Dev Container環境でPlaywright MCPを動かした手順を記録した実践記事。Chromiumの未インストールや日本語フォント欠如などのエラーをClaude Codeが自律的に検知・修正しながら進む様子が紹介されている。ブラウザ操作、スクロール、スクリーンショット取得まで自然言語で指示できることが確認され、簡易E2Eテストへの応用可能性も示唆されている。

詳細

Dev Container環境でPlaywright MCPを動かした手順記録。書籍『実践Claude Code入門』第3章のハンズオン。

• .devcontainer/.mcp.jsonにPlaywright MCPサーバーを定義し、Claude Code起動時に有効化するとsettings.local.jsonに設定が保存される
• 初回実行でChromiumが未インストールのエラーが発生したが、Claude Codeが自動でインストール処理を進めた
• Dev Container環境に日本語フォントがなくスクリーンショットが文字化けしたため、fonts-noto-cjkとfonts-ipafont/fonts-ipaexfontをインストールして解消
• ページ遷移・要素クリック・JavaScriptスクロール・スクリーンショット取得を自然言語の指示で実行できることを確認
• 簡易E2Eテストへの応用が現実的な範囲で可能と著者が評価
• 書籍で紹介されているMCPサーバー：Context7 MCP（最新ドキュメント提供）、Serena MCP（コーディングエージェントツールキット）