日本の大手 IT 企業であるサイバーエージェントは、人気の高い Ameba ブログ プラットフォームをはじめ、幅広いオンライン サービスを提供しています。チームは、自動テストでは検出が難しく、時間のかかる手動介入が必要となるランタイム エラーという大きな課題に直面していました。
このドキュメントでは、CyberAgent が Chrome DevTools Model Context Protocol（MCP）サーバーを使用して手動プロセスから自動化されたワークフローに移行し、デベロッパーの時間を節約してテストフローの信頼性を向上させた方法について説明します。
課題: 手動で制限のあるワークフロー
Ameba のデザイン システムである Spindle は、ブログ プラットフォームのインターフェースを構築するために使用される再利用可能な UI コンポーネントのコレクションです。UI コンポーネントの開発とテストに Storybook を使用します。
以前、CyberAgent のランタイム エラーに対処するワークフローは、繰り返し手動で行うサイクルでした。デベロッパーはブラウザで各コンポーネントを確認し、修正を適用してから再度確認します。ページとコンポーネントの数が多いため、目視確認には限界があり、すべてのバグを検出することは困難でした。
解決策: Chrome DevTools MCP を使用してエージェントをデバッグする
この課題を克服するため、チームは Chrome DevTools MCP サーバーに目を向けました。公式オンボーディング ガイドを使用して簡単にセットアップした後、AI エージェント（Claude）にデバッグ ワークフロー全体の自動化をすぐに指示できるようになりました。
エージェントは、単一のプロンプトで、Chrome DevTools MCP によってキャプチャされたブラウザの状態情報を処理し、ファイル システム コンテキストにアクセスしてコンソールログを読み取ることで、DevTools とやり取りできます。その後、エラーを自律的に特定し、手動による介入なしに修正を実装しました。
使用した最初のプロンプトは次のとおりです。
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
AI エージェントは Storybook インスタンスの監査に進み、すべてのストーリーをナビゲートしてエラーを読み取り、コード修正を適用して、各修正の成功を確認しました。
影響: 手動チェックから自動修正へ
結果はすぐに表れました。約 1 時間で、AI エージェントは Spindle デザイン システムの 32 個のコンポーネントと 236 個のストーリーをすべて自動的に監査しました。
エージェントは 1 つのランタイム エラーと 2 つの警告を特定して修正しましたが、テストの真の価値は、否定の保証にありました。つまり、開発者が数百の状態を手動でクリックする必要なく、ライブラリの大部分がエラーのないことを確認できたのです。
以前は、このような包括的な監査は視覚的に疲労しやすく、人的ミスが発生しやすいものでした。この作業を Chrome DevTools MCP にオフロードすることで、CyberAgent は次のことを実現しました。
- 監査範囲 100%: エージェントがすべてのストーリーを機械的に検証し、「クリーン」なコンポーネントが実際にクリーンであることを確認しました。これは、手動では維持が難しいレベルの厳密さです。
- 誤検出なし: 視覚的なランタイム異常を見逃す可能性がある自動テストスイートとは異なり、MCP サーバーを使用すると、エージェントは実際のブラウザの状態を検証できるため、信頼性が高くなります。
- 認知オフロード: デベロッパーは、反復的な「雑用」をシステムに任せ、ルーティン チェックではなく複雑なロジックに集中できます。
ウェブ デベロッパーの Kota Yanagi 氏が指摘したように、責任の移行がメリットでした。
「以前はブラウザで手動で行っていたランタイム エラーと警告のチェックをオフロードできるので、とても便利です。また、複雑なオペレーションを自然言語で記述し、ツールがエラーログの読み取りから問題の修正までを直接実行できる点も気に入っています。」
この自動化されたワークフローの成功により、CyberAgent は AI エージェントの内部スピンドル エージェント ガイドを更新しました。このガイドでは、Chrome DevTools MCP を AI エージェント Claude のデフォルトのデバッグ サーバーとして確立し、ベスト プラクティスとしての使用を正式に定め、この新しい AI 搭載プロセスに対する信頼を示しています。
具体的な修正は 2 つの pull リクエストで実装されました。GitHub で確認できます。
CyberAgent はプロンプトをさらに改良し、この最終出力を公開しました。
フィードバックと今後の計画
CyberAgent は、Chrome DevTools MCP で利用できる柔軟性とオプションの数に満足していました。また、このツールは強力だが、高度な機能を使用するにはある程度のユーザー知識が必要であるという貴重なフィードバックもいただきました。
今後、チームは DevTools の [パフォーマンス] パネルとの統合を深めることを検討しています。エージェントが Core Web Vitals を検証し、[パフォーマンス] パネルを使用してより詳細なパフォーマンス分析に進み、改善策を分析して提案するワークフローを想定しています。
CyberAgent のデベロッパー エキスパートである原 一成氏は、このツールの効率性と将来のアプリケーションの可能性を強調し、驚きを語っています。
「ブラウザがログから直接エラーを自動的に修正しているのを見て、驚きました。これまで見落とされたり、時間がかかったりしていたタスクを確実に自動化できるようになり、開発効率が向上します。Chrome DevTools MCP は実際のランタイム環境で多くの機能を提供するため、今後さまざまな状況で役立つと期待しています。」
まとめ
Chrome DevTools MCP をワークフローに統合することで、CyberAgent は複雑で時間のかかるデバッグ タスクを自動化することに成功しました。この経験は、デベロッパーの生産性を高める AI 搭載ツールの大きな可能性を示しています。
このプロセスは完全に自動化され、手動チェックの必要がなくなり、エラーの見落としもなくなりました。現在の実装でもすでにその価値は証明されていますが、CyberAgent からのフィードバックは、Chrome DevTools MCP がブラウザ内でより高度なパフォーマンス分析と最適化タスクを直接実行できる、エキサイティングな未来を浮き彫りにしています。