フロントエンドアーキテクチャ設計
本ドキュメントは、TASHIKAプラットフォームのフロントエンドアーキテクチャ設計を定義します。
アーキテクチャ概要
SPA構成
- シングルページアプリケーション (SPA) として構築
- クライアントサイドルーティングによるシームレスな画面遷移
- サーバーデータのキャッシュと同期による最適なUX
バリデーション戦略
- スキーマファースト: Zodスキーマでバリデーションルールを定義
- フロントエンド・バックエンド共通: OpenAPIスキーマからZodスキーマを自動生成し、バリデーションを統一
自動保存の実現
- 画面遷移時（TanStack Routerの
beforeLoad）に自動保存をトリガー - 保存状態のインジケーター表示（保存中/保存済み/エラー）
- オフライン時: IndexedDB にローカル保存し、復帰後にサーバーと同期
- コンフリクト検出: サーバー側のバージョンとローカルのバージョンを比較し、衝突時はユーザーに選択を促す
サブページ
| ドキュメント | 内容 |
|---|---|
| マルチポータル構成 | 4ポータル分離方針、コード分割、共通基盤 |
| 状態管理・ルーティング | TanStack Query/Router、キャッシュ戦略、URL構造 |
| 国際化・アクセシビリティ | i18n方式、WCAG 2.2 AA準拠、ダークモード |
| パフォーマンス設計 | パフォーマンスバジェット、最適化方針 |
関連ドキュメント
| ドキュメント | 内容 |
|---|---|
| 入力コンポーネント仕様 | Roselliパターンによる日付・金額・収入所得変換・送金記録の入力コンポーネント |
| エラーハンドリング | Error Boundary 3層構成、ChunkLoadError対策、Sentry統合 |