react-doctor について
React Doctor は、React のコードベースを検査するコマンドラインツールです。セキュリティ、パフォーマンス、正確性、アーキテクチャの問題を、ファイル単位の診断と 0～100 点のスコアで示します。
主な機能
- 01React コードの 47 種類以上の問題を検出
- 02ファイルパスと行番号を表示
- 030～100 点で結果を評価
- 04Next.js とアクセシビリティも検査
- 05再スキャンで修正を確認
活用シーン
- 01React アプリのセキュリティ問題の発見
- 02パフォーマンスと設計上の問題の確認
- 03変更後のコードベースの検査
- 04診断の重大度に応じた修正の優先順位付け
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/react-doctorを入力して読み込まれたか確認します。
詳細
React Doctor
React コードベースのセキュリティ、パフォーマンス、正確性、アーキテクチャの問題をスキャンします。実行可能な診断とともに 0〜100 のスコアを出力します。
使用方法
npx -y react-doctor@latest . --verbose
ワークフロー
- プロジェクトのルートで上記のコマンドを実行します
- ファイルパスと行番号を含むすべての診断を確認します
- エラー（最も重大度が高い）から順に問題を修正します
- 再度実行してスコアが改善したことを確認します
ルール（47 以上）
- セキュリティ: クライアントバンドルへのハードコードされたシークレット、eval()
- 状態とエフェクト: useEffect 内の派生状態、クリーンアップの欠如、props からの useState、連鎖する setState
- アーキテクチャ: コンポーネント内のコンポーネント、巨大なコンポーネント、インラインのレンダー関数
- パフォーマンス: レイアウトプロパティのアニメーション、transition-all、大きな blur 値
- 正確性: キーとしての配列インデックス、条件付きレンダリングのバグ
- Next.js: metadata の欠如、サーバーデータに対するクライアントサイドフェッチ、非同期クライアントコンポーネント
- バンドルサイズ: バレルインポート、lodash 全体、moment.js、コード分割の欠如
- サーバー: サーバーアクションにおける認証の欠如、after() なしのブロッキング
- アクセシビリティ: prefers-reduced-motion の欠如
- デッドコード: 未使用のファイル、エクスポート、型
スコア
- 75 以上: 良好
- 50〜74: 要改善
- 0〜49: 危機的
コメント
Markdown 対応