frontend-engineer

フロントエンドエンジニア

Suspense ベースのデータ取得、遅延読み込み、適切なファイル構成、パフォーマンス最適化を重視した、最新の React 開発に関する包括的なガイドです。

使用する場面

• 新しいコンポーネントやページを作成するとき
• 新機能を構築するとき
• TanStack Query でデータを取得するとき
• TanStack Router でルーティングを設定するとき
• コンポーネントをスタイリングするとき
• パフォーマンスを最適化するとき
• フロントエンドコードを整理するとき
• TypeScript のベストプラクティスを確認するとき

クイックスタート

新しいコンポーネントのチェックリスト

• TypeScript で React.FC<Props> パターンを使用する
• 重いコンポーネントは遅延読み込みする：React.lazy(() => import())
• 読み込み状態を表示するため、<SuspenseLoader> で囲む
• データ取得には useSuspenseQuery を使用する
• インポートエイリアスを使用する：@/、~types、~components、~features
• スタイル：100 行未満ならインライン、100 行を超える場合は別ファイルにする
• 子コンポーネントに渡すイベントハンドラーには useCallback を使用する
• ファイル末尾でデフォルトエクスポートする
• 読み込みスピナーを表示する早期リターンは使用しない
• ユーザーへのフィードバックには通知システムを使用する

新機能のチェックリスト

• features/{feature-name}/ ディレクトリを作成する
• サブディレクトリを作成する：api/、components/、hooks/、helpers/、types/
• API サービスファイルを作成する：api/{feature}Api.ts
• types/ に TypeScript の型を設定する
• routes/{feature-name}/index.tsx にルートを作成する
• 機能のコンポーネントを遅延読み込みする
• Suspense 境界を使用する
• 機能の index.ts から公開 API をエクスポートする

基本原則

1. 重いものはすべて遅延読み込みする： ルート、DataGrid、チャート、エディター
2. 読み込みには Suspense を使用する： 早期リターンではなく、SuspenseLoader を使用する
3. useSuspenseQuery： 新しいコードで使用する基本のデータ取得パターン
4. 機能ごとに整理する： api/、components/、hooks/、helpers/ のサブディレクトリ
5. サイズに応じたスタイル： 100 行未満ならインライン、100 行を超える場合は別ファイル
6. インポートエイリアス： @/、~types、~components、~features を使用する
7. 早期リターンをしない： レイアウトシフトを防ぐ
8. TypeScript を優先する： strict モードを使用し、any 型は使わない

実装ワークフロー

フロントエンドコードを実装するとき：

• 既存のワークフローパターン（仕様ファースト、TDD など）を確認し、それに従う
• コミット前にコードが CI チェック（型、テスト、リント）に通ることを確認する
• 関連する変更とテストをまとめ、アトミックなコミットにする

参考資料

詳しいガイダンスについては、以下を参照してください：

• references/component-patterns.md - 最新の React コンポーネントパターン
• references/data-fetching.md - Suspense ベースのデータ取得
• references/file-organization.md - 機能ベースの構成
• references/styling-guide.md - スタイリングのパターンとベストプラクティス
• references/routing-guide.md - TanStack Router のパターン
• references/performance.md - パフォーマンス最適化
• references/typescript-standards.md - TypeScript のベストプラクティス