「React、なんだか速そうだし便利そうと思って始めたけれど、アプリが大きくなるにつれて、なぜか動きが重くなってきた……」
そんな壁にぶつかっていませんか？ 大丈夫です。それはあなたが一人前のエンジニアへと成長している何よりの証拠です。
今日は、Reactという魔法の道具箱の中身をのぞき見して、「どこで時間がかかっているのか」を突き止めるための探偵ツール、『Profiler API』についてお話しします。
—
1. なぜ「重い」と感じるのか？
まずはイメージしてみましょう。Reactは「仮想DOM」という、いわば「手元にあるメモ帳」を使って画面を描き直しています。
1. 画面を変える必要があるとき、Reactはメモ帳に「次はこう変えよう」と下書きを書く。
2. 実際に画面（ブラウザ）へ反映する。
この「メモ帳に下書きする時間」が長くなると、ユーザーは「カクカクする」「ボタンを押しても反応が遅い」と感じます。でも、コードが複雑になると、どこで時間がかかっているのか、目視ではサッパリわかりませんよね。
そこで登場するのが `
—
2. Profiler APIを使ってみよう
使い方は驚くほどシンプルです。計測したいコンポーネントを、`
サンプルコード：レジの待ち時間を計る
import React, { Profiler } from ‘react’;
// 計測したいコンポーネント（例：大量のリストを表示する場所）
const ExpensiveComponent = () => {
return
;
};
// 実際に計測を行う親コンポーネント
const App = () => {
// onRenderは、計測が終わった瞬間にReactが教えてくれる「報告書」のようなもの
const handleRender = (id, phase, actualDuration) => {
console.log(`コンポーネント名: ${id}`);
console.log(`フェーズ（初回描画か、更新か）: ${phase}`);
console.log(`かかった時間（ミリ秒）: ${actualDuration}`);
if (actualDuration > 10) {
console.warn(‘⚠️ ちょっと動きが重いかもしれません！’);
}
};
return (
// idは何でもOK。どのコンポーネントか識別するための名前です
);
};
—
3. 「onRender」が教えてくれること
`onRender` コールバックは、Reactが頑張って仕事をした直後に、「お疲れ様、結果だよ」と渡してくれる手紙です。特に注目すべきは `actualDuration` です。
- id: さっき自分でつけた名前。どのエリアの計測結果かがわかります。
- phase:
- `mount`: 初めて画面に登場したとき（開店準備）。
- `update`: 何かデータが変わって書き直したとき（お客さんが来て注文を変更したとき）。
- actualDuration: 描画にかかった時間（ミリ秒）。16ミリ秒を超えると、人間は「カクついている」と感じ始めます。ここが一番のチェックポイントです。
—
4. 現場でよくある「ボトルネック」の正体
実務でよくあるのは、「関係ないのに再計算している」というケースです。
例えば、プロフィールアイコンを表示するだけのコンポーネントなのに、横にある「チャット履歴」が更新されるたびに、アイコンまで「もう一度描き直して！」とReactが呼び出してしまうケース。
そんな時は、`React.memo` を使って「中身が変わってないなら、前回の描画をそのまま使い回していいよ！」と指示を出してあげます。Profilerで計測して「あ、このコンポーネント、データが変わってないのに毎回描画されてる！」と気づくのが、最適化の第一歩です。
—
最後に：完璧を目指さなくていい
最初は難しく感じるかもしれません。「ミリ秒単位の計測なんて、まだ早いのでは？」と思うかもしれませんが、「どこが遅いのかを数値で見られる」という武器を持っているかどうかで、あなたのエンジニアとしての安心感は全く変わってきます。
まずは「あ、今1ミリ秒で描画できたんだ」とコンソールを眺めるだけで十分です。そこから少しずつ、Reactと対話するようにコードを磨いていけばいいんです。
困ったときはいつでも、この「探偵ツール」を使ってみてください。あなたのReactライフが、よりスムーズで軽快なものになりますように！応援しています。
コメント