概要
https://zenn.dev/hacobu/articles/567d67c70ec15c
詳細内容
## 32,000拠点*を支えるトラック予約受付サービスのフロントエンドリアーキテクチャ戦略 〜 AIフレンドリーなコードベースを目指して 〜
https://zenn.dev/hacobu/articles/567d67c70ec15c
Hacobuがトラック予約受付サービスのフロントエンドを「AIフレンドリー」なコードベースへリアーキテクチャし、ディレクトリ構造、ルーティング、認可処理を改善した戦略と実装を詳述します。
**Content Type**: ⚙️ Tools
**Scores**: Signal:4/5 | Depth:4/5 | Unique:3/5 | Practical:4/5 | Anti-Hype:4/5
**Main Journal**: 76/100 | **Annex Potential**: 73/100 | **Overall**: 76/100
**Topics**: [[フロントエンドリアーキテクチャ, ディレクトリ構造最適化, ルーティング, 宣言的認可処理, AIフレンドリーなコードベース]]
株式会社Hacobuは、32,000拠点で利用されるトラック予約受付サービスMOVO Berthのフロントエンドにおいて、AI活用による生産性向上を目標に大規模なリアーキテクチャ戦略を実行しています。この取り組みは、従来のディレクトリ構造が引き起こしていた開発コストの増大、コンポーネントの再利用性の低さ、そして命名と役割の不明確さといった課題を解決し、AIがコードを理解・生成しやすい「AIフレンドリーなコードベース」への移行を明確な目的としています。
戦略の核となるのは、システム根幹部分、特にディレクトリ構造、ルーティング、APIクライアント、状態管理、認可処理の改善です。記事では、現在進行中のディレクトリ移行に焦点を当て、その詳細な設計が解説されています。ルーティングには、従来のReact Routerに代わり、型安全性が高く検索パラメーターのバリデーションに優れるTanstack Routerを導入。この選定は、generoutedとの互換性問題やuse-query-paramsの非対応といった具体的な技術的課題を考慮した上でのものです。
特に注目すべきは、Tanstack RouterのPathless Route Group Directoriesを活用した企業コンテキストごとのコンポーネントコロケーション戦略です。これにより、未認証、認証、企業コンテキスト依存／非依存といったルートグループを明確に分類し、開発や調査時のファイル探索時間の短縮と関連ファイルの分散防止を実現しています。これはAIがコードを解析する際の認知負荷を大幅に軽減し、より正確なコード生成や理解を促す上で極めて重要です。
また、認可処理も刷新され、PermissionProviderを介して各ページ内で`checkPathPermissions`関数を呼び出す宣言的なアプローチを採用。これにより、どのページがどの権限を必要とするかの情報が集中管理され、認可ロジックのメンテナンス性が向上しています。さらに、新旧ルートを瞬時に切り替え可能なFeature Flagの導入や、両ルーター間の互換レイヤーの作成、旧URLからのリダイレクト対応など、大規模システムのリファクタリングにおける堅牢な移行戦略が具体的に示されています。
本記事は、AI時代を見据えたコードベースの最適化という、多くのウェブアプリケーションエンジニアが今後直面するであろう課題に対し、Hacobuが実践している具体的かつ詳細なアプローチを示しています。既存の複雑なシステムを安全かつ着実にモダン化し、AIとの共存を図るための実践的な知見が満載であり、自身のプロジェクトで同様の課題に取り組むエンジニアにとって非常に価値の高い一例となるでしょう。