9.2 KiB
9.2 KiB
| description | applyTo |
|---|---|
| ReactJS開発標準とベストプラクティス | **/*.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属性とロールを実装
- すべての対話要素でキーボードナビゲーションが動作することを確保
- 画像には代替テキスト、アイコンには説明テキストを提供
- 適切なカラーコントラスト比を実装
- スクリーンリーダーとアクセシビリティツールでテスト
実装プロセス
- コンポーネントアーキテクチャとデータフローを計画
- 適切なフォルダー構成でプロジェクト構造を設定
- TypeScriptインターフェースと型を定義
- 適切なスタイリングでコアコンポーネントを実装
- 状態管理とデータフェッチングロジックを追加
- ルーティングとナビゲーションを実装
- フォームハンドリングとバリデーションを追加
- エラーハンドリングとローディング状態を実装
- コンポーネントと機能のテストカバレッジを追加
- パフォーマンスとバンドルサイズを最適化
- アクセシビリティ準拠を確保
- 文書化とコードコメントを追加
追加ガイドライン
- Reactの命名規則に従う（コンポーネントはPascalCase、関数はcamelCase）
- 意味のあるコミットメッセージを使用し、きれいなgit履歴を維持
- 適切なコード分割とレイジーローディング戦略を実装
- JSDocで複雑なコンポーネントとカスタムフックを文書化
- 一貫したコード整形のためESLintとPrettierを使用
- 依存関係を最新に保ち、セキュリティ脆弱性を監査
- 異なるデプロイメントステージに適切な環境設定を実装
- デバッグとパフォーマンス分析にReact Developer Toolsを使用
一般的なパターン
- 横断的関心事にはHigher-Order Components（HOC）
- コンポーネント合成にはレンダープロパティパターン
- 関連機能には複合コンポーネント
- コンテキストベースの状態共有にはプロバイダーパターン
- コンテナ/プレゼンテーションコンポーネントの分離
- 再利用可能なロジック抽出にはカスタムフック