AIフレンドリーなコードベースを目指して/登壇資料（高橋 悟生）

フロントエンド開発の現在地-PoCの壁を越える
AIフレンドリーな開発の挑戦-
2025年9月19日（金）12:00〜13:00
https://findy.connpass.com/event/367865/

Transcript

1. Confidential AIフレンドリーな コードベースを目指して 2025年9月19日 高橋 悟生
2. Copyright Hacobu, Inc. 2 自己紹介 高橋 悟生（たかはし ごう） 株式会社Hacobu　テクノロジー本部 ソフトウェアエンジニア 24卒で株式会社BuySell Technologiesに入社し、複数のプロダクトにおける 技術検証・設計・開発を経験。 現在は株式会社Hacobuにてソフトウェアエンジニアとして、 トラック予約受付サービス「MOVO Berth」の設計・開発に携わっている。 takahashigo
3. 会社紹介

8. 本題

9. 目次 Copyright Hacobu, Inc. 9 ・背景 ・全体像 ・移行設計 ・特に拘った点 ・諦めた点 ・効果 ・今後の展望
10. Copyright Hacobu, Inc. 10 背景 チームの今期の目標として「AI活用による生産性の爆上げ」を掲げている フロントエンドのリアーキテクチャ に踏み切る 第一歩としてAIフレンドリーなコードベースへの 移行を進めている
11. Copyright Hacobu, Inc. 11 AIフレンドリーとは AIの認知負荷を軽減し、コードを理解・生成しやすい状態を指します
12. Copyright Hacobu, Inc. 12 全体像 非メインライブラリの移行や細かいコード改善の着手前に、システム根幹部分を優先的に改善 • ディレクトリ構造（ルーティングを含む） • APIクライアント • 状態管理 • フォーム管理 • バリデーション • スタイル • テスト
13. Copyright Hacobu, Inc. 13 段階的な移行 以下の理由から、細かく段階を区切り、いつでも中断できるように意識しています 現在進行中のディレクトリ移行 に絞って解説します • 各要素は相互に依存関係がある • システムやAI Agentsの今後の動向を 完全に読み切ることは不可能に近い
14. Copyright Hacobu, Inc. 14 Berthシステムの特徴 • 管理者、拠点などの企業コンテキスト (テナントグループ)ごとに提供される画面が決まっている • 利用者ごとに「読取・作成・更新・削除」などの権限があり、事業者ごとに従量課金によって提供される機能が制 限されている ドメイン自体は複雑だが、アプリケーション構造としては シンプルなCRUD処理をベースに構築されている
15. Copyright Hacobu, Inc. 15 現状の技術スタックとディレクトリ構造 • React.js • TypeScript • Zod • Final Form • Redux / Redux Thunk • React Router a. 本移行でTanstack Routerを採用 • styled-components • Axios • Vitest • Vite ※ Tanstack Routerの採用背景に関しては、こちらの記事に記載しております
16. Copyright Hacobu, Inc. 16 課題感 • 開発コストの増加 • 小規模な修正でも複数ディレクトリにまたがるファイル編集が必要。 • AI利用時にもコンテキストが広がりすぎ、ハルシネーションのリスクが高まる。 • 再利用性の欠如 • pages配下にコロケートされており、コンポーネントの再利用が難しく、メンテナンスコストが肥大化。 • 命名と役割の不明確さ • ディレクトリ名と役割が直感的でなく、既存メンバーや新規参加者の学習コストが増大。実装時の迷いも発生。 • Atomic Designのあいまいさ • 各レイヤーの粒度や役割（特にデータフェッチの責務）が明確でなく、自由度が高すぎて一貫性を欠く。 • 古いアーキテクチャやライブラリの継続利用 • Reactとの互換性や最新ベストプラクティスとの乖離が発生。
17. Copyright Hacobu, Inc. 17 移行設計
 全体
 pages配下

18. Copyright Hacobu, Inc. 18 特に拘った点 pages/(auth)/(companies) 配下において、 Pathless Route Group Directoriesを活用して、 企業コンテキスト毎にコロケーションしたこと Pathless Route Group Directories 企業コンテキスト コロケーション
19. Copyright Hacobu, Inc. 19 企業コンテキストとは 管理者、拠点、トラック手配業者等のテナントをコンテキストの単位 でグルーピングしたもの ※ グループには階層構造もあります
20. Copyright Hacobu, Inc. 20 コロケーションとは Kent C. Dodds 氏が提唱した、関連するリソース同士を近くに置いておく という考え方 依存関係を明確化 させ、「コードの保守性」「可読性」の向上に寄与するアプローチ
21. Copyright Hacobu, Inc. 21 pathless route Group Directoriesとは ()を用いて、パスに関係なくルートファイルをグルーピングする機能 ルートツリーやコンポーネントツリーには影響せず、あくまで整理目的で利用するもの
22. Copyright Hacobu, Inc. 22 なぜ、企業コンテキストでコロケーションしたのか 【AIフレンドリー】 • 効率的なファイル探索 ◦ 関連ファイルが1箇所にまとまっているため、AIが情報を素早く見つけられる可能性が高い • ハルシネーションリスクの低減 ◦ コンテキストが明確なため、AIが不要な情報を参照するリスクを減らし、正確なコード生成、 コード生成や影響範囲特定の速度に寄与 【保守性】 • 長期的な安定性 ◦ UI は状況に応じて変化する可能性が高いが、企業コンテキストや権限の概念は揺らぎにくい 。 安定性の高いドメインに依存することで、将来的なシステムの拡張に柔軟に対応
23. Copyright Hacobu, Inc. 23 諦めた点 featureの再利用 • 企業コンテキスト毎にエンドポイントが分かれており、featureを分割してもデータフェッチ層を別で 配置する必要がある • データフェッチのレスポンス型が異なるため、共通化が困難 pages配下でのコロケーションを継続

24. Copyright Hacobu, Inc. 24 効果 作成される PRのうち、およそ半分は AIだけで作られている PRにAIラベルを付与し、AIの関与度合いを計測 ※ 2025年9月13日以前の265件を対象 • AI:0（73件、27.5%） ◦ AIの関与なし • AI:1（16件、6.0%） ◦ AIが少し関与 • AI:2（21件、7.9%） ◦ AIがある程度関与 • AI:3（40件、15.1%） ◦ AIがかなり関与 • AI:4（60件、22.6%） ◦ AIがほとんど実装 • AI:5（55件、20.8%） ◦ AIのみで実装
25. Copyright Hacobu, Inc. 25 効果 BerthチームFEのストーリーポイントが 2倍近くになり、純粋な開発速度の向上 ※ 6月11日のスプリントあたりから、 AI Agentsの利用が活発化
26. Copyright Hacobu, Inc. 26 今後の展望
 • 「企業コンテキスト」をベースとしたAI Agentsへのインプットドキュメントの整備 ◦ さらに正確なコード生成、コード生成や影響範囲特定の速度の向上 • 企業コンテキスト間において、データフェッチを伴わないコンポーネントの共通化 ◦ 重複実装を削減し、保守性の向上