こんにちは、sanagiです。

最近AI流行ってますね！

社内でもAIを積極的に活用していこうという動きがあります。

今回は、生成AIにコードレビューをさせてみて、どんな指摘をくれるのか試してみたいと思います。せっかくなので、ChatGPTとClaudeの2つにレビューしてもらいました。

元のコードの解説

Reactで簡単なTODOリスト作成アプリを作成してみて、AIにコードレビューさせてみます。
コードにはバグがあったり、きれいに書かれていなかったり、ちょこちょこ穴がある状態です。

Point① 型指定

まずは初歩的なところから。
TypeScript + Reactの実装なので、型の指定がないと型エラーが出ます。（アプリは動くんですけどね）

19行目のdeleteTask関数の引数部分は既にエラーが出ていますね。
あと気になるのは、5行目tasksステートがany[]型で定義されているところです。
基本的にanyを使うと読み手からは何の型を使っているか追いにくくなるため、使わないようにすることが推奨されていますね。

Point② エラーメッセージが消えないバグ

addTask関数で、空のまま追加を実行したら、エラー文をセットするようになっているのですが、次回の入力でエラーメッセージが消えないというバグが発生してしまっています。
本来はエラーメッセージをリセットする処理が必要となります。

Point③ チェックしたタスクの数がタスク削除時に更新されない

「①タスクを3つ追加⇒②3つともチェックボックスにチェックを入れる⇒③タスクを1つ削除」
のような操作を実行したとき、以下のようにチェックしたタスクの数が更新されないバグが発生します。

Point④ completedCountステートは不要

チェックしたタスクの数をカウントするのにcompletedCountステートを用意していますが、これはtasksステートから計算できるのでステートとして持たなくても良いです。

まぁ、こんな感じで修正Pointを作ったわけですが、もちろん他の箇所も指摘される可能性はありますね！

早速、レビューしてもらいましょう！

実際に生成AIにレビューしてもらった

というわけで、Claude（Claude Opus 4.6）とChatGPT（GPT-5.2）の両方にレビューしてもらいました。

Claudeでのレビュー

全部載せると長いんで、レビュー指摘内容は簡単にまとめてます。

1. task の初期値が undefined
<input value={task}> に undefined が渡ると React では非制御コンポーネントになるため、初期値は '' にすべきです。

2. エラーが消えない
setError('値を入れてください') の後、正常に追加できてもエラー表示が残り続けます。addTask の成功時に setError('') を呼ぶか、onChange で消すべきです。
※Point②のバグの指摘

3. deleteTask で completedCount が更新されない
完了済みタスクを削除しても completedCount が減りません。toggleTask 内ではカウントを更新していますが、deleteTask では行っていないため不整合が起きます。
※Point③のバグの指摘

4. deleteTask の引数に型がない
TypeScript なので index: number を付けましょう。
※Point①型指定の指摘

5. completedCount は派生状態なので useState にしない方がよい
カウントは tasks から常に計算できるため、独立した state にすると同期漏れ（上記バグ3）の原因になります。
※Point④completedCountステートは不要の指摘

6. any[] を避けて型を定義する
TypeScript の恩恵を受けるためにも型を明示しましょう。
※Point①型指定の指摘

7. key={i} はインデックスなので削除時に不具合が出うる
タスクに一意な ID（crypto.randomUUID() など）を持たせて key に使う方が安全です。

8. 細かい点
・addTask で空白のみの入力も task.trim() でチェックした方が親切です。
・Enter キーでも追加できるように onKeyDown を付けると UX が良くなります。

⇒Point①～④の指摘は全てありました。プラス3つ新しい視点の指摘がありました。

ChatGPTでのレビュー

1. task の型がよくない
inputのvalueに渡しているので、undefined は不要です。
Reactのinputは stringで管理するのがベストです。

2. tasks が any[] なのはNG
TypeScriptの意味がなくなります。
ちゃんと型を定義しましょう。
※Point①型指定の指摘

3. deleteTask に型がない
TypeScriptなのに型がありません。
※Point①型指定の指摘

4. completedCount は state にしなくていい
これは tasks から導出できる値なので state にする必要がありません。
Reactでは「計算できる値はstateにしない」が原則です。
※Point④completedCountステートは不要の指摘

5. エラーが消えない
今は追加成功してもエラーが消えません。
setError('');を addTask の成功時に入れましょう。
※Point②のバグの指摘

6. keyにindexは非推奨
indexをkeyに使うと削除時にバグる可能性があります。
理想はidを持たせること。

⇒Point③の指摘はなかったですが、4. completedCount は state にしなくていいの修正で改善される部分なので問題はなさそうです。
他、プラス2つ新しい視点の指摘がありました。

2つのレビュー結果について

大体のPointは指摘してくれましたね。人間が見るより、圧倒的に早くて正確なのはさすがAIといったところです。

細かく見ていくと、ChatGPTの方は「Point③ チェックしたタスクの数がタスク削除時に更新されない」に関して指摘漏れがありました。
が、Point④completedCountステートは不要の指摘で解消される（completedCountがtasksステートが変わった時点で再計算されため。）ので、問題はなさそうです。

Claudeの方の指摘であった、「task.trim() でチェックした方が親切」、「Enterキーでも追加できるように」といった部分のプラスアルファの部分は、親切ですごいですね！

基本的に、どちらとも指摘内容は完結で参考ソースも載せてくれて、分かりやすかったです。

ソースも修正してもらったので、載せます↓↓