react-doctor

React Doctor

React のコードベースをスキャンし、セキュリティ、パフォーマンス、正確性、アーキテクチャに関する問題を検出します。0～100 の健全性スコアを出力します。

React コードを変更した後：

npx react-doctor@latest --verbose --scope changed を実行し、スコアが低下していないことを確認します。

スコアが下がった場合は、コミットする前に回帰を修正してください。

一般的なクリーンアップやコード改善の場合：

npx react-doctor@latest --verbose（デフォルトの --scope full）を実行して、コードベース全体をスキャンします。重大度の高いものから順に、まずエラー、次に警告を修正してください。

UI デザインに絞った監査の場合：

npx react-doctor@latest design --verbose を実行します。これにより、デザインタグが付いた UI の構成、タイポグラフィ、インタラクション、アクセシビリティ、モーションに関するルールのみが選択されます。一般的な健全性スキャンではオプトインのままになっている、対象を絞ったルールも含まれます。

実行時のパフォーマンス問題の場合：

対話型ターミナルで npx react-doctor@latest scan <url> --format json を実行します。React Doctor は分離されたシステム Chrome プロファイルを開き、ユーザーが遅いインタラクションを再現している間、DevTools のトレースを記録します。また、React がレンダリングするとコンポーネント名とともに紫色の枠を点滅表示します。ユーザーが Enter を押すと停止します。まず構造化された概要を読み、その後、返されたローカルの .json.gz トレースを調べて、CPU、ブラウザー、React コンポーネントに関する証拠を確認してください。

ユーザーが認証済みのブラウザー状態を必要とする場合は、--cdp <remote-debugging-url> を使用します。これには、リモートデバッグを有効にした Chrome がすでに実行されている必要があります。Cookie を求めたり、ユーザーのブラウザープロファイルをコピーしたりしないでください。トレースは機密性の高いローカルアプリケーションデータとして扱い、明示的な許可なくアップロードしないでください。

/doctor — ローカルでの包括的なトリアージワークフロー

ユーザーが /doctor と入力する、「run react doctor」と言う、または（単なる回帰チェックではなく）包括的なトリアージ／クリーンアップを依頼した場合は、正式なローカルトリアージ手順書を取得し、そのすべての手順に従ってください：

curl --fail --silent --show-error \
  --header 'Cache-Control: no-cache' \
  https://www.react.doctor/prompts/react-doctor-agent.md

この手順書が唯一の信頼できる情報源です。作業ツリーを直接編集する、スキャン → 絞り込み → トリアージ → 修正 → 検証のループを定めています（コミットも、PR の作成もしません）。プロンプトのソースを更新すると、再インストールしなくても、次回の取得時にすべてのエージェントに反映されます。

手順書内で必要に応じて取得する、ルールごとに対応したプロンプト（https://www.react.doctor/prompts/rules/<plugin>/<rule>.md）と組み合わせてください。各修正には、正式なレビュー済みの手順を使用します。

チームが編集対象のコードに既存の検出結果を含めたい場合は、--scope contextual --base origin/main を使用します。ルールによって、要素、関数、ファイル、または関連ノードの明示的な集合を選択できます。exhaustive-deps では、フック呼び出しまたは解決済みのローカルコールバックを編集すると、変更されていない依存配列に関する検出結果が現れることがあります。より広い範囲を対象としないルールでは、変更行によるフィルタリングが維持されます。

ルールの設定や説明

ユーザーがルールを理解したい、そのルールに異議がある、または実行するルールを無効化／調整したい（コードを修正するのではなく）場合は、references/explain.md を読み、その指示に従ってください。まず npx react-doctor@latest rules explain <rule> を実行し、その後、最も限定的な制御として npx react-doctor@latest rules disable|set|category|ignore-tag … を適用します。これにより、doctor.config.*（または package.json#reactDoctor）が編集されます。

コマンド

npx react-doctor@latest --verbose --scope changed

フラグ	目的
.	現在のディレクトリをスキャンします
--verbose	ルールごとに影響を受けるファイルと行番号を表示します
--scope changed	ベースブランチと比較して新たに発生した問題のみを報告します（デフォルト：すべて）
--scope contextual	各ルールで選択された変更済み関数、JSX 要素、またはファイル内の検出結果を報告します
--scope lines	変更された行の問題のみを報告します
--score	数値スコアのみを出力します
design	UI デザインに特化した診断のみを実行します

ベーススキャンの再利用

完全な --json スキャンを保存してから、--baseline base-report.json を渡すと、新しい検出結果のみを報告できます。これは --scope changed と併用することもできます。両方のスキャンで同じバージョンとルールを使用してください。検出結果はルールとファイルパスごとにグループ化され、Git のリネームが反映されます。各グループの件数が増加した場合のみ報告されます。増加していないグループでは、位置の照合は行われません。フィンガープリント、メッセージの類似性、Git に基づいて調整された行の距離を使って、追加された検出結果を特定します。件数が変わらないフォーマット変更や編集では、新しい検出結果は報告されません。保存されたレポートでは、同じ textComponents、rawTextWrapperComponents、respectInlineDisables の設定を使用する必要があります。これらの設定を変更した場合はベースレポートを再生成するか、Git の比較を使用してください。フィンガープリントまたは sourceFilterConfigHash がない古いレポートは再生成する必要があります。

GitLab の警告ステータス

GitLab CI では、--warning-exit-code 123 を指定すると、ブロック対象ではない警告に対して 123 を返します。これを allow_failure: { exit_codes: 123 } と組み合わせてください。エラーの場合は引き続き 1 を返します。2 から 255 までの整数を指定できます。--blocking warning の場合は引き続き 1 を返します。--blocking none または --score を指定すると、この警告シグナルはスキップされます。