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プロジェクトに対して実行されています:

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

結論

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

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

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.