Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Avatar for morimorikochan

morimorikochan

January 21, 2026
Tweet

More Decks by morimorikochan

Other Decks in Technology

Transcript

  1. 1. Claude Codeとは 2. Claude in Chrome とは 3. Claude

    in Chromeの何がすごい? 4. デモ 5. 案件で活⽤した話 6. まとめ 📃⽬次
  2. 🙄Claude in Chrome とは 引⽤元: Claude in Chrome | Claude

    1. Chrome内のサイドバーで指⽰を出せる
  3. ボトルネックだった動作確認(と付随する修正)もClaude Codeに任 せられるようになった • [今まで] Claude Codeが書いたコードを⼈間が動作確認 ◦ ⼈間がボトルネックになりPDCAが回りにくい ◦

    MTG前に回して、MTG後に動作確認したら不具合だらけだった🥺 • Claude Code⾃⾝が動作確認する能⼒を⼿に⼊れた ◦ ⾃律的に不具合に気付き修正する ◦ ⼀連のPDCAが回る ◦ ※⼈間の動作確認が0になるわけではない 🙄Claude in Chromeの何がすごい? ※Webのフロントエンド開発においての話
  4. 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
  5. React/TypescriptのSPA開発 • Vercelのv0で作られたモックコード(Next.js)があり、APIサーバー⾃体は完成 済み • 各機能/画⾯ごとにやるタスク 1. Next.jsからReactへ置換 2. ルーティングの設定

    3. api呼び出しhooks作成 4. ローディング制御‧エラー制御 5. mswを使ったモック実装 6. (モック有り)動作確認+不具合修正 7. (モックなし/APIサーバーと接続)動作確認+不具合修正 🙄案件で活⽤した話
  6. いままで 1. 🤖Next.jsからReactへ置換 2. 🤖ルーティングの設定 3. 🤖api呼び出しhooks作成 4. 🤖ローディング制御‧エラー制御 5.

    🤖mswを使ったモック実装 6. ✍(モック有り)動作確認+不具合修正 7. ✍(モックなし/APIサーバーと接続)動作確認+不具合修正 🙄案件で活⽤した話
  7. Claude in Chromeあり 1. 🤖Next.jsからReactへ置換 2. 🤖ルーティングの設定 3. 🤖api呼び出しhooks作成 4.

    🤖ローディング制御‧エラー制御 5. 🤖mswを使ったモック実装 6. 🤖(モック有り)動作確認+不具合修正 7. 🤖(モックなし/APIサーバーと接続)動作確認+不具合修正 8. ✍少しだけ動作確認+少しの不具合修正 🙄案件で活⽤した話
  8. Claude in Chromeあり 1. 🤖Next.jsからReactへ置換 2. 🤖ルーティングの設定 3. 🤖api呼び出しhooks作成 4.

    🤖ローディング制御‧エラー制御 5. 🤖mswを使ったモック実装 6. 🤖(モック有り)動作確認+不具合修正 7. 🤖(モックなし/APIサーバーと接続)動作確認+不具合修正 8. ✍少しだけ動作確認+少しの不具合修正 あらかたの不具合が先に修正されていて happy 🙄案件で活⽤した話
  9. 指⽰内容 PlanMode + Opus4.5 + Thinking /frontend XXX登録画⾯とXXX更新画⾯を実装して。 動作確認は以下の通り -

    必須項⽬を全て⼊⼒し登録すると正常に登録され⼀覧画⾯に遷移し、⼀覧に表⽰さ れてること - 未⼊⼒の必須項⽬が1つでもあればエラーメッセージが表⽰されること - 同じメールアドレスで登録した場合、エラーメッセージが表⽰されること - 1000⽂字の⻑い名前を⼊⼒した場合、エラーメッセージが表⽰されること ... 🙄案件で活⽤した話
  10. やってみてわかったこと • 動作確認後の⼿直し⼯数が減った ◦ AIなし→5h ◦ Claude Code→2h ◦ Claude

    Code + Claude in Chrome→1.5h • ⽣成されたGIF動画をPRに貼ってレビュー負荷を下げられた • Chrome DevTools MCPのようなパフォーマンス分析はない • カスタムスラッシュコマンドのmdが他メンバーへのルール‧お作 法共有に役⽴った • トークン消費量が多い • 将来的にはE2Eテストの主流になるかもしれない 🙄案件で活⽤した話
  11. 🙄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秒)
  12. 📚まとめ • Claude in ChromeでClaudeがChromeを直接操作できる • 従来ボトルネックだった動作確認(と付随する修正)もClaude Codeに 任せられるようになった ◦

    ⾃律的に不具合に気付き修正 ◦ ⼀連のPDCAが回る • 従来のブラウザを操作するMCPと⽐べて ◦ 普段使ってるChromeを利⽤でき、認証情報のセットアップが不要 ◦ 軽量 ◦ GIF録画ができる • 案件導⼊後、動作確認後の⼿直し⼯数が減った • トークン消費量が多いので注意、agent-browserも代替⼿段として活⽤