react-doctor

React Doctor

React Doctor を使用して、React のコードベースをスキャンし、セキュリティ、パフォーマンス、正確性、アーキテクチャに関する問題を検出します。診断結果を活用して修正の優先順位を決め、コード全体の健全性を向上させます。

使用方法

npx -y react-doctor@latest . --verbose

最新のルールセットを実行するには、意図的に @latest を使用してください。

ワークフロー

1. プロジェクトのルートでコマンドを実行し、出力全体を記録します。
2. パッチを適用する前に診断結果を確認します。報告された各問題について、実際の実行時の動作、プロジェクトの規約、フレームワークの制約に照らして検証します。
3. 検証済みの問題を修正します。重大度の高い診断結果から着手してください。
4. React Doctor を再実行し、診断結果の一覧が減っていることを確認します。
5. プロジェクトのチェック（該当する場合は lint、テスト、型チェック、ビルド）を再実行し、リグレッションがないことを確認します。

ルールの対象範囲（47 以上）

React Doctor には 47 以上のルールが含まれています。以下のカテゴリは代表的な例であり、正式または網羅的なルール一覧ではありません。

• セキュリティ：クライアントバンドル内のハードコードされたシークレット、eval()
• 状態とエフェクト：useEffect 内の派生状態、クリーンアップの欠如、props からの useState、連鎖的な setState
• アーキテクチャ：コンポーネント内のコンポーネント、巨大なコンポーネント、インラインのレンダー関数
• パフォーマンス：レイアウトプロパティのアニメーション、transition-all、大きな blur 値
• 正確性：配列のインデックスを key として使用、条件付きレンダリングのバグ
• Next.js（Next.js を使用するプロジェクト）：メタデータの欠如、サーバーデータのクライアント側での取得、非同期クライアントコンポーネント
• バンドルサイズ：バレルインポート、lodash 全体、moment.js、コード分割の欠如
• サーバーアクション（Next.js を使用するプロジェクト）：サーバーアクションでの認証の欠如、after() を使わないブロッキング処理
• アクセシビリティ：prefers-reduced-motion の欠如
• デッドコード：未使用のファイル、エクスポート、型

スコア

• 75 以上：優秀
• 50～74：改善が必要
• 0～49：重大