Vibe codingが一年経って、ようやく残りを片付ける人が現れた。
Aiden Bai——million.jsを作った人——がチームと共にreact-doctorを発表。キャッチフレーズは率直だ:「Your agent writes bad React. This catches it.」
礼儀正しくはない。だが正確だ。
なぜ必要なのか
Claude Code、Cursor、CodexでReactを書いたことがある人は経験があるだろう:AIが一気に十几个のコンポーネントを生成する。動いてはいるように見えるが、よく見ると——
useEffectの中にuseStateがネストされ、依存配列の半分が欠落。propsのバケツリレーが4層を超えてmemoなし。Tailwindのclassがtext-smとtext-xsを混在。イベントハンドラーがレンダリングごとに再生成され、子コンポーネントが無意味に30回リレンダリング。
AIはコードを速く書ける。だがReactの性能トラップは知らない。
react-doctorがやることはこれだ:AI生成のReactコード専用の健康診断。
何を検出するのか
コードベースと最近2日間の更新から、react-doctorの検出ルールは以下の次元をカバーしている:
性能クラス:不必要なリレンダリング、欠落したmemo最適化、インライン関数による子コンポーネントの再レンダリング、不完全なuseEffect依存配列。これらはAIが最も犯しやすいミスだ。
構造クラス:深すぎるprops drilling、contextを使うべき場所でpropを渡している、不合理なコンポーネント分割。
Tailwind専用:最近2日で更新されたTailwindバージョン検出。
実際使ってみて
このプロジェクトはGitHub ActionとしてCIに統合できる。PR上で直接結果を確認でき、ローカルに何もインストールする必要はない。
ESLintとの違い
ESLint + react-hooksプラグインが似たようなことをしているのでは?と思うかもしれない。
重複はあるが、ポジショニングが異なる。ESLintは汎用ルールエンジンで、覆盖面は広いが深さは限られる。react-doctorはAI生成コードの典型的な欠陥パターンに特化している。
使う価値があるか
7.9k starという数字自体が需要の存在を示している。Aiden Baiチームの実績も安心できる。
プロジェクトはまだ初期段階(276コミット、9タグ)だが、検出ルールライブラリは急速に拡大している。
主要ソース: