react-best-practices

Vercel React のベストプラクティス

遅いページの改善作業をリファクタリング前に適切なパケットへ振り分ける、計測主導の React および Next.js パフォーマンススキルです。重点項目は、ウォーターフォール、バンドルのサイズ、RSC またはクライアント境界の誤り、ハイドレーションやスクリプトのコスト、再レンダリングの頻発です。詳細な AGENTS.md も引き続き利用できますが、日常的な利用では、まず軽量なリファレンスバンドルと振り分け先を確認してください。

このスキルを使う場面

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

• 新しい 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 ルートでは早めにプロミスを開始し、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 を使います

手順

ステップ 1：修正を提案する前に、主なボトルネックを分類する

まず references/perf-triage-modes.md を確認し、タスクを次のいずれか 1 つの主要カテゴリに分類します。

• ウォーターフォール／非同期処理の順序
• バンドルサイズ／遅延読み込み
• RSC／サーバーとクライアント間の境界に関する誤り
• 再レンダーの頻発／メモ化／コンテキストの拡散
• ハイドレーションまたはサードパーティスクリプトのコスト
• まず計測が必要な未知の問題

ステップ 2：質問に答えるために必要な最小限の補助パケットを使う

• references/perf-triage-modes.md — React／Next.js の主要なパフォーマンスモードと最初に行う修正を選びます
• references/measurement-and-tooling-checklist.md — React Profiler、バンドルアナライザー、Web Vitals、PR バジェットツールのどれで計測するかを判断します
• references/boundaries-and-route-outs.md — state-management、web-accessibility、responsive-design、performance-optimization との境界を明確に保ちます
• AGENTS.md — コード生成や大規模なリファクタリングで 45 個のルールをすべて参照する必要がある場合に、詳細なルールカタログを確認します

ステップ 3：一律に適用する安易な対策ではなく、計測に基づく修正を優先する

広範なメモ化やキャッシュを多用する書き換えを推奨する前に、計測チェックリストを使います。React Compiler、バンドルアナライザー、Web Vitals の計測方法が変化したことで、以前の React パフォーマンス上の経験則を無条件に適用する価値も変わっています。

ステップ 4：影響の大きい修正を優先する

1. ウォーターフォールと開始が遅れる非同期処理をなくします。
2. ルートの JavaScript と大規模なクライアント境界を削減します。
3. ハイドレーションまたはスクリプト配置の誤りを修正します。
4. 読み込みと境界の大きなコストを把握してから、再レンダーの頻発に対処します。

ステップ 5：隣接領域の作業をすべて取り込まず、適切な担当先に振り分ける

• アプリ全体の状態モデルの選定 → ../state-management/SKILL.md
• アクセシビリティ固有の問題 → ../web-accessibility/SKILL.md
• レイアウトの適応／オーバーフロー／リフローに関する作業 → ../responsive-design/SKILL.md
• React 以外、またはスタックをまたぐボトルネック → ../performance-optimization/SKILL.md

例

独立した処理には Promise.all を使う（最重要）

// ❌ Sequential: 3 round trips
const user = await fetchUser()
const posts = await fetchPosts()
const comments = await fetchComments()

// ✅ Parallel: 1 round trip
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
])

バレルファイルからのインポートを避ける（最重要）

// ❌ Imports entire library (200-800ms import cost)
import { Check, X, Menu } from 'lucide-react'

// ✅ Imports only what you need
import Check from 'lucide-react/dist/esm/icons/check'
import X from 'lucide-react/dist/esm/icons/x'

大規模なコンポーネントには動的インポートを使う（最重要）

// ❌ Monaco bundles with main chunk ~300KB
import { MonacoEditor } from './monaco-editor'

// ✅ Monaco loads on demand
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
  () => import('./monaco-editor').then(m => m.MonacoEditor),
  { ssr: false }
)

関数型の setState を使う（中）

// ❌ Requires state as dependency, stale closure risk
const addItems = useCallback((newItems) => {
  setItems([...items, ...newItems])
}, [items])

// ✅ Stable callback, no stale closures
const addItems = useCallback((newItems) => {
  setItems(curr => [...curr, ...newItems])
}, [])

ベストプラクティス

1. 問題に合った最も軽量なサポートパケットから始め、小さなリファレンスだけでは不十分な場合に限り AGENTS.md を使用します。
2. エビデンスに基づく修正を優先します。メモ化やキャッシュを推奨する前に、React Profiler、バンドルアナライザー、Web Vitals をもとに推奨内容を決めます。
3. React Compiler を、従来のメモ化に関する通説に対する現在の制約として扱います。「すべてを memo で囲む」ことをデフォルトにしないでください。
4. React 固有のアドバイスは、より広範なフロントエンドの懸念事項と分けてください。アプリ全体の状態管理の選択には state-management、WCAG への対応には web-accessibility、React 全体に限らないボトルネックには performance-optimization を使用します。
5. 既存のワークフローでその名称が明示的に必要な場合に限り、互換性エイリアス vercel-react-best-practices に切り替えます。
6. 実際のチーム利用を想定し、PR の予算とバンドル差分のワークフローを考慮してください。このスキルは、コードレベルの小さな修正だけでなく、運用上の監査にも役立つものである必要があります。

制約

必須ルール（MUST）

1. ウォーターフォールを排除する：Promise.all、Suspense を使用します
2. バンドルを最適化する：バレルインポートを禁止し、動的インポートを使用します
3. RSC の境界：必要なデータのみをシリアライズします

禁止事項（MUST NOT）

1. 逐次的な await：独立したフェッチを逐次実行しないでください
2. 配列の変更：sort() の代わりに toSorted() を使用します
3. React.cache 内のインラインオブジェクト：キャッシュミスの原因になります

リファレンス

• references/perf-triage-modes.md
• references/measurement-and-tooling-checklist.md
• references/boundaries-and-route-outs.md
• AGENTS.md
• React ドキュメント
• Next.js ドキュメント
• SWR
• better-all
• Vercel ブログ：パッケージインポートの最適化
• Vercel ブログ：ダッシュボードのパフォーマンス

メタデータ

バージョン

• 現在のバージョン：1.1.0
• 最終更新日：2026-04-16
• 対応プラットフォーム：Claude、ChatGPT、Gemini
• ソース：vercel/agent-skills

関連スキル

• performance-optimization：一般的なパフォーマンス最適化
• state-management：状態管理

タグ

#React #Next.js #performance #optimization #vercel #waterfalls #bundle-size #RSC #frontend