フロントエンドアーキテクチャ
フロントエンドの設計思想と構成を説明します。
アーキテクチャの特徴
モノレポ構成
- 共有パッケージをワークスペースで管理
- アプリ間で型定義とユーティリティを共有
型安全なAPI通信
- Protocol Buffersから生成された型を使用
- Connect RPCでHTTP/JSON通信
機能ベース構成
- 機能ごとにディレクトリを分割
- コンポーネント、ロジック、API呼び出しを近くに配置
user-mobile の構成例
user-mobile/src/
├── features/ # 機能ごとのモジュール
│ ├── feed-local/ # ローカルフィード
│ ├── heatmap/ # ヒートマップ
│ └── settings/ # 設定
├── shared/ # 共有ロジック
│ ├── api/ # APIクライアント
│ └── hooks/ # カスタムフック
└── navigation/ # ナビゲーション
通信フロー
Component
↓
API Client (shared/api)
↓
Connect RPC Transport
↓
Gateway (HTTPS)
↓
API Server (gRPC)
状態管理
ローカル状態
- React Hooks (useState, useReducer)
- コンポーネント内の状態
グローバル状態
- Zustandなどの状態管理ライブラリ
- 認証状態、ユーザー情報など
サーバー状態
- React Queryなどのデータフェッチングライブラリ
- APIレスポンスのキャッシュ
エラーハンドリング
APIエラー
- Connect RPCのエラーを統一して処理
- ユーザーフレンドリーなエラーメッセージ表示
ネットワークエラー
- リトライロジックの実装
- オフライン状態の検出
パフォーマンス最適化
コード分割
- ルートベースのコード分割
- 遅延ローディング
画像最適化
- 画像の遅延ローディング
- 適切なサイズ・フォーマット