C
ChaoBro

react-doctor:Aiden BaiチームのAI Reactコード品質チェッカー、7.9k starの裏にある本当の痛み

react-doctor:Aiden BaiチームのAI Reactコード品質チェッカー、7.9k starの裏にある本当の痛み

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-smtext-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タグ)だが、検出ルールライブラリは急速に拡大している。

主要ソース: