ChromeDevTools_MCPを活用したフロントエンド開発

Transcript

1. ChromeDevTools(MCP) を活用したフロントエンド開発 くらっち 2025.10.23 1
2. くらっち • 2024年：内定、内定者アルバイト • 2025年：サイボウズ入社 • 現在：開発本部 kintone(開発) アプリ設定チーム プロダクトエンジニア 東京オフィス所属 自己紹介 2
3. 3 01 02 03 04 05 06 コンセプト Chrome DevTools(MCP)で出来ること Claude Codeで動かしてみる 今回取り上げる内容 実践 動作確認から得られたもの P04 P05 P06 P07 P11 P24 目 次
4. • 誰に対して • Chrome DevTools(MCP) を触り始めている • パフォーマンス改善以外の活用方法が気になっている • どうなって欲しいか • Chrome DevTools(MCP)活用の幅が広がった！ コンセプト 4
5. Chromeで入力、ページ遷移、パフォーマンス改善、デバッグなどが可能 • Input automation • Navigation automation • Emulation • Performance • Network • Debugging Chrome DevTools(MCP)で出来ること 5
6. GitHubにアクセスしてほしいと依頼し、意図したとおりの挙動をしたことを確認 Claude Codeで動かしてみる 6
7. アプリケーションを操作する機能に注目 • Input automation / Navigation automation / Debugging • パフォーマンス改善に関する記事をよく見かけたのでパフォーマンスは割愛 • DOMやページ操作に関する内容が気になる 今回取り上げる内容 7
8. 入力やクリック、ドラッグなどの操作など、7つの操作が可能 1. click 2. drag 3. fill 4. fill_form 5. handle_dialog 6. hover 7. upload_file Input automation 8
9. ページを開く、閉じる、遷移など7つの操作が可能 1. close_page 2. list_pages 3. navigate_page 4. navigate_page_history 5. new_page 6. select_page 7. wait_for Navigation automation 9
10. JavaScriptの関数を実行、ログの取得、スクリーンショットの撮影など5つの操作が可能 1. evaluate_script 2. get_console_message 3. list_console_messages 4. take_screenshot 5. take_snapshot Debugging 10
11. 学生時代に開発したアプリで動作確認 実践 11
12. 下記をファイルに記載してClaudeに投げる • 1. http://localhost:8081/itap/v1/ownerにアクセス • 2. SwitchBotAPIのToken:のinputに`env`ファイルのSWITCHBOT_TOKENの値を入力 • 3. SwitchBotAPIのSecret:のinputに`env`ファイルのSWITCHBOT_SECRETの値を入力 • 4. 「デバイスの取得」ボタンをクリック • 5. 画面のスクリーンショットを撮影 • 6. スクリーンショットを`screen_shot`ディレクトリに保存 • 7. スナップショットを撮影 プロンプト: screenshot.mdの指示を順に実行してください。 Claudeに投げる内容 12
13. 指定したページにアクセスしてほしいとClaudeに投げる（http://localhost:8081/itap/v1/owner） 指定したページにアクセス出来る 13
14. 指定したページにアクセスしたことを確認（http://localhost:8081/itap/v1/owner） 指定したページにアクセス出来る 14
15. 対象のinputに提示した値を入力してほしいとClaudeに投げる フォームの自動入力が出来る 15
16. Claudeに依頼した内容が正確に入力されていることを確認 フォームの自動入力が出来る 16
17. ボタンのクリックが出来る 17 対象のボタンをクリックしてほしいとClaudeに投げる
18. ボタンのクリックが出来る 18 ボタンがクリックされ、対象の画面が表示されたことを確認（「デバイスを取得」ボタン以下が描画）
19. スクリーンショットが撮影出来る 19 遷移画面のスクリーンショットを取ってほしいとClaudeに投げる
20. スクリーンショットが撮影出来る 20 画面のスクリーンショットが保存されたことを確認
21. スナップショットを作成・出力出来る 21 画面のスナップショットが出力されたことを確認
22. 複数タブでの実行が出来る 22 複数ファイルの内容を複数タブで実行してほしいと依頼
23. 複数タブでの実行が出来る 23 複数タブで実行していることを確認
24. 活用出来そうなこと • QAの効率化 • 動作環境の自動作成 • フォームの自動入力やファイルアップロード。jsの実行が出来るため、データ作成が必要な環境を自動で作成可能 • 複数タブでの並列実行 • 複数タブで動作出来るため、複数のテストを同時に実行可能 人の確認が必要なタイミング • URLにアクセスする時 • インシデントを防ぐため • MCPの動作に許可が必要になると、MCPを使った操作に時間がかかる • 活用できそうなことに記載したことがメリットではなくなることも考えられる 動作確認から得られたもの 24
25. ご静聴ありがとうございました！ 25