React Doctorを使ってReactコードのアンチパターンをスキャンする

Reactアプリケーションが一度に崩壊することは稀です。劣化は徐々に進行します—ここに不要なuseEffectが一つ、そこにpropsのバケツリレーが数層、静かに欠落しているアクセシビリティ属性。これらの問題が本番環境で表面化する頃には、修正コストは高額になっています。

React Doctorは、これらの問題が深刻化する前に検出するために構築されたオープンソースのCLIツールです。一つのコマンドを実行するだけで、0〜100のコードヘルススコアを取得し、コードベース全体にわたって実用的な診断結果を受け取ることができます。

React Doctorが実際に行うこと(そして行わないこと)

React Doctorは静的解析ツールであり、ランタイムプロファイラーではありません。レンダリング時間を測定したり、実行中のアプリでコンポーネントの再レンダリングを追跡したりはしません。代わりに、ソースコードを読み取り、アプリケーションを実行する前に構造的な問題を特定します。

この違いは重要です。React DevTools Profilerのようなツールは、ランタイムで何が遅いかを示します。React Doctorはコードが構造的に脆弱である理由を示します—リファクタリングを困難にするpropsのバケツリレー、存在すべきでないエフェクト、バンドルを肥大化させるデッドエクスポート、実際のユーザーに影響を与えるアクセシビリティ違反などです。

また、単なるリンターではありません。ESLintのようなツールは構文の問題を検出し、スタイルルールを強制します。React Doctorは、アーキテクチャ、バンドルサイズ、セキュリティ、デッドコード、フレームワーク固有のパターンなどのカテゴリをスキャンすることで、より広範なプロジェクトの健全性を分析します。フレームワークとReact設定を自動的に検出し、関連するルールを有効化します。

30秒でReactプロジェクトをスキャンする方法

インストールは不要です。プロジェクトのルートに移動して実行してください:

npx -y react-doctor@latest .

各問題の正確なファイルパスと行番号を表示するには、--verboseを追加します:

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

React Doctorは2つのパスを並行して実行します:アクティブなルール全体のlintパスと、未使用のファイル、エクスポート、型、重複をフラグ付けするデッドコードパスです。結果は重要度によってスコアリングされます—エラーは警告よりも重く評価され、最終的なヘルススコアが生成されます:75以上は良好、50〜74は改善が必要、50未満は重大。

表面化されるReactアンチパターン

React Doctorが一般的に特定する構造的な問題のタイプは以下の通りです:

不要なuseEffectの使用 — 状態の派生がレンダリング中ではなくエフェクト内で発生すると、古いデータのバグや追跡が困難なロジックが発生します。React自身のガイダンスは、可能な限りエフェクトに依存するのではなく、レンダリング中に値を派生させることを推奨しています。

深いpropsの受け渡し — 多くのコンポーネント層を通じてpropsを渡すことは、構造的な警告サインです。修正方法は、多くの場合、Context、コンポジション、または状態の局所化です。

不安定なレンダリングを引き起こす可能性のあるリストキー — 不安定な識別子(配列のインデックスなど)を使用すると、リストが並び替えられたときに微妙なUIバグが発生する可能性があります。

重いライブラリのインポート — ライブラリ全体をインポートすると、バンドルが肥大化する可能性があります。React Doctorは、React.lazy()やnext/dynamicのようなフレームワークツールを使用したコード分割が役立つ可能性のあるパターンを強調表示できます。

アクセシビリティのギャップ — 画像のalt属性の欠落やその他のアクセシビリティの見落としは、開発中に気付かれずに通過する可能性がありますが、実際のユーザーに影響を与えます。

ソースコード内の潜在的なシークレット — 静的スキャンは、リポジトリにコミットされたAPIキーやトークンに似たパターンを検出できます。

React Doctorをチームワークフローに統合する

チームにとって最も価値のある統合は、GitHub Actionsワークフローです:

- uses: actions/checkout@v5
  with:
    fetch-depth: 0
- uses: millionco/react-doctor@main
  with:
    diff: main
    github-token: ${{ secrets.GITHUB_TOKEN }}

diffオプションは、プルリクエストで変更されたファイルのみをスキャンし、CIを高速に保ちます。github-tokenが提供されると、結果はPRコメントとして直接投稿されます—ログを掘り下げる必要はありません。

AI支援ワークフローの場合、CursorやClaude CodeのようなコーディングエージェントにReact Doctorが使用するReactベストプラクティスルールを教えることができます:

curl -fsSL https://react.doctor/install-skill.sh | bash

これにより、エージェントはReact Doctorが適用するのと同じルールセットを使用して問題を診断し、修正を提案できます。

実際のヘルススコア

React Doctorは、いくつかの有名なオープンソースReactプロジェクトに対して実行されています:

プロジェクト	スコア
tldraw	84
excalidraw	84
twenty	78
posthog	72
cal.com	63
dub	62

成熟した、よく保守されたプロジェクトでさえ、改善の余地があります。これらの問題は静かに蓄積されるため、自動スキャンは早期に検出する最もシンプルな方法の一つです。

結論

React Doctorはコードレビューを置き換えるものではありませんが、その面倒な部分を取り除きます。構造的な問題、アクセシビリティのギャップ、デッドコード、セキュリティリスクは自動的に検出されるため、人間のレビュアーはロジックと設計の決定に集中できます。

現在のプロジェクトで一度実行してみてください。返されるスコアは、一週間の手動レビューよりもコードベースの健全性について多くを教えてくれるでしょう。

よくある質問

React DoctorはTypeScriptプロジェクトで動作しますか?

はい。React DoctorはJavaScriptとTypeScriptの両方のコードベースをサポートしています。JSXとJSファイルと並んでTSXとTSファイルを解析し、デッドコード検出には未使用の型や型エクスポートも含めることができます。一般的なTypeScriptプロジェクトでは追加の設定は必要ありません。

React DoctorはReactプラグインを使用したESLintとどう違いますか?

Reactプラグインを使用したESLintは、構文、スタイル、限定されたReact固有のルールに焦点を当てています。React Doctorは、フレームワークとReactのセットアップに基づいてチェックを適応させながら、アーキテクチャ、バンドルサイズ、セキュリティ、デッドコード、アクセシビリティなどのカテゴリをスキャンすることで、より広範なプロジェクトの健全性を分析します。

CI内で変更されたファイルのみにReact Doctorを実行できますか?

はい。GitHub Actions統合は、プルリクエストで変更されたファイルにスキャンを制限するdiffオプションを受け入れます。これによりCIパイプラインを高速に保ちます。github-tokenオプションと組み合わせることで、ビルドログを確認することなく、簡単にレビューできるようにPRコメントとして結果が投稿されます。

React DoctorはNext.jsとReact Nativeをサポートしていますか?

React DoctorはNext.jsなどの特定のフレームワークを検出し、フレームワーク固有のチェックを適用できます。また、使用されているルールセットに応じて、React Nativeのような環境で問題となるパターンにフラグを立てる場合もあります。