react-best-practices

React のベストプラクティス（カタログ向けの編集）

Vercel が公開しているガイダンスを基にした、React および Next.js アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 45 のルールを、影響度の高い順に掲載し、自動リファクタリングやコード生成の指針として利用できます。

使用するタイミング

次の場合に、これらのガイドラインを参照してください。

• React コンポーネントや Next.js ページを新規作成するとき
• データ取得（クライアント側またはサーバー側）を実装するとき
• パフォーマンス上の問題がないかコードをレビューするとき
• 既存の React／Next.js コードをリファクタリングするとき
• バンドルサイズや読み込み時間を最適化するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	ウォーターフォールの解消	CRITICAL	async-
2	バンドルサイズの最適化	CRITICAL	bundle-
3	サーバー側のパフォーマンス	HIGH	server-
4	クライアント側のデータ取得	MEDIUM-HIGH	client-
5	再レンダリングの最適化	MEDIUM	rerender-
6	レンダリングのパフォーマンス	MEDIUM	rendering-
7	JavaScript のパフォーマンス	LOW-MEDIUM	js-
8	高度なパターン	LOW	advanced-

クイックリファレンス

1. ウォーターフォールの解消（CRITICAL）

• async-defer-await - await を実際に使用する分岐内に移動する
• async-parallel - 独立した処理には Promise.all() を使用する
• async-dependencies - 部分的な依存関係には better-all を使用する
• async-api-routes - API ルートでは Promise を早期に開始し、await を遅らせる
• async-suspense-boundaries - Suspense を使用してコンテンツをストリーミングする

2. バンドルサイズの最適化（CRITICAL）

• bundle-barrel-imports - 直接インポートし、バレルファイルを避ける
• bundle-dynamic-imports - 大きなコンポーネントには next/dynamic を使用する
• bundle-defer-third-party - ハイドレーション後に分析／ログ記録を読み込む
• bundle-conditional - 機能が有効になったときだけモジュールを読み込む
• bundle-preload - 体感速度を高めるため、ホバー／フォーカス時にプリロードする

3. サーバー側のパフォーマンス（HIGH）

• server-cache-react - リクエストごとの重複排除に React.cache() を使用する
• server-cache-lru - リクエストをまたぐキャッシュには LRU キャッシュを使用する
• server-serialization - クライアントコンポーネントに渡すデータを最小限にする
• server-parallel-fetching - 取得処理を並列化できるよう、コンポーネントを再構成する
• server-after-nonblocking - ブロックしない処理には after() を使用する

4. クライアント側のデータ取得（MEDIUM-HIGH）

• client-swr-dedup - リクエストを自動的に重複排除するには SWR を使用する
• client-event-listeners - グローバルなイベントリスナーを重複排除する

5. 再レンダリングの最適化（MEDIUM）

• rerender-defer-reads - コールバック内でしか使用しない状態をサブスクライブしない
• rerender-memo - コストの高い処理をメモ化したコンポーネントに切り出す
• rerender-dependencies - エフェクトではプリミティブな依存値を使用する
• rerender-derived-state - 生の値ではなく、派生した真偽値をサブスクライブする
• rerender-functional-setstate - 安定したコールバックには関数形式の setState を使用する
• rerender-lazy-state-init - コストの高い値には useState に関数を渡す
• rerender-transitions - 緊急性の低い更新には startTransition を使用する

6. レンダリングのパフォーマンス（MEDIUM）

• rendering-animate-svg-wrapper - SVG 要素ではなく、ラッパーの div をアニメーション化する
• rendering-content-visibility - 長いリストには content-visibility を使用する
• rendering-hoist-jsx - 静的な JSX をコンポーネントの外に切り出す
• rendering-svg-precision - SVG の座標精度を下げる
• rendering-hydration-no-flicker - サーバーとクライアントの初回表示でテーマを一致させる
• rendering-activity - 表示／非表示には Activity コンポーネントを使用する
• rendering-conditional-render - 条件分岐には && ではなく三項演算子を使用する

7. JavaScript パフォーマンス（低〜中）

• js-batch-dom-css - クラスまたは cssText を使って CSS の変更をまとめる
• js-index-maps - 繰り返し検索する場合は Map を構築する
• js-cache-property-access - ループ内でオブジェクトのプロパティをキャッシュする
• js-cache-function-results - 関数の結果をモジュールレベルの Map にキャッシュする
• js-cache-storage - localStorage/sessionStorage の読み取り結果をキャッシュする
• js-combine-iterations - 複数の filter/map を 1 つのループにまとめる
• js-length-check-first - 負荷の高い比較の前に配列の長さを確認する
• js-early-exit - 関数から早期に return する
• js-hoist-regexp - ループの外で RegExp の生成を行う
• js-min-max-loop - sort の代わりにループで最小値／最大値を求める
• js-set-map-lookups - O(1) の検索には Set/Map を使う
• js-tosorted-immutable - 不変性を保つために toSorted() を使う

8. 高度なパターン（低）

• advanced-event-handler-refs - イベントハンドラーを ref に保存する
• advanced-use-latest - 安定したコールバック ref には useLatest を使う

使い方

詳しい説明とコード例については、各ルールのファイルを参照してください。

rules/async-parallel.md
rules/bundle-barrel-imports.md
rules/_sections.md

各ルールのファイルには、以下が含まれています。

• 重要である理由の簡単な説明
• 誤ったコード例とその説明
• 正しいコード例とその説明
• 追加の背景情報と参考資料

完全版ドキュメント

すべてのルールを詳しく記載した完全版ガイドについては、AGENTS.md を参照してください。

制限事項

• このスキルは、タスクが上記の範囲に明確に該当する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認を求めてください。

例は概要を示すものであり、完全なアプリケーションではありません。編集する前に、インストール済みの React/Next/SWR のバージョン、公開されているパッケージのエクスポート、および Server/Client モジュールの境界を確認してください。具体的なボトルネックをプロファイリングし、認可、プライバシー、アクセシビリティ、動作を維持してください。影響レベルと過去の計測時間は優先順位を示すものであり、測定結果を保証するものではありません。広範なリファクタリングに着手する前に、アプリケーションのチェックを使って変更を 1 つ検証してください。このガイドでは、デプロイも分析データの送信も許可されていません。