React・Next.jsの高速化を進めるreact-performance
cccskills
21時間前・10分で読める
元記事: React・Next.jsの高速化を進めるreact-performance（cccskills）
スキルのページ: react-performance
この記事の結論
React・Next.jsで開発しているなら、react-performanceを入れると、ページが遅い原因をAIエージェントと一緒に点検できるようになります。
点検する順番は、データ取得の待ち時間、配信するコード量、再描画です。
この記事では、スキルが扱う8つの分野とインストール方法、依頼文の例、使うときの注意点を順に紹介します。
遅さの原因を、影響の大きい分野から順にエージェントに調べてもらえます。
たとえば次のように頼みます。
このページの初回表示が遅い。
原因を優先度の高い順に調べて、直し方を提案して
エージェントが最初に確認するのは、データ取得の待ち時間です。
互いに依存しないawaitが順番に並んでいれば、Promise.allで並行に実行する形に書き換えます。
Server Componentの中で続けて待っている処理には、子コンポーネントに分けて並行に動かす案を示します。
次に見るのは、初回に配信するJavaScriptの量です。
候補になる修正は、バレルファイル（index.tsでまとめて書き出す形）からのimportを個別のimportに変えることや、重いコンポーネントをnext/dynamicで後から読み込むことです。
分析ツールなどの外部スクリプトは、next/scriptで表示後に回します。
再描画や細かな処理の速さは、そのあとで確認します。
react-performanceは、70以上の改善ルールを8つの分野に分け、優先度順に並べた参照表をエージェントに持たせるスキルです。
Vercel Labsが公開しているreact-best-practicesを元にしています。
| 優先度 | 分野 | 主な対象 |
|---|---|---|
| 1（最重要） | データ取得の待ちの解消 | 独立したawaitが続く箇所 |
| 2（最重要） | 配信コード量の削減 | 初回読み込みのJavaScript、外部ライブラリ |
| 3（高） | サーバー側の処理 | Server Components、Server Actions、APIルート |
| 4（中〜高） | ブラウザー側のデータ取得 | SWR、TanStack Query、フック内のfetch |
| 5（中） | 再描画の削減 | 頻繁な状態更新、親から子への連鎖 |
| 6（中） | 描画の速さ | 長いリスト、アニメーション、hydration |
| 7（低〜中） | JavaScriptの処理 | 重いループ、頻繁なメモリ確保 |
| 8（低） | 応用パターン | 安定した参照、エフェクトとイベントの連携 |
データ取得の待ちが最優先なのは、順番に待つawaitがそのたびに通信の待ち時間をまるごと上乗せするからです。
**細かな書き方の工夫より先に、待ちと配信量を片づけるのがこのスキルの進め方です。
**
LighthouseやWeb Vitalsの指標ごとに、確認すべき分野を示した対応表も含まれます。
指標の数値が悪いときに、どの分野から見ればよいかをエージェントが判断するための表です。
| 指標 | 主に確認する分野 |
|---|---|
| LCP（最大の要素が表示されるまでの時間） | データ取得の待ち、配信コード量、リソースの先読み |
| INP（操作から次の描画までの時間） | 再描画、描画の速さ、JavaScriptの処理 |
| CLS（レイアウトのずれ） | 描画の速さ（Suspenseの置き方、画像の寸法） |
| TBT（メインスレッドが止まる合計時間） | 配信コード量、JavaScriptの処理、外部スクリプトの後回し |
レビューの観点も入っています。
"use server"を付けた関数は外部から呼び出せる入口になるため、関数の中で認証と権限確認を行うようエージェントが指摘します。
サーバーのモジュール変数に状態を持たせると利用者どうしで共有されてしまう、という問題も確認の対象です。
インストールには、コマンドで入れる方法とエージェントに頼む方法があります。
コマンドは次のとおりで、実行時にClaude CodeやCodexなど、入れる先のエージェントを選べます。
npx skills add https://github.com/affaan-m/ECC --skill react-performance
エージェントに頼む場合は、次の文面をそのまま送ってください。
次の Agent Skill をインストールしてください。
https://github.com/affaan-m/ECC/tree/main/skills/react-performance
まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/react-performance/、Codex なら ~/.agents/skills/react-performance/ に配置してください。
置き場所は、すべてのプロジェクトで使うか、特定のプロジェクトだけで使うかで変わります。
| エージェント | すべてのプロジェクトで使う | 特定のプロジェクトだけで使う |
|---|---|---|
| Claude Code | ~/.claude/skills/ | プロジェクトの.claude/skills/ |
| Codex | ~/.agents/skills/ | プロジェクトの.agents/skills/ |
依頼文に調べたい分野をはっきり書くと、調べる範囲が絞れます。
代表的な例を3つ紹介しましょう。
このページでデータ取得を順番に待っている箇所を探して、並行に直して
独立した取得処理はPromise.allにまとめられます。
データを使う分岐の中までawaitを遅らせる修正も対象です。
propsの有無のように手元で判定できる条件は、通信の前に確認するよう順序を入れ替えます。
初回読み込みのJavaScript量を減らせる箇所を洗い出して
候補に挙がるのは、バレルファイル経由のimportと、重いグラフ部品のように後から読み込めるコンポーネントです。
管理者だけが使う画面のように、条件付きで読み込めるモジュールも対象になります。
配信量を目で確かめる手段として、@next/bundle-analyzerも案内されます。
このPRを性能の観点でレビューして。
不要な再描画も確認して
まず指摘されるのは、コールバックの中でしか使わない値を購読している箇所です。
描画中に計算できる値をuseEffectで作っている箇所や、コンポーネントの中で別のコンポーネントを定義している箇所も対象になります。
Server Actionsに認証が入っているかも、あわせて確認されます。
このスキルは改善の指針であり、計測の仕組みではありません。
**直す前と後に、Lighthouseなどで実際の数値を測って効果を確かめてください。
** 書き換えを採るかどうかは、実際のコードと計測結果を見て判断します。
対象はReact 18/19とNext.jsで、機能によって必要なバージョンが違います。
応答を返したあとに処理を実行するafter()はNext.js 15、表示と非表示を切り替える<Activity>はReact 19の機能です。
バレルファイルの最適化を自動で行う設定は、Next.js 13.5以降で使えます。
React Compilerを導入しているプロジェクトでは、再描画を手動で抑えるルールをレビュー時の確認だけに使う方針になっています。
useMemoやuseCallbackを手で足す作業は、コンパイラーに任せる扱いです。
含まれるファイルはSKILL.mdだけで、スクリプトは付いていません。
SKILL.mdの関連項目にはreact-reviewerなどのエージェントやコマンドが出てきますが、これらはこのスキルに含まれていません。
ライセンスはMITで、元資料もMITライセンスです。
入れる前に中身を一度読んでおくと安心でしょう。
同じリポジトリのaccessibilityは、Webなどの画面を読み上げやキーボード操作に対応させ、WCAG 2.2に沿って点検するスキルです。
画面の速さを見直すのと同じタイミングで使いやすさも点検したいときに、組み合わせられます。
役に立ちます。
手動で再描画を抑えるルールはレビュー時の確認だけに使うことになりますが、データ取得の待ちや配信コード量の分野はコンパイラーの対象外です。
優先度の高い分野は、そのまま使えます。
対象はReact 18/19とNext.jsです。
再描画の削減や長いリストの描画など、React側のルールも多く含まれています。
next/dynamicやafter()のようなNext.js専用の項目は、Next.jsを使う場合に当てはまります。
付いてきません。
含まれるのはSKILL.mdだけです。
Web Vitalsの各指標と確認すべき分野の対応表があるので、Lighthouseなどで測った結果を見せて調べてもらう使い方が合っています。
react-performanceは、React・Next.jsの遅さをデータ取得の待ち、配信コード量、再描画の順に点検するための指針を、エージェントに持たせるスキルです。
8分野・70以上のルールが優先度順に並んでいるので、どこから直すかで迷いません。
PRレビューで性能やServer Actionsの認証を確認させる使い方もできます。
導入はcccskills のページから進められます。
この記事は cccskills の読みもの「React・Next.jsの高速化を進めるreact-performance」の転載です。
スキルの詳細とインストール方法は cccskills の react-performance のページ にあります。