Reactベストプラクティスと評価レポート
posted on: 2025/08/19 19:22
Next.jsとReactプロジェクトにおける推奨される実践方法と、既存プロジェクトのベストプラクティス遵守状況の評価をまとめました。
ベストプラクティス
1. プロジェクト構成
- ディレクトリ構成を明確に:
my-app/app/# Next.js App Routercomponents/# 再利用可能コンポーネントhooks/# カスタムフックlib/# APIクライアントやユーティリティ関数pages/# (Pages Router使用時) ページコンポーネントpublic/# 静的ファイルstyles/# グローバルCSS / Tailwind configtests/# 単体・統合テスト
- App Router vs Pages Router:
- App Router: デフォルトでReact Server Componentをサポートし、データフェッチがシンプルです。
- Pages Router: 既存プロジェクトとの互換性やルーティングの柔軟性に強みがあります。
2. コンポーネント設計
- 単一責務の原則 (Single Responsibility Principle): 1コンポーネントは1つの目的に集中します。
- プレゼンテーションとコンテナの分離:
- プレゼンテーション: UI描画のみを担当します。
- コンテナ: 状態管理やロジックを担当します。
- propsの型を明示: TypeScriptを用いてpropsの型を明確に定義します。
3. 状態管理
- ローカル状態:
useState,useReducerを利用します。 - グローバル状態:
- 軽量な場合: React Context +
useReducer。 - 複雑な場合: Zustand, Jotai, Redux Toolkitなどのライブラリを検討します。
- 軽量な場合: React Context +
- 推奨: 不必要なグローバル状態は避けるべきです。
4. データフェッチ
- Next.jsの推奨方式:
getServerSideProps: リクエストごとにサーバーでデータ取得を行います。getStaticProps: ビルド時にデータ取得を行います。getStaticPaths: 静的生成で動的ルートを作成します。
- React Client Component: SWRまたはReact Queryを利用して、キャッシュや再フェッチを管理します。
5. ルーティングとナビゲーション
- リンクには
next/linkを使用します。 - プログラム的な遷移には
useRouterを使用します。 - ページ間のデータ受け渡しは、クエリパラメータまたは状態を介して行います。
- ルート変更に伴う副作用は
useEffect内で処理します。
6. パフォーマンス最適化
- 画像最適化:
next/imageを使用します。評価レポートではWebPやService Workerによる画像最適化も言及されています。 - 静的生成 (SSG) 優先:
getStaticPropsを積極的に活用します。 - コード分割 (Dynamic import): コンポーネントの動的なインポートによりバンドルサイズを最適化します。
- 不要な再レンダリングの防止:
React.memo,useMemo,useCallbackを適切に利用します。評価レポートでは、これらの最適化パターンの全体適用状況の定期的なレビューが改善提案として挙げられています。
7. スタイル管理
- Tailwind CSSを推奨します。
- CSS Modules: コンポーネントごとにスタイルを分離します。
- styled-components: 動的なスタイルに便利です。
- グローバルCSSは最小限に抑えます。
8. テスト
- ユニットテスト: Jest + React Testing Libraryを使用します。
- E2Eテスト: Cypressを使用します。評価レポートでは、PlaywrightなどのE2Eテストの導入検討が改善提案として挙げられています。
9. 型安全とTypeScript
- 全ファイルでTypeScriptを使用し、型定義を厳密に行います。
- APIクライアントもOpenAPIやGraphQL Code Generatorを用いて型生成を検討します。
10. セキュリティ
- XSS対策: ReactのJSXは自動でエスケープ処理を行います。
- CSRF対策: APIルートでトークン検証を行います。
- 環境変数の管理:
.env.localにのみ保存し、クライアントにはNEXT_PUBLIC_プレフィックスが付いた変数のみ公開します。
11. CI/CDとデプロイ
- Vercelを推奨します。Next.jsとの親和性が高いためです。
- GitHub Actionsを用いて、自動ビルドとテストを構築します。
評価レポート（2025年8月19日）
1. プロジェクト構成
- ディレクトリ構成:
app/,src/components/,src/hooks/,src/lib/,public/など、Next.jsのApp Router構成と推奨パターンに準拠。 - 責務分離: UI・ロジック・型・定数・ユーティリティの分離が徹底。
2. コンポーネント設計
- 単一責務・分離: プレゼンテーション/コンテナ分離、props型定義もTypeScriptで明確。
- 再利用性: 共通UIは
src/components/ui/に集約。
3. 状態管理
- ローカル状態: useState/useReducerを適切に利用。
- グローバル状態: 必要最小限のContext利用。Redux等の過剰な導入なし。
4. データフェッチ
- App Router構成: サーバー/クライアントコンポーネントの使い分け。
- リアルタイム/通常取得の適切な選択:
onSnapshot/getDocsを状況に応じて使い分け。
5. ルーティングとナビゲーション
- next/link, useRouter: Next.js標準のルーティングAPIを利用。
- 副作用管理: useEffectでルート変更時の副作用を管理。
6. パフォーマンス最適化
- 画像最適化: WebP変換・Service Worker・静的アセットキャッシュ戦略を実装。
- コード分割: Next.jsの自動コード分割を活用。
- 再レンダリング最適化: useMemo等の最適化パターンも一部導入。
7. スタイル管理
- Tailwind CSS/CSS Modules: 推奨手法を採用。インラインスタイル禁止。
- グローバルCSS最小化: 適切に管理。
8. テスト
- ユニットテスト: Vitest + Testing Libraryで442テスト通過。
- E2Eテスト: Playwright等の導入は未実施（今後の改善提案）。
9. 型安全とTypeScript
- 全ファイルTypeScript: 型定義の徹底。
- API型安全: 型生成や厳密な型付けを実践。
10. セキュリティ
- XSS/CSRF対策: React/Next.jsの自動エスケープ・APIルートでの検証。
- 環境変数管理: NEXTPUBLICのみクライアント公開。
- 認証/認可: カスタムクレーム・Firestoreルールで厳格管理。
11. CI/CDとデプロイ
- Vercel推奨: Next.jsとの親和性高。
- GitHub Actions: 自動ビルド・テスト体制あり。
総合評価
本プロジェクトはNext.js/Reactのベストプラクティスを遵守しています(特に型安全性・責務分離・テスト・セキュリティ・パフォーマンスの観点において)。アクセシビリティやE2Eテスト、パフォーマンス最適化の全体適用など一部改善余地はあります。
改善検討項目
- アクセシビリティ: ARIA属性やキーボード操作対応の更なる徹底
- パフォーマンス: 画像遅延読み込みやuseMemo等の最適化パターンの全体適用状況を定期的にレビュー
- UIテスト: E2Eテスト（Playwright等）の導入検討