React Scan
Aiden Bai / Million Software, Inc. · コーディング
React Scanは、パフォーマンス問題を引き起こすReactコンポーネントを見つけて強調する無料のオープンソースツールで、コードの変更は要らない。
React Scan について
React Scanとは
React Scanは、実行中のReactアプリを監視し、必要以上に再レンダリングしているコンポーネントを洗い出す軽量なJavaScriptツールだ。Reactはpropsを値ではなく参照で比較する。だから毎回のレンダリングで新しいオブジェクトや関数が紛れ込みやすい。この静かな誤りが、コードは問題なさそうに見えるのに多くのReactアプリがもたつく理由である。
React Scanは推測に頼らない。コンポーネントがレンダリングするたびにその周囲へ枠を描き、そのレンダリングにかかった時間に応じて色の濃さを変える。レンダリングが重いほど、点滅ははっきり見える。画面を見ていれば、原因はひとりでに名乗り出る。
単純な構成でも動く。コンポーネントを1つも書き換える必要はない。ビルド手順も要らない。この極めて簡単な導入こそ、フレームワーク設定の山にすでに沈んでいる開発者に向けたツールの売りそのものだ。
はじめかた
- プロジェクトで
npx -y react-scan@latest initを実行する。コマンドがフレームワークを検出し、パッケージをインストールし、スクリプトまで配線してくれる。 - あるいは
npm install -D react-scanで手動インストールし、unpkgのscriptタグを他のどのscriptよりも前にindex.htmlへ置く。 - ブラウザでアプリを読み込む。コンポーネントがレンダリングのたびに点滅し、ツールバーがページ上に居座る。
- 点滅するコンポーネントをクリックしてレンダリング回数と時間を調べ、毎回propsを再計算しているコードを直す。
- 本番では切っておく。開発向けに作られており、公開ビルドで無理に動かすのはドキュメントも警告している。
AIツール情報
React Scanの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- 遅いインターフェースを調整するReact開発者：React Scanは直す価値のあるコンポーネントをまっすぐ指し示す。フレームグラフを延々スクロールする代わりに、本当の問題へ時間を注げる。
- 専任のパフォーマンス担当がいないフロントエンドチーム：視覚的な強調表示のおかげで、プロファイリング環境を組んだ本人だけでなく、チームの誰でも無駄なレンダリングに気づける。
タスク
- 無駄な再レンダリングの発見：ツールが再レンダリングを繰り返すコンポーネントに印を付けるので、参照等価性のバグが積み上がる前に見つけられる。
- 操作時にページが引っかかる原因のデバッグ：レンダリング時間がリアルタイムで表示される。遅いクリックと、その裏にあるコンポーネントを結びつけられる。
- コンポーネントライブラリの監査：propsを多く抱える共有コンポーネントを一度のスキャンで洗い、親が更新されるたびに再計算するものを捕まえる。
- 遅いレンダリングの早期発見：時間が長いレンダリングほど濃く陰影が付くので、最悪の箇所が先に浮かぶ。
シーン
- グラフが埋まるにつれて極端に遅くなるダッシュボード：React Scanは、データを再利用せず再レンダリングを繰り返すグラフウィジェットを点滅させる。
- キーを打つたびにもたつくフォーム：ツールは、1文字入力するごとに再レンダリングする入力関連コンポーネントを示す。
- 大きなReactコードベースに加わる新しい同僚：React Scanを入れてアプリを開けば、どの部分がパフォーマンスの重みを背負っているかが分かる。
主な機能
コード変更は不要
コンポーネントに触れずにReact Scanを追加できる。scriptタグを1つ置くか、initコマンドを実行するだけだ。ひとりでアプリに取り付く。ラッパーコンポーネントも高階関数もなく、後で外すと決めても片付けるものは何もない。
視覚的なレンダリング強調
このツールは各コンポーネントをレンダリング中に輪郭で囲み、レンダリング時間に応じて輪郭を色付けする。遅いレンダリングはすぐに目立つ。まず表の数字を読むのではなく、ページを見て、視覚が問題へ導いてくれるのに任せる。
複数の導入手順
unpkgのscriptタグ、npmパッケージ、ブラウザ拡張機能のいずれでもReact Scanを読み込める。Next.js、Remix、単純な構成それぞれの専用ガイドがある。別のスタック向けに書かれたドキュメントを読み替えさせられることはない。
ツールバーと実行時オプション
スキャン中はページにツールバーが居座り、再起動なしでスキャンの入切ができる。scanとuseScan関数が起動し、setOptionsとgetOptionsが実行時に調整し、onRenderはより詳しく見たいときに1つのコンポーネントへ引っかける。
コンソール出力とタイミングフック
logオプションを有効にすると、すべてのレンダリングが時間とともにコンソールへ出力される。commitフック（onCommitStartとonCommitFinish）は各レンダリングの前後で発火するので、Reactの作業と画面の表示を対応させたいときに役立つ。
オープンソースで無料
React ScanはAiden BaiとMillion Software, Inc.によるMITライセンスで配布される。有料プランも席数制限も登録もない。ソースはGitHubにある。プロジェクトは貢献とバグ報告を公開で受け付ける。
メリットとデメリット
メリット
- 導入の手間がゼロ：initコマンドがフレームワーク検出とインストールを代行する。
- 視覚的なフィードバックで、パフォーマンス専門家でなくても無駄なレンダリングが一目で分かる。
- 無料でMITライセンスなので、予算の話をせずに商用プロジェクトへ入れられる。
- 素のReact、Next.js、Remix、ブラウザ拡張機能での利用に対応する。
- オーバーレイで足りないときは、実行時APIとonRenderフックで深く掘れる。
デメリット
- 開発環境でしか動かないので、本番ビルドだけで現れるパフォーマンス問題は捕まえられない。
- 視覚オーバーレイは画面にしか表示されない。つまりヘッドレス環境やサーバーサイドレンダリングのページを、ブラウザに届く前にスキャンできない。
- npmやscriptタグに不慣れなら、導入にはプロジェクト内での小さな手順がやはり必要で、ドキュメントもReactの知識をある程度前提にしている。
よくある質問
無料だ。React ScanはMITライセンスで公開されたオープンソースソフトウェアで、有料プランもアカウントもない。パッケージをインストールすれば、費用をかけずに自分のプロジェクトで使える。
関連コンテンツ
React Scanに関連するツール、スキル、記事を探す。
React Scanの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。