162 lines
9.2 KiB
Markdown
162 lines
9.2 KiB
Markdown
---
|
||
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）
|
||
- コンポーネント合成にはレンダープロパティパターン
|
||
- 関連機能には複合コンポーネント
|
||
- コンテキストベースの状態共有にはプロバイダーパターン
|
||
- コンテナ/プレゼンテーションコンポーネントの分離
|
||
- 再利用可能なロジック抽出にはカスタムフック |