React Academy · レッスン

Profilerタブを使う

Q: 「Profilerタブを使う」で何を学びますか？

レンダーを記録し、フレームグラフを読み取り、遅いコンポーネントを特定します ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

レンダーを記録し、フレームグラフを読み取り、遅いコンポーネントを特定します

「Profilerタブを使う」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、React DevTools Profilerを使ってレンダリングを記録し、フレームグラフを読み取り、パフォーマンスのボトルネックを引き起こしているコンポーネントを特定します。

Profilerを開く

React DevToolsで**Profiler**タブ（Componentsの隣）をクリックします。Recordボタン（円形のボタン）とReload and Profileボタンが表示されます。Profilerは開発モードでのみ動作します。

セッションの記録

**Record**（円形のボタン）をクリックし、アプリを操作します（ボタンをクリックしたり、入力欄に入力したりします）。その後、**Stop**（四角形のボタン）をクリックします。DevToolsがセッション中に発生したすべてのレンダリングを記録します。

フレームグラフの読み取り

フレームグラフには、コミットごとにコンポーネント1つにつき1本のバーが表示されます。幅はレンダリングにかかった時間を表します。縦に高く積み重なっているほど、コンポーネントツリーが深いことを示します。バーの上にカーソルを置くと、コンポーネント名と正確なレンダリング時間を確認できます。

コミットのタイムライン

Profilerの上部には小さなバーが並んでおり、Reactのコミットごとに1本表示されます。バーが高いほど、時間のかかったコミットです。バーをクリックすると、そのコミットのフレームグラフに移動できます。

コンポーネントがレンダリングされた理由

フレームグラフでコンポーネントを選択し、**このレンダリングの理由**セクションを確認してください。props の変更、state の変更、または親コンポーネントの再レンダリングのどれが原因でコンポーネントがレンダリングされたのかが表示されます。

グレーのバーと色付きのバー

グレーのバーは、そのコミットではコンポーネントが**レンダリングされなかった**ことを示します（React が前回の出力を再利用しました）。色付きのバーは再レンダリングされたことを示し、色が濃いほどレンダリング時間が長いことを表します。

ランク付きチャートビュー

上部の切り替えを使って、Flame Graph から**Ranked**チャートに変更してください。レンダリングされたすべてのコンポーネントがレンダリング時間順に一覧表示されるため、最も遅いコンポーネントをすぐに見つけられます。

記録して再読み込み

Record の代わりに **Reload and Profile** をクリックすると、初回レンダリングを含むページの読み込みを記録できます。これにより、初回マウント時に遅いコンポーネントを見つけやすくなります。

本番環境でのプロファイリングの有効化

本番用ビルドでは、デフォルトで Profiler が無効になっています。本番環境をプロファイリングするには、`react-dom/profiling` をエイリアスとして、`scheduler/tracing-profiling` とともにビルドしてください。多くのチームでは、まず開発環境でプロファイリングを行います。

確認問題

React DevTools の Profiler のフレームグラフで、バーの幅は何を表しますか？

まとめ

これで、Profiler セッションを記録し、フレームグラフとランク付きチャートを読み取り、コンポーネントが再レンダリングされた理由を確認し、コミットのタイムラインを使ってレンダリング間を移動できるようになりました。

次のレッスン

次のレッスンは **一般的な React エラーのデバッグ**です。DevTools とブラウザーコンソールを使って、key の不足に関する警告、undefined の state によるバグ、ハイドレーションの不一致を診断します。

よくある質問

「Profilerタブを使う」レッスンは無料ですか？

はい。「Profilerタブを使う」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Profilerタブを使う」で何を学びますか？

レンダーを記録し、フレームグラフを読み取り、遅いコンポーネントを特定しますブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Profilerタブを使う」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る