はじめに
こんにちは。Frontend Rebirth（フロントエンドを再構築していく） チームの Maple です。
先日、Findyさん主催のLTイベント「フロントエンド開発の現在地-PoCの壁を越える AIフレンドリーな開発の挑戦-」で登壇させていただきました！
直近FRチームでは、AI Agent（Claude Code × tmux）を活用して検索機能のリプレイスを行い、当初見積もり4ヶ月の開発期間を2ヶ月に短縮することに成功しました。今回はその取り組みについて発表させていただきました。
この記事では、発表内容のハイライトと当日の雰囲気、そして個人的な学びや感想をシェアさせていただければと思います。
発表資料
発表内容のハイライト
今回の発表では、検索機能リプレイスでAI活用により開発期間を半分に短縮できた事例をお話しました。この記事では核となる3つのポイントをご紹介します。
1. AI Agent（Claude Code × tmux）の活用
今回の開発では、設計・実装で思想の違うAI Agentを使用しています。
当時はClaude CodeにAgents機能が存在していなかったので、自前で実装して以下のようなAgentを使用しました。
- 並列パターンエージェント - 最大16個のタスクを同時実行
-
チェーンパターンエージェント - 複雑なタスクを順次処理
※詳しい実装方法はスライドで図解していますので、ぜひご覧ください！
2. Container/Presentationalアーキテクチャ
AI活用の成功には、しっかりとしたアーキテクチャ設計が不可欠でした。
使用したアーキテクチャ
Container/PresentationalパターンでLogicとViewを明確に分離したことで、AIが迷わず実装できる環境を整えることができました。
「設計がしっかりしていると、AIも迷わない」→ 明確な指示があれば出力も良いものになります。
3. 開発期間2倍短縮の実現
数字で見る成果もインパクトがありました。
- 開発期間: 4ヶ月 → 2ヶ月
- Core Web Vitals: パフォーマンススコアが24→91に大幅改善(その他はスライドに記載)
- バグ件数: リリース後の重大バグ0件
ただし、重要なのは「AI実装は7割」というチームでの共通認識です。
残りの3割は人間によるエッジケースの対応やリファクタリングが必要でした。この「7:3」を理解しておくことが、今回成功した要因の一つだと感じています。
※7:3は体感です。
会場の雰囲気と反応
Findyさんのイベントはオンライン開催でしたが、チャット欄が非常に盛り上がっていて、臨場感がありました！
様々な質問を多くいただき、皆さんがAI活用に本気で取り組もうとしている熱意を感じました。
正直、登壇前・登壇中も「うまく伝わるかな...」と緊張していましたが、チャットでのリアクションを見て、伝えたいことが届いていると感じることができました。
個人的な学びと感想
今回の登壇を通じて、改めて自分たちの取り組みを客観視できたことが大きな収穫でした。
準備段階で発表内容をまとめる過程で、成功要因や改善点が整理され、「なぜうまくいったのか」を言語化できました。
言語化はやはり経験が大事だなと感じたので、どんどん登壇していきたいです。
次回登壇予定（JSConf JP 2025）
実は、2025年11月のJSConf JPでも登壇させていただくことになりました！🎉
「モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜」についてお話する予定です。
ぜひ会場でお会いしましょう！
登壇情報
おわりに
今回のFindy LTでの登壇は、本当に貴重な経験となりました。
AI駆動開発という新しい開発スタイルについて発表できたこと、そして多くの方々から「参考になった」という声をいただけたことは、大きな励みになりました。
最後に、このような発表の機会をくださったFindyさん、そして視聴してくださった皆様に心から感謝申し上げます。
これからも技術的な挑戦と学びを発信していきますので、どうぞよろしくお願いします！
株式会社SODAの開発組織がお届けするZenn Publicationです。 是非Entrance Bookもご覧ください！ → recruit.soda-inc.jp/engineer
Discussion