はじめに

本記事では、AIを活用したコードレビューツール「CodeRabbit」を使用して、コードレビューをさせてみたので手順と簡易的な検証結果を解説します。
ついでに初めてcursorも導入してバイブコーディングもやってみました。

CodeRabbitは、GitHubのPull Requestに対して自動的にコードレビューコメントを生成してくれるAIツールです。本記事では、簡易的なTODO管理アプリケーションを作成し、意図的にバグを仕込んだコードに対してCodeRabbitがどのようにレビューを行うかを検証してみました。

本当は12月のアドベントカレンダーにしたかったのに、バタバタしまくってて逃しました・・・・

CodeRabbitとは

CodeRabbit（コードラビット）とは、AI（人工知能）を活用してコードレビューを自動化するサービスで、プルリクエスト（PR）に対して詳細なフィードバックを自動生成し、開発者のレビュー時間と労力を大幅に削減します。コードの品質向上、セキュリティ問題の早期発見、チーム全体の学習促進に貢献し、GitHubやGitLabなどの主要なプラットフォームと連携して動作し、AST（抽象構文木）解析による高精度なレビューが特徴です。
（Google検索時のAI による概要より引用）

以下の特徴があります：

自動レビュー: Pull Requestが作成されると自動的にレビューを開始
詳細なコメント: コードの問題点や改善提案を具体的に指摘
セキュリティチェック: セキュリティ上の問題も検出
ベストプラクティス: コーディング規約やベストプラクティスに沿った提案
無料プランあり: オープンソースプロジェクトや小規模プロジェクト向けの無料プランが利用可能

前提条件

以下の環境で実施

Git: バージョン管理システム
GitHubアカウント: リポジトリのホスティング
Node.js: 18以上（アプリケーションの実行環境）
Cursor: AI統合開発環境（CodeRabbitの統合機能を使用）
CodeRabbitアカウント: コードレビューサービスの利用

作業手順

手順1: Gitプロジェクトの新規作成

まずは新しいGitプロジェクトを作成

mkdir todo-review-test
cd todo-review-test
git init

GitHub上にリポジトリを作成し、ローカルリポジトリと接続します。

git remote add origin https://github.com/your-username/todo-review-test.git

手順2: TODO管理アプリケーションの作成

Cursorを使用して、簡易的なTODO管理アプリケーションを作成します。

大雑把な指示でもそれなりのものを短時間で作成してくれました。
すごいなこれ！

主な機能

TODOの追加
TODOの一覧表示
TODOの完了/未完了の切り替え
TODOの削除
完了済みTODOと未完了TODOの分類表示

手順3: 動作確認

作成したアプリケーションが正常に動作することを確認します。

開発サーバーの起動

npm run dev

ブラウザで http://localhost:3000 にアクセスし、以下の動作を確認：

TODOの追加が正常に動作する
TODOの一覧が正しく表示される
TODOの完了状態を切り替えられる
TODOの削除が正常に動作する

ちゃんと動く！

手順4: 意図的なバグの仕込み

CodeRabbitのレビュー能力を検証するため、以下の5つのバグを意図的に仕込みます。
これもcursorからAIエージェントに指示してやってくれました（ジェバンニ！）

バグ1: UIの状態管理不備（難易度1）

ファイル: components/TodoItem.tsx

削除ボタンのdisabled属性がisDeletingのみを考慮しており、isUpdatingが考慮されていません。これにより、更新処理中でも削除ボタンが有効になり、データの整合性が損なわれる可能性があります。

<button
  onClick={handleDelete}
  disabled={isDeleting}  // isUpdatingが考慮されていない
  className="text-red-600 hover:text-red-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
  title="削除"
>
  {isDeleting ? '削除中...' : '🗑️'}
</button>

バグ2: データバリデーション不備（難易度2）

ファイル: app/api/todos/route.ts

descriptionが空文字列の場合、nullに変換されずにそのまま空文字列がデータベースに保存されます。データの一貫性が損なわれる可能性があります。

const todo = await prisma.todo.create({
  data: {
    title: validatedData.title,
    description: validatedData.description,  // 空文字列がそのまま保存される
  },
})

バグ3: React Hooksの依存配列問題（難易度3）

ファイル: components/TodoList.tsx

useEffectの依存配列にfetchTodosが含まれているが、fetchTodosが毎回新しい関数として作成されるため、無限ループが発生する可能性があります。

const fetchTodos = async () => {
  // ...
}

useEffect(() => {
  fetchTodos()
}, [fetchTodos])  // fetchTodosが毎回新しい関数として作成される

バグ4: セキュリティ/データ整合性問題（難易度4）

ファイル: app/api/todos/[id]/route.ts

IDの形式検証が行われておらず、不正なID形式が送られても検証されません。エラーハンドリングが不十分です。

try {
  const { id } = await params
  const todo = await prisma.todo.findUnique({
    where: { id },  // IDの形式検証がない
  })
  // ...
}

バグ5: 本番環境での接続管理問題（難易度5）

ファイル: lib/prisma.ts

本番環境でもPrismaクライアントをグローバルに保存しないため、リクエストごとに新しいPrismaClientインスタンスが作成される可能性があります。接続プールが適切に管理されず、データベース接続が枯渇する可能性があります。

export const prisma = globalForPrisma.prisma ?? new PrismaClient({
  log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
})

if (process.env.NODE_ENV !== 'production') {
  globalForPrisma.prisma = prisma
}

これらのバグを仕込んだコードをコミットし、プッシュします。

手順5: CodeRabbitのアカウント作成

CodeRabbitのアカウントを作成します。

CodeRabbitの公式サイトにアクセス
「Sign Up」または「Get Started」をクリック
GitHubアカウントでサインイン
必要に応じてプランを選択（無料プランも利用可能）

GitHubアカウントでサインアップすると、勝手に連携してくれて楽です。
メールアドレスなどでサインアップした場合は、別途GitHubとCodeRabbitの連携が必要です。
（今回はGitHubアカウントでサインアップしたので、手順は省略）

手順6: リポジトリの確認

CodeRabbitのダッシュボードで、テスト対象のリポジトリが正しく認識されていることを確認します。

リポジトリが一覧に表示され、レビュー対象として設定されていることを確認しました。

手順7: CursorのCodeRabbitでレビュー

CursorにはCodeRabbitの拡張機能があります。Cursor内でコードレビューを実行できます。
無料プランではこれしか使えないです。

CursorでのCodeRabbit機能の使用方法

Cursorのコマンドパレットを開く（Ctrl+Shift+P / Cmd+Shift+P）
「CodeRabbit」と入力して関連コマンドを検索
レビューを実行

Cursor内でCodeRabbitのレビュー結果を確認できます。

拡張機能では難易度3のバグだけ検出されました。
無限ループはきっちり見つけてくれましたが、それ以外はスルーでしたね。

手順8: Pull Requestの作成

GitHub上でPull Requestを作成します。これにより、CodeRabbitが自動的にレビューを開始します。

手順9: GitHub上でのCodeRabbitの動作確認

Pull Requestが作成されると、CodeRabbitが自動的にレビューを開始します。

CodeRabbitの動作確認

Pull Requestのページを開く
CodeRabbitのコメントが自動的に追加されるのを待つ
レビュー結果を確認

しばらく待つと、サマリーに加えてシーケンス図なども出してくれました！
ポエムは毎回出してくれます笑

手順10: レビュー結果確認

GitHub上では2件のレビュー結果を出してくれました。
1件は難易度3の無限ループに関して、もう1件はインポートの不足でした（意図して挿入したバグではない）。

バグ3のレビュー結果

React Hooksの依存配列問題について、CodeRabbitは以下のようなコメントを生成しました：

想定していた修正案であり、これは合格と言えるでしょう！

レビュー結果のサマリー

CodeRabbitは、仕込んだ5つのバグのうち、以下のように検出しました：

バグ1（難易度1）: 未検出
バグ2（難易度2）: 未検出
バグ3（難易度3）: ✅ 検出
バグ4（難易度4）: 未検出
バグ5（難易度5）: 未検出

まとめ

本記事では、CodeRabbitを使用したコードレビューを試してみて、手順の解説をしてみました。
レビュー結果としては残念ながら今回の検証では5件中1件の検出にとどまりましたが
試行回数が5件なので、これだけでCodeRabbitの品質を確定づけるものではありません。
他の言語でも試して、もっと色んなバグの種類を仕込んでみる必要があります。

作業効率という面ではとても便利だと思いました。
私は一人プロジェクトを業務外でよくやるので、品質はそこまで重視していなかったりします。
一人でやってるとレビューは割と適当になりがちなので、品質を一定に保つために導入するのはありだなと思いました。

メリットデメリットを理解したうえで導入検討するのはいいのではないかと思います。
最後に諸々まとめておきますので、参考になれば幸いです！

CodeRabbitのメリット

自動レビュー: Pull Requestが作成されると自動的にレビューを開始
詳細なコメント: 問題点と修正方法を具体的に提案
時間の節約: 人間のレビュアーが基本的な問題をチェックする時間を削減
学習効果: コードレビューのベストプラクティスを学べる

CodeRabbitのデメリット（注意点）

完璧ではない: AIによるレビューなので、100%正確とは限りません
人間の判断が必要: 最終的な判断は人間のレビュアーが行う必要があります
誤検知の可能性: 問題ないコードを問題として指摘する場合もあります

参考リンク