AIコードレビューを使っている方は多いと思いますが、「97ファイルを一気にレビューしてほしい」とAIに頼むのは時間もコストもかかりますよね。
そこで紹介したいのが react-doctor です。
コマンド1つで、Reactプロジェクト全体をスキャンし、0〜100点のスコアと改善提案を出してくれるツールです。
実際に自分のNext.jsプロジェクト（97ファイル）で試したところ、1秒未満でスキャン完了しました。
react-doctorとは
- プロジェクト：react-doctor
- リポジトリ：https://github.com/millionco/react-doctor
- 対応フレームワーク：Next.js / Vite / Remix など自動検出
- 対応言語：TypeScript / JavaScript
60以上のルールでコードをチェックします。カテゴリは以下のとおりです。
| カテゴリ | チェック内容の例 |
|---|---|
| State & Effects | 不要なuseEffect、クリーンアップ漏れ |
| パフォーマンス | 重いライブラリの未分割、recharts等の遅延ロード漏れ |
| アーキテクチャ | コンポーネントの肥大化、propsのバケツリレー |
| セキュリティ | dangerouslySetInnerHTML、APIキーのハードコード |
| Next.js固有 |
<a>タグの使用、metadataの未設定、Server Actionの認証漏れ |
| Dead Code | 未使用ファイル・export・型定義 |
| アクセシビリティ | alt属性、label関連付け、キーボードイベント |
インストール不要で使える
# pnpm
pnpm dlx react-doctor .
# npm
npx react-doctor .
プロジェクトルートで実行するだけです。グローバルインストールも可能です。
pnpm add -g react-doctor
react-doctor .
実際のスキャン結果
自分のNext.js 15 + React 19プロジェクトで試した結果がこちらです。
✔ Detecting framework. Found Next.js.
✔ Detecting React version. Found React 19.2.3.
✔ Detecting language. Found TypeScript.
✔ Found 97 source files.
✗ fetch() inside useEffect — use a data fetching library or server component
⚠ "recharts" is a heavy library — use React.lazy() or next/dynamic
⚠ Component "AssetsTable" has 5 useState calls — consider useReducer
⚠ Array index "index" used as key — causes bugs when list is reordered
⚠ Unused file (36)
...
84 / 100 Great
✗ 3 errors ⚠ 119 warnings across 64/97 files in 902ms
84点 / Great という結果でした。
スコアの基準
| スコア | 評価 |
|---|---|
| 75〜100 | ✅ Great |
| 50〜74 | ⚠️ Needs work |
| 50未満 | ❌ Critical |
主なオプション
# 詳細表示（どのファイルに問題があるか）
react-doctor . --verbose
# スコアのみ出力（CI向け）
react-doctor . --score
# mainブランチとの差分ファイルのみスキャン（PRレビューに便利）
react-doctor . --diff main
# 対話プロンプトをスキップ
react-doctor . -y
AIコードレビューとの違い・使い分け
react-doctorを使ってみて気づいたのですが、AIコードレビューとreact-doctorは競合するものではなく、むしろ補完関係にあります。
| react-doctor | AIコードレビュー | |
|---|---|---|
| 速度 | 数秒 | 時間がかかる |
| 得意なこと | 既知のアンチパターン・ルール違反の網羅的検出 | ビジネスロジックの誤り・設計上の問題 |
| 苦手なこと | ロジックのバグ・命名の意図 | 大量ファイルの全体的なカバレッジ |
なぜreact-doctorが速いのか？
react-doctorは「コードを理解する」のではなく、AST（抽象構文木）と正規表現で決まったパターンをマッチングする静的解析です。useEffectの中にfetch()があれば警告、それだけです。AIのように文脈を読む必要がないため、圧倒的に高速です。
ベストプラクティス：
まずreact-doctorで「機械的に検出できる問題」を一掃してから、AIに「より深いロジックの問題」を見てもらう。
この2段階のアプローチが最も効率的だと感じました。
GitHub Actionsでも使える
PRごとに自動でスキャンしたい場合は、GitHub Actionsで組み込めます。
- uses: actions/checkout@v5
with:
fetch-depth: 0
- uses: millionco/react-doctor@main
with:
diff: main
github-token: ${{ secrets.GITHUB_TOKEN }}
差分ファイルのみスキャンするので、CI上でも軽量に動きます。