mcpField
V
vercel-react-best-practices

vercel-react-best-practices

github.com/hainrixz開発28479 回インストール6 日前に更新
リポジトリ

vercel-react-best-practices について

vercel-react-best-practicesは、Vercelが管理するReactおよびNext.jsアプリ向けのパフォーマンス最適化ガイドです。62のルールを影響度に基づく8カテゴリに整理し、開発者やコーディングエージェントを支援します。

主な機能

  1. 0162件の最適化ルール
  2. 02影響度順の8カテゴリ
  3. 03非同期処理とバンドルの指針
  4. 04サーバー側とクライアント側の性能規則
  5. 05詳細な説明と例を含むルールファイル

活用シーン

  1. 01Reactコードの性能問題の確認
  2. 02Next.jsのデータ取得の最適化
  3. 03再レンダーを減らすコンポーネントのリファクタリング
  4. 04自動コード生成の指針

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hainrixz/claude-webkit --skill vercel-react-best-practices

インストール後、Claude Code で/vercel-react-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

AGENTS.md
rules/
_sections.md
_template.md
advanced-event-handler-refs.md
advanced-init-once.md
advanced-use-latest.md
async-api-routes.md
async-defer-await.md
async-dependencies.md
async-parallel.md
async-suspense-boundaries.md
bundle-barrel-imports.md
bundle-conditional.md
bundle-defer-third-party.md
bundle-dynamic-imports.md
bundle-preload.md
client-event-listeners.md
client-localstorage-schema.md
client-passive-event-listeners.md
client-swr-dedup.md
js-batch-dom-css.md
js-cache-function-results.md
js-cache-property-access.md
js-cache-storage.md
js-combine-iterations.md
js-early-exit.md
js-flatmap-filter.md
js-hoist-regexp.md
js-index-maps.md
js-length-check-first.md

詳細

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

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

適用する場面

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

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

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

優先度カテゴリ影響度プレフィックス
1ウォーターフォールの排除CRITICALasync-
2バンドルサイズの最適化CRITICALbundle-
3サーバーサイドのパフォーマンスHIGHserver-
4クライアントサイドのデータ取得MEDIUM-HIGHclient-
5再レンダリングの最適化MEDIUMrerender-
6レンダリングパフォーマンスMEDIUMrendering-
7JavaScript のパフォーマンスLOW-MEDIUMjs-
8高度なパターンLOWadvanced-

クイックリファレンス

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-auth-actions - API ルートと同様に、サーバーアクションを認証する
  • server-cache-react - リクエスト単位の重複排除には React.cache() を使う
  • server-cache-lru - リクエストをまたぐキャッシュには LRU キャッシュを使う
  • server-dedup-props - RSC プロパティの重複シリアライズを避ける
  • server-hoist-static-io - 静的な I/O（フォント、ロゴ）をモジュールレベルに移動する
  • server-serialization - クライアントコンポーネントに渡すデータを最小限にする
  • server-parallel-fetching - 取得処理を並列化できるよう、コンポーネントを再構成する
  • server-after-nonblocking - ブロッキングしない処理には after() を使う
4. クライアントサイドのデータ取得（MEDIUM-HIGH）
  • client-swr-dedup - リクエストを自動的に重複排除するには SWR を使う
  • client-event-listeners - グローバルイベントリスナーの重複を排除する
  • client-passive-event-listeners - スクロールにはパッシブリスナーを使う
  • client-localstorage-schema - localStorage のデータにバージョンを付け、最小限にする
5. 再レンダリングの最適化（MEDIUM）
  • 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 を使う
  • rerender-no-inline-components - コンポーネント内でコンポーネントを定義しない
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 を優先する
  • rendering-resource-hints - プリロードには React DOM のリソースヒントを使用する
  • rendering-script-defer-async - script タグに defer または async を使用する
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 - min/max には sort ではなくループを使用する
  • js-set-map-lookups - O(1) の検索には Set/Map を使用する
  • js-tosorted-immutable - イミュータビリティには toSorted() を使用する
  • js-flatmap-filter - map と filter を 1 回の処理で行うには flatMap を使用する
8. 高度なパターン (LOW)
  • advanced-event-handler-refs - イベントハンドラーを ref に保存する
  • advanced-init-once - アプリの読み込みごとに 1 回だけアプリを初期化する
  • advanced-use-latest - 安定したコールバック ref には useLatest を使用する

使用方法

詳細な説明とコード例については、個々のルールファイルをお読みください:

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

各ルールファイルには以下が含まれます:

  • なぜ重要かの簡単な説明
  • 説明付きの誤ったコード例
  • 説明付きの正しいコード例
  • 追加のコンテキストと参照

完全なコンパイル済みドキュメント

すべてのルールを展開した完全なガイド: AGENTS.md

コメント

Markdown 対応