00:00:00Reactに「React Doctor」という新しいアンチパターン・スキャンツールが登場しました。
00:00:05開発者はAidan Bai氏。Million.jsを世に送り出した非常に才能豊かな開発者で、
00:00:11他にもReact Grab、React Scan、Amyなどを手掛けています。
00:00:14今日の動画では、このツールがどのように機能するのかを確認し、
00:00:19実際に自分たちで試してみましょう。
00:00:20楽しみですね。では、さっそく見ていきましょう。
00:00:27React Doctorは、一般的なReactのアンチパターンを検出するために設計された
00:00:33シンプルなCLIツールです。不要なuseEffect、アクセシビリティの問題、バケツリレーなどを検出します。
00:00:38内部では、Rustで書かれた最速のJavaScriptリンターの1つである
00:00:43「oxlint」を活用しています。
00:00:44oxlintはRustベースであるため、数万行のコードを
00:00:49わずか数ミリ秒でスキャンできます。
00:00:50これを使用してプロジェクトの抽象構文木（AST）を構築し、
00:00:56フックの使い方、プロップの構造、コンポーネントの境界といった特定のパターンを探します。
00:01:0147項目以上のReactのベストプラクティスに基づいて作成されており、便利なスキャン機能が含まれています。
00:01:08例えば、うっかりハードコードしてしまったセキュリティキーの検出や、
00:01:13ローディング状態のパターンをチェックし、それをいつ使うべきか、
00:01:19あるいは代わりに「useTransition」を使うべき時期について、適切なレポートを提供してくれます。
00:01:21このプロジェクトは完全にオープンソースで、まだ公開されたばかりです。
00:01:25そのため、足りないと思うグッドプラクティスのチェック項目を追加するなど、
00:01:30コミュニティが貢献できる絶好の機会となっています。
00:01:33このプロジェクトで一番クールな部分はUIだと思います。
00:01:36デザインや美意識が素晴らしいだけでなく、oxlintのおかげで非常に高速です。
00:01:42さらに、コーディングAIエージェントのスキルとして実行したり、
00:01:47Node.jsのAPIなどでプログラム的に使用したりすることも可能です。
00:01:52では、実際にこのツールを試してみましょう。
00:01:54ここに、基本的な株価チャートの可視化ツールであるReactプロジェクトがあります。
00:02:00これは私が6年前、AIがまだ存在すらしていなかった頃に書いたものです。
00:02:046年前の自分のReactコードがどれだけ優れていたか、確かめるのは非常に興味深いですね。
00:02:09リポジトリで「react-doctor」コマンドを実行してみます。
00:02:12ご覧の通り、一瞬で結果が出ました。
00:02:15見てください。
00:02:16私のプロジェクトは、ほぼ満点に近いスコアです。
00:02:186年も前の自分が高品質なReactコードを書いていたと知って、
00:02:24心が温まりますね。
00:02:25さて、何が検出されたか見てみましょう。
00:02:27まず、keyにインデックスを使用しているという警告。これは非常に妥当です。
00:02:31次に、「recharts」が重いライブラリであることを認識しています。
00:02:35そのため、代わりに遅延読み込み（lazy loading）を使うようアドバイスしてくれています。
00:02:38また、1つのuseEffect内で4つのuseStateを呼び出していることも指摘されました。
00:02:44「useReducer」の使用を検討すべきとのことです。
00:02:46どれも非常に的確な指摘ですね。
00:02:48ありがとう、React Doctor。
00:02:49では今度は、より大規模なコードベースで試してみましょう。
00:02:52こちらは「Twenty」という非常に人気のあるCRMプロジェクトで、
00:02:57Salesforceのオープンソース代替版のようなものです。
00:02:59これもReactで書かれています。
00:03:00このリポジトリをクローンして、React Doctorがどう評価するか見てみましょう。
00:03:04実行すると、React Doctorはこのプロジェクトがモノレポであることを
00:03:08自動的に検出し、各パッケージを認識します。
00:03:12まずは、マーケティング用ウェブサイトのパッケージのスコアを見てみましょう。
00:03:15ご覧のように、こちらもかなり良いですね。
00:03:18エラーが1つ出ていますが、これはaltタグの欠落だけです。
00:03:22全体として、非常に良いスコアだと言えるでしょう。
00:03:25では、次に「front」パッケージなどをチェックしてみましょう。
00:03:30こちらは99個のエラーが出たので少し劣りますが、それでも「グリーンゾーン」に入っています。
00:03:35ここで私からのおすすめです。
00:03:37もしあなたがGitHubのポートフォリオを改善したい開発者なら、このツールは
00:03:41様々なOSSプロジェクトをスキャンし、有意義な貢献ができる場所を
00:03:47特定するのに非常に役立ちます。
00:03:48というわけで、これがReact Doctorの概要です。非常に軽量で便利、
00:03:52Reactプロジェクトの校正やサニティチェックに
00:03:58大きく貢献してくれるツールだと思います。
00:03:59私も今後の自分のプロジェクトで間違いなく使っていくでしょう。
00:04:03もしこの動画が役に立ったら、動画の下にある
00:04:07高評価ボタンを押して教えてください。
00:04:09また、今後の動画を見逃さないように
00:04:14チャンネル登録も忘れずにお願いします。
00:04:15Better StackのAndrisでした。また次の動画でお会いしましょう。