Claude in Chromeで始める自律的フロントエンド開発

"AI時代の開発高速化スペシャル by クラスメソッド" で発表した内容です
https://classmethod.connpass.com/event/379550/

デモ動画はこちらから閲覧できます
https://drive.google.com/file/d/1p3onrIo2B2p2-o9_CZj3rMhqd5W1F1dB/view

Transcript

1. Claude in Chromeで始める ⾃律的フロントエンド開発 クラスメソッド株式会社 マッハチーム morimorikochan
2. 名前 morimorikochan 所属 クラスメソッド    マッハチーム🚀 担当 今はバックエンド 趣味  X @marooon88 ⾃⼰紹介
3. 1. Claude Codeとは 2. Claude in Chrome とは 3. Claude in Chromeの何がすごい？ 4. デモ 5. 案件で活⽤した話 6. まとめ 📃⽬次
4. Anthropic公式のエージェント型コーディングツール • ターミナルやIDEでClaudeと対話しながらプログラム開発ができる • Proプラン以上で利⽤可能 • MCP/Skills/Subagents/Rulesなどの機能を使ってカスタマイズで きる 👀Claude Codeとは
5. 👀Claude Codeとは
6. ClaudeがChromeを直接操作できるChrome拡張機能 • 2025年12⽉にベータ版が有料ユーザーに公開 • 主に2つの機能 1. Chrome内のサイドバーで指⽰を出せる 2. Claude Codeからブラウザ操作ができる 🙄Claude in Chrome とは
7. 🙄Claude in Chrome とは 引⽤元: Claude in Chrome | Claude 1. Chrome内のサイドバーで指⽰を出せる
8. ClaudeがChromeを直接操作できるChrome拡張機能 • 2025年12⽉にベータ版が有料ユーザーに公開 • 主に2つの機能 1. Chrome内のサイドバーで指⽰を出せる 2. Claude Codeからブラウザ操作ができる ←今⽇のトピック 🙄Claude in Chrome とは
9. 🙄デモ
10. ボトルネックだった動作確認（と付随する修正）もClaude Codeに任 せられるようになった • [今まで] Claude Codeが書いたコードを⼈間が動作確認 ◦ ⼈間がボトルネックになりPDCAが回りにくい ◦ MTG前に回して、MTG後に動作確認したら不具合だらけだった🥺 • Claude Code⾃⾝が動作確認する能⼒を⼿に⼊れた ◦ ⾃律的に不具合に気付き修正する ◦ ⼀連のPDCAが回る ◦ ※⼈間の動作確認が0になるわけではない 🙄Claude in Chromeの何がすごい？ ※Webのフロントエンド開発においての話
11. 従来のブラウザを操作するMCPと⽐べてココがすごい • 従来 ◦ 認証情報を維持できず、cookieや各種Storageのセットアップが必要 ◦ （Chromium系ブラウザの場合）インストールに必要な容量が⼤きい • Claude in chrome ◦ 普段使っているChromeを操作 ◦ 認証情報を維持したまま操作可能 ◦ 軽量 ◦ GIF録画ができる 🙄Claude in Chromeの何がすごい？
12. GIF録画 🙄Claude in Chromeの何がすごい？ 操作内容やインジケーターが 記載されてる
13. Claude in Chrome(MCP)が提供する操作 • javascript_tool • read_page • find • form_input • computer • navigate • resize_window • gif_creator • upload_image 🙄Claude in Chromeの何がすごい？ • get_page_text • tabs_context • tabs_create • update_plan • read_console_messages • read_network_requests • shortcuts_list • shortcuts_execute
14. React/TypescriptのSPA開発 • Vercelのv0で作られたモックコード（Next.js）があり、APIサーバー⾃体は完成 済み • 各機能/画⾯ごとにやるタスク 1. Next.jsからReactへ置換 2. ルーティングの設定 3. api呼び出しhooks作成 4. ローディング制御‧エラー制御 5. mswを使ったモック実装 6. （モック有り）動作確認+不具合修正 7. （モックなし/APIサーバーと接続）動作確認+不具合修正 🙄案件で活⽤した話
15. いままで 1. 🤖Next.jsからReactへ置換 2. 🤖ルーティングの設定 3. 🤖api呼び出しhooks作成 4. 🤖ローディング制御‧エラー制御 5. 🤖mswを使ったモック実装 6. ✍（モック有り）動作確認+不具合修正 7. ✍（モックなし/APIサーバーと接続）動作確認+不具合修正 🙄案件で活⽤した話
16. Claude in Chromeあり 1. 🤖Next.jsからReactへ置換 2. 🤖ルーティングの設定 3. 🤖api呼び出しhooks作成 4. 🤖ローディング制御‧エラー制御 5. 🤖mswを使ったモック実装 6. 🤖（モック有り）動作確認+不具合修正 7. 🤖（モックなし/APIサーバーと接続）動作確認+不具合修正 8. ✍少しだけ動作確認+少しの不具合修正 🙄案件で活⽤した話
17. Claude in Chromeあり 1. 🤖Next.jsからReactへ置換 2. 🤖ルーティングの設定 3. 🤖api呼び出しhooks作成 4. 🤖ローディング制御‧エラー制御 5. 🤖mswを使ったモック実装 6. 🤖（モック有り）動作確認+不具合修正 7. 🤖（モックなし/APIサーバーと接続）動作確認+不具合修正 8. ✍少しだけ動作確認+少しの不具合修正 あらかたの不具合が先に修正されていて happy 🙄案件で活⽤した話
18. 指⽰内容 PlanMode + Opus4.5 + Thinking /frontend XXX登録画⾯とXXX更新画⾯を実装して。 動作確認は以下の通り - 必須項⽬を全て⼊⼒し登録すると正常に登録され⼀覧画⾯に遷移し、⼀覧に表⽰さ れてること - 未⼊⼒の必須項⽬が1つでもあればエラーメッセージが表⽰されること - 同じメールアドレスで登録した場合、エラーメッセージが表⽰されること - 1000⽂字の⻑い名前を⼊⼒した場合、エラーメッセージが表⽰されること ... 🙄案件で活⽤した話
19. 🙄案件で活⽤した話 カスタムスラッシュコマンド チラ⾒せ
20. 🙄案件で活⽤した話 カスタムスラッシュコマンド チラ⾒せ
21. カスタムスラッシュコマンド チラ⾒せ 🙄案件で活⽤した話
22. カスタムスラッシュコマンド チラ⾒せ 🙄案件で活⽤した話
23. やってみてわかったこと • 動作確認後の⼿直し⼯数が減った ◦ AIなし→5h ◦ Claude Code→2h ◦ Claude Code + Claude in Chrome→1.5h • ⽣成されたGIF動画をPRに貼ってレビュー負荷を下げられた • Chrome DevTools MCPのようなパフォーマンス分析はない • カスタムスラッシュコマンドのmdが他メンバーへのルール‧お作 法共有に役⽴った • トークン消費量が多い • 将来的にはE2Eテストの主流になるかもしれない 🙄案件で活⽤した話
24. 🙄Vercel agent-browser の登場
25. 🙄Claude in Chromeのトークン消費量 Claude in Chromeはトークン消費量多、Maxプラン推奨 Proプランの⽅は agent-browserが良いかも 操作例 Claude in Chrome のトークン消費量 Vercel agent-browser のトークン消費量 画面を開いて状況理解 約 500k token 約 100k token 3つのタスクを登録する 約 1.1M token （所要時間 1分21秒） 約 500k token （所要時間 41秒）
26. 📚まとめ • Claude in ChromeでClaudeがChromeを直接操作できる • 従来ボトルネックだった動作確認（と付随する修正）もClaude Codeに 任せられるようになった ◦ ⾃律的に不具合に気付き修正 ◦ ⼀連のPDCAが回る • 従来のブラウザを操作するMCPと⽐べて ◦ 普段使ってるChromeを利⽤でき、認証情報のセットアップが不要 ◦ 軽量 ◦ GIF録画ができる • 案件導⼊後、動作確認後の⼿直し⼯数が減った • トークン消費量が多いので注意、agent-browserも代替⼿段として活⽤
27. ありがとうございました 🫠おわり