---
description: 'ReactJS開発標準とベストプラクティス'
applyTo: '**/*.jsx, **/*.tsx, **/*.js, **/*.ts, **/*.css, **/*.scss'
---

# ReactJS開発指針

https://react.dev の公式React文書に従った、モダンなパターン、フック、ベストプラクティスを使った高品質なReactJSアプリケーション構築の指針。

## プロジェクトコンテキスト
- 最新のReactバージョン（React 19+）
- 型安全性のためのTypeScript（該当する場合）
- フックを使った関数コンポーネントをデフォルトとする
- Reactの公式スタイルガイドとベストプラクティスに従う
- モダンなビルドツール（Vite、Create React App、またはカスタムWebpack設定）を使用
- 適切なコンポーネント合成と再利用パターンを実装

## 開発標準

### アーキテクチャ
- フックを使った関数コンポーネントを主要なパターンとして使用
- 継承よりもコンポーネント合成を実装
- スケーラビリティのため機能またはドメインでコンポーネントを整理
- プレゼンテーションコンポーネントとコンテナコンポーネントを明確に分離
- 再利用可能なステートフルロジックにはカスタムフックを使用
- 明確なデータフローを持つ適切なコンポーネント階層を実装

### TypeScript統合
- プロパティ、状態、コンポーネント定義にはTypeScriptインターフェースを使用
- イベントハンドラーとrefに適切な型を定義
- 適切な場合にはジェネリックコンポーネントを実装
- 型安全性のため`tsconfig.json`でストリクトモードを使用
- Reactの組み込み型（`React.FC`、`React.ComponentProps`など）を活用
- コンポーネントのバリアントと状態にはユニオン型を作成

### コンポーネント設計
- コンポーネントに単一責任の原則を適用
- 説明的で一貫した命名規則を使用
- TypeScriptまたはPropTypesで適切なプロパティ検証を実装
- テスト可能で再利用可能なコンポーネントを設計
- コンポーネントを小さく単一の関心事に集中させる
- 合成パターン（レンダープロパティ、関数としての子要素）を使用

### 状態管理
- ローカルコンポーネント状態には`useState`を使用
- 複雑な状態ロジックには`useReducer`を実装
- コンポーネントツリー間での状態共有には`useContext`を活用
- 複雑なアプリケーションには外部状態管理（Redux Toolkit、Zustand）を検討
- 適切な状態正規化とデータ構造を実装
- サーバー状態管理にはReact QueryまたはSWRを使用

### フックとエフェクト
- 無限ループを避けるため適切な依存配列で`useEffect`を使用
- メモリリークを防ぐためエフェクトでクリーンアップ関数を実装
- 必要に応じてパフォーマンス最適化のため`useMemo`と`useCallback`を使用
- 再利用可能なステートフルロジックにはカスタムフックを作成
- フックのルールに従う（トップレベルでのみ呼び出す）
- DOM要素へのアクセスと可変値の保存には`useRef`を使用

### スタイリング
- CSSモジュール、Styled Components、またはモダンなCSS-in-JSソリューションを使用
- モバイルファーストアプローチでレスポンシブデザインを実装
- CSSクラスにはBEM手法または類似の命名規則に従う
- テーマ設定にはCSSカスタムプロパティ（変数）を使用
- 一貫したスペーシング、タイポグラフィ、カラーシステムを実装
- 適切なARIA属性とセマンティックHTMLでアクセシビリティを確保

### パフォーマンス最適化
- 適切な場合にコンポーネントメモ化のため`React.memo`を使用
- `React.lazy`と`Suspense`でコード分割を実装
- ツリーシェイキングと動的インポートでバンドルサイズを最適化
- 不要な再レンダリングを防ぐため`useMemo`と`useCallback`を適切に使用
- 大きなリストには仮想スクロールを実装
- パフォーマンスボトルネックを特定するためReact DevToolsでコンポーネントをプロファイル

### データフェッチング
- モダンなデータフェッチングライブラリ（React Query、SWR、Apollo Client）を使用
- 適切なローディング、エラー、成功状態を実装
- 競合状態とリクエストキャンセレーションを処理
- より良いユーザー体験のため楽観的更新を使用
- 適切なキャッシュ戦略を実装
- オフラインシナリオとネットワークエラーを適切に処理

