React開発者ツールの探求
この記事はChromeブラウザおよびReact Developer Tools 6.0.1バージョンを基準に作成されています。
この記事で伝えたいメッセージ
- 開発者ツールを活用してパフォーマンスを測定し、最適化を進めることができる。
- React開発者ツールは素晴らしい。これを活用して開発を進めよう。
記事作成の動機
console.logだけを使ってデバッグし、過程を分析しながら開発を進めていた。
そんな中、debuggerを知り、Chrome開発者ツールを少しずつ活用するようになって開発が楽になった。
Reactを使いながら、開発者ツールがあることを知った。
最適化に関心を持ち始めてから、これをもっと本格的に活用できるのではないかと思うようになった。
開発者ツールとは？
開発者ツール（または「デベロッパーツール」または略して「DevTools」）は、開発者がソフトウェアを作成、テスト、デバッグできるようにするプログラムです。
> MDN - 開発者ツール
開発における「ツール」は、通常開発者の開発を助けるソフトウェアを意味する。
プログラムの正常動作の把握やデバッグを効率的に行えるように多くの機能を提供している。（例えば、コードを途中で止めて変数の値を確認したり、コードの実行時間を測定したりするなど）
React開発者ツール
React開発の利便性を向上させるために2015年に発表されたブラウザ拡張機能である。
React公式ドキュメント - New React Developer Tools
React公式ドキュメント - 開発者ツールのインストール方法案内
上記のサイトから簡単にダウンロードできる。
React開発者ツールの設定
「General -> Highlight updates when components render」オプションを有効にすると、コンポーネントがレンダリングされるたびにハイライトされ、レンダリングされていることを確認できる。
開発者ツールを開いた状態で操作してみると、コンポーネントがレンダリングされるたびにハイライトされ、レンダリングされていることを確認できる。
Components Tab
Componentsタブでは以下の機能を確認できる。
- コンポーネントの階層構造を確認できる。
- コンポーネントの状態を確認できる。
- コンポーネントのpropsを確認できる。
つまり、React開発においてconsole.logから脱却させてくれる。
右側で属性値を変更するなどの過程を通じて、状態が変更されたときにコンポーネントがどのようにレンダリングされるかを確認できる。
また、ソースコードの追跡の利便性も提供している。
Logging機能
単にcomponentsの状態操作だけでなく、console.logを代替できる機能も提供している。
logging機能がそれで、右上のバグアイコンを通じてloggingを使用できる。
中央のバグ（bug）アイコンをクリックすると、コンソールにprops、hooks、DOMにあるノード、システムでのファイル位置などコンポーネントに関連するすべての内容を出力できる。
Component Filtering
"Components" -> "Hide Components where ..." -> "Add filter"
React開発者ツールの設定でfilteringを通じて、特定のコンポーネントを非表示にできる。
Componentsタブでオプションを設定すると、複雑なコンポーネントの中から見たいものだけを見つけて確認できる。
Profiler Tab
最適化で最も重要なのはパフォーマンス測定である。
Profilerタブを利用するとパフォーマンスを測定でき、特にレンダリングがどのように行われるかを観察できる。
Profiling方法
プロファイリングタブでは「🔵」を押して記録を開始するまで内容を確認できない。
青いボタンを押して記録を開始すると、レンダリングされるたびにパフォーマンス情報が自動的に収集される。
記録中は普段使用するように使えばよく、収集を停止するには「🔴」ボタンをクリックする。
Commit chart
コミットチャートを見るためには、Reactのレンダリング過程を理解する必要がある。
コミットチャートは、Reactレンダリング過程でCommit段階を記録したチャートである。
コミットはプロファイラーの右上に棒グラフで表示される。
赤く表示された部分がコミットチャートである。
各棒はコミットごとにグループ化されたパフォーマンス情報を示している。
棒の色と高さを通じてレンダリングにかかった時間を比較できる。
長い黄色の棒（🟨）は短い緑色の棒（🟩）より長い時間がかかったことを意味する。
マウスで各棒をクリックするか、左右の矢印ボタンをクリックしてコミットごとの詳細情報を確認できる。
選択されたコミットは青色（🟦）の棒で表示される。
Profile Filtering
プロファイリング時間が長いほど、コミットが多くなりすぎることがある。
そのため、必要な情報を見つけにくくなることがある。
これに対して、プロファイラーではフィルタリング機能を提供している。
"Setting" -> "Profiler"で確認できる。
上記で確認できるように、特定のms以下のコミットを非表示にすると棒が減少するのを確認できる。
Flame Chart
一般的にフレーム（Flame）チャートは、アプリケーションのパフォーマンスを視覚的に分析するためのツールを指す。
主に関数呼び出しスタックと、各関数の実行時間を一目で把握できるように助けてくれる。
React開発者ツールのプロファイラーでのフレームチャートは、特定のコミットに対するアプリケーションの状態を示す。
特徴をまとめると以下のようになる。
- レンダリングパフォーマンス分析：どのコンポーネントがレンダリングされるときにどのくらい時間がかかるかを視覚的に確認できる。
- 再レンダリングの原因把握：不要な再レンダリングが発生する部分を識別して最適化できる。
- コンポーネントツリーの理解：コンポーネント間の呼び出し関係を一目で把握して構造的な改善点を見つけることができる。
各チャートの棒はReactコンポーネントを意味する。
棒のサイズと色はコンポーネントとその子要素までをすべてレンダリングするのにかかった時間を意味する。
幅はコンポーネントが最終的にレンダリングされるときにかかった時間を、色は現在のコミットの一部としてかかった時間を示す。
棒の幅が広いほどレンダリングに長い時間がかかったことを示す。
棒が黄色（🟨）なら相対的に長い時間、緑色（🟩）なら短い時間がかかったと見ることができる。
もし灰色（⬜️）ならこのコミット中にコンポーネントが全くレンダリングされなかったことを意味する。
特定のコンポーネントが何回更新されたかを知りたい場合は、フレームチャートでそのコンポーネント名を持つ棒をクリックすればよい。
右側パネルのRendered at領域でクリックした内容を確認できる。
Ranked Chart
単一のコミットに対して、レンダリングに時間がかかった順に表示する。
各棒はReactコンポーネントを意味する。
レンダリングにかかった時間は、そのコンポーネントと下位コンポーネントまでをすべてレンダリングするのにかかった時間を意味する。
そのため、一般的に上位コンポーネントほどツリーの上部に位置する確率が高い。
フレームチャートと同様に、個別の棒をクリックしてレンダリングされた回数とレンダリングされた原因を追跡できる。
保存/読み込み機能
パフォーマンスを共有するための保存/読み込み機能を提供している。
データはJSONフォーマットで保存され、これを読み込むと簡単にそのデータを確認できる。
まとめ
一度整理してみると、console.logが思った以上に非効率的な方法であることが分かった。
React開発者ツールを活用して、今後最適化作業をより効率的に進めていきたいと思う。
参考資料
React 개발자 도구 활용하기 (Dev Tools) - 시소
React公式ドキュメント - Introducing the React Profiler
React公式ドキュメント - Render and Commit