vercel-react-best-practices

Vercel React ベストプラクティス

Vercel Engineering が保守する、React および Next.js アプリケーションの包括的なパフォーマンス最適化ガイドです。影響度に基づいて優先順位付けされた 8 つのカテゴリ、57 件のルールが含まれており、自動リファクタリングとコード生成の指針として利用できます。

ガイド全文の読み込み

すべてのコード例を含むルールの完全なドキュメントは、次の場所で管理されています。

https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/AGENTS.md

ルールの詳細なガイダンスが必要な場合は、上記の URL からウェブ取得ツールを使ってドキュメントを取得してください。ドキュメントは約 80 KB で、誤った例と正しい例のコードを含む全 57 件のルールが記載されています。

個別のルールについては、次を取得してください。

https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/{rule-name}.md

適用する場面

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

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

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

優先度	カテゴリ	影響度	接頭辞
1	ウォーターフォールの排除	重大	async-
2	バンドルサイズの最適化	重大	bundle-
3	サーバー側のパフォーマンス	高	server-
4	クライアント側のデータ取得	中〜高	client-
5	再レンダリングの最適化	中	rerender-
6	レンダリングのパフォーマンス	中	rendering-
7	JavaScript のパフォーマンス	低〜中	js-
8	高度なパターン	低	advanced-

クイックリファレンス

1. ウォーターフォールの排除（重大）

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

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

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

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

• server-auth-actions — API ルートと同様に、サーバーアクションを認証する
• server-cache-react — リクエストごとの重複排除に React.cache() を使う
• server-cache-lru — リクエストをまたぐキャッシュには LRU キャッシュを使う
• server-dedup-props — RSC props のシリアライズの重複を避ける
• server-serialization — クライアントコンポーネントに渡すデータを最小限にする
• server-parallel-fetching — 取得処理を並列化できるよう、コンポーネント構成を変更する
• server-after-nonblocking — ノンブロッキング処理には after() を使う

4. クライアント側のデータ取得（中〜高）

• client-swr-dedup — リクエストを自動的に重複排除するには SWR を使う
• client-event-listeners — グローバルイベントリスナーの重複を排除する
• client-passive-event-listeners — スクロールにはパッシブリスナーを使う
• client-localstorage-schema — localStorage のデータにバージョンを付け、最小限にする

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

• rerender-defer-reads — コールバックでのみ使う状態を購読しない
• rerender-memo — 負荷の高い処理をメモ化されたコンポーネントに切り出す
• rerender-memo-with-default-value — デフォルトの非プリミティブ props をコンポーネント外に移動する
• rerender-dependencies — エフェクトにはプリミティブな依存値を使う
• rerender-derived-state — 生の値ではなく、派生した真偽値を購読する
• rerender-derived-state-no-effect — エフェクトではなく、レンダリング中に状態を導出する
• rerender-functional-setstate — 安定したコールバックには関数型の setState を使う
• rerender-lazy-state-init — 負荷の高い値には useState に関数を渡す
• rerender-simple-expression-in-memo — 単純なプリミティブ値にはメモ化を使わない
• rerender-move-effect-to-event — インタラクションのロジックをイベントハンドラーに配置する
• rerender-transitions — 緊急性の低い更新には startTransition を使う
• rerender-use-ref-transient-values — 頻繁に変化する一時的な値には ref を使う

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-hydration-suppress-warning — 想定される不一致を抑制します
• rendering-activity — 表示／非表示には Activity コンポーネントを使用します
• rendering-conditional-render — 条件分岐には && ではなく三項演算子を使用します
• rendering-usetransition-loading — ローディング状態には useTransition を優先します

7. JavaScript パフォーマンス（LOW-MEDIUM）

• 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. 高度なパターン（LOW）

• advanced-event-handler-refs — イベントハンドラーを ref に格納します
• advanced-init-once — アプリの読み込みごとにアプリを 1 回だけ初期化します
• advanced-use-latest — 安定したコールバック ref には useLatest を使用します

使い方

ユーザーが React／Next.js のパフォーマンスについて質問した場合、または React コードを作成／レビューする場合：

1. 上記の優先度表から該当するカテゴリを特定します
2. 詳細なガイダンスを得るため、GitHub から該当するルールを取得します：

   https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/rules/{rule-name}.md
   

3. または、包括的なレビューのためにガイド全体を取得します：

   https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/AGENTS.md
   

4. ルールの正しいパターンを適用し、重要な理由を説明します

各ルールファイルには、次の内容が含まれています：

• 重要な理由についての簡潔な説明
• 説明付きの誤ったコード例
• 説明付きの正しいコード例
• 追加の背景情報と参考資料

ソース

Vercel Engineering が github.com/vercel-labs/agent-skills で管理しています。