### エラーハンドリング
- コンポーネントレベルのエラーハンドリングにはError Boundariesを実装
- データフェッチングで適切なエラー状態を使用
- エラーシナリオのフォールバックUIを実装
- デバッグのため適切にエラーをログ
- エフェクトとイベントハンドラーで非同期エラーを処理
- ユーザーに意味のあるエラーメッセージを提供

### フォームとバリデーション
- フォーム入力には制御されたコンポーネントを使用
- FormikやReact Hook Formなどのライブラリで適切なフォームバリデーションを実装
- フォーム送信とエラー状態を適切に処理
- フォームのアクセシビリティ機能（ラベル、ARIA属性）を実装
- より良いユーザー体験のためデバウンスドバリデーションを使用
- ファイルアップロードと複雑なフォームシナリオを処理

### ルーティング
- クライアントサイドルーティングにはReact Routerを使用
- ネストしたルートとルート保護を実装
- ルートパラメーターとクエリ文字列を適切に処理
- ルートベースのコード分割にレイジーローディングを実装
- 適切なナビゲーションパターンと戻るボタンのハンドリングを使用
- パンくずリストとナビゲーション状態管理を実装

### テスト
- React Testing Libraryを使用してコンポーネントの単体テストを記述
- 実装の詳細ではなく、コンポーネントの動作をテスト
- テストランナーとアサーションライブラリにはJestを使用
- 複雑なコンポーネント相互作用の統合テストを実装
- 外部依存関係とAPI呼び出しを適切にモック
- アクセシビリティ機能とキーボードナビゲーションをテスト

### セキュリティ
- XSS攻撃を防ぐためユーザー入力をサニタイズ
- レンダリング前にデータを検証してエスケープ
- すべての外部API呼び出しにはHTTPSを使用
- 適切な認証と認可パターンを実装
- localStorageやsessionStorageに機密データを保存しない
- コンテンツセキュリティポリシー（CSP）ヘッダーを使用

### アクセシビリティ
- セマンティックHTML要素を適切に使用
- 適切なARIA属性とロールを実装
- すべての対話要素でキーボードナビゲーションが動作することを確保
- 画像には代替テキスト、アイコンには説明テキストを提供
- 適切なカラーコントラスト比を実装
- スクリーンリーダーとアクセシビリティツールでテスト

## 実装プロセス
1. コンポーネントアーキテクチャとデータフローを計画
2. 適切なフォルダー構成でプロジェクト構造を設定
3. TypeScriptインターフェースと型を定義
4. 適切なスタイリングでコアコンポーネントを実装
5. 状態管理とデータフェッチングロジックを追加
6. ルーティングとナビゲーションを実装
7. フォームハンドリングとバリデーションを追加
8. エラーハンドリングとローディング状態を実装
9. コンポーネントと機能のテストカバレッジを追加
10. パフォーマンスとバンドルサイズを最適化
11. アクセシビリティ準拠を確保
12. 文書化とコードコメントを追加

## 追加ガイドライン
- Reactの命名規則に従う（コンポーネントはPascalCase、関数はcamelCase）
- 意味のあるコミットメッセージを使用し、きれいなgit履歴を維持
- 適切なコード分割とレイジーローディング戦略を実装
- JSDocで複雑なコンポーネントとカスタムフックを文書化
- 一貫したコード整形のためESLintとPrettierを使用
- 依存関係を最新に保ち、セキュリティ脆弱性を監査
- 異なるデプロイメントステージに適切な環境設定を実装
- デバッグとパフォーマンス分析にReact Developer Toolsを使用

## 一般的なパターン
- 横断的関心事にはHigher-Order Components（HOC）
- コンポーネント合成にはレンダープロパティパターン
- 関連機能には複合コンポーネント
- コンテキストベースの状態共有にはプロバイダーパターン
- コンテナ/プレゼンテーションコンポーネントの分離
- 再利用可能なロジック抽出にはカスタムフック