CodeRabbitを体験するハンズオンを作りました

CodeRabbitはAIコードレビューサービスです。幾つかのプロダクトがありますが、基本はGitHubやGitLabと連携して、プルリクエストに対してコードレビューを提供します。

そんなCodeRabbitを実際に体験できるハンズオンを作成しました。本記事ではその内容を紹介します。

題材について

ハンズオンの題材として、RabbitKanbanというシンプルなカンバンアプリケーションを用意しました。サーバー不要で、 index.html をブラウザで開くだけで動作します。

Rabbit Kanban

これに検索機能を追加するハンズオンになります。

ベースになるリポジトリ

まずは以下のリポジトリをフォークしてください。

goofmint/RabbitKanban: CodeRabbitを使ったハンズオンの題材です

フォークしたら、ローカルにクローンしてください。 <YOUR_NAME> の部分はあなたのGitHubユーザー名やフォーク先に置き換えてください。

git clone [e-mail]:<YOUR_NAME>/RabbitKanban.git

CodeRabbitのセットアップ

次に、CodeRabbitのセットアップを行います。まだCodeRabbitのアカウントを持っていない場合には、AI Code Reviews | CodeRabbit | Try for Freeからサインアップしてください。クレジットカードは不要で、2週間の無料トライアルが利用できます。

アカウント取得後、以下の手順でCodeRabbitをセットアップします。

VSCode拡張機能を使う場合

VSCodeやWindsurf、CursorでCodeRabbitを使う場合には、以下の拡張機能をインストールしてください。

• VSCode拡張機能

インストールして、先ほどクローンしたリポジトリを開きます。CodeRabbitの拡張機能が有効になると、アクティビティバーにCodeRabbitのアイコンが表示されます。それをクリックすると、 User CodeRabbit for Free ボタンが表示されるので、クリックしてサインインします。

認証完了すると、下の画像のようにリポジトリに関する情報が表示されます。

CLIを使う場合

CLIを使う場合には、以下の手順でセットアップします。 なお、Windowsの場合はWSL2で実行してください。

curl -fsSL https://cli.coderabbit.ai/install.sh | sh

インストール後、 coderabbit または cr コマンドが使えるようになります。次に、以下のコマンドでサインインします。

coderabbit auth login 

CLIの場合は認証するとトークン文字列が表示されるので、それをコピーしてターミナルに貼り付けてEnterキーを押します。

認証後は、 coderabbit auth status コマンドで認証状態を確認できます。

coderabbit auth status

CodeRabbitを試す

検索機能の要件は .tmp/tasks/task-8-search-filter.md に記載されています。取り組み方によって、幾つかの方法があります。なお、修正が面倒な場合は、実装例をダウンロードして、中身をリポジトリに上書きコピーしてください。

VSCode拡張機能を利用する場合

VSCode拡張機能を利用して、AIコーディングエージェントを使う場合には、以下のプロンプトを使ってください。

.tmp/tasks/task-8-search-filter.md の内容に基づいて、実装をお願いします
- ドキュメントを読み直して
- SVGは直接記述するの禁止。Iconifyを使うこと
- ファイルは300行を超えないこと。分割しながらDRYの原則に沿って進めて
- コメントはレビュアーが理解できるよう多めに、わかりやすく

実行した結果、以下のようにファイルの修正・追加が行われています。

レビューする

そして、CodeRabbitの Review all changes ボタンをクリックして、コードレビューを実行します。

レビューが終わると、指摘内容が表示されます。指摘事項の上に Fix with AI ボタンがあるので、それをクリックするだけでも修正が可能です。

AIコーディングエージェント + CLIを利用する場合

AIコーディングエージェントを利用して、CLIで自動修正を行う場合には、以下のプロンプトを使ってください。

.tmp/tasks/task-8-search-filter.md の内容に基づいて、実装をお願いします
- ドキュメントを読み直して
- SVGは直接記述するの禁止。Iconifyを使うこと
- ファイルは300行を超えないこと。分割しながらDRYの原則に沿って進めて
- コメントはレビュアーが理解できるよう多めに、わかりやすく
- 実装完了したら `coderabbit  --prompt-only` を実行して、レスポンス内容から修正を行って。このコマンドは、最大3回までバックグラウンドにて実行し、発生した指摘を修正してください。
- タスクの最後に、どういったレビューの指摘があったのかを一覧で教えてください

この場合、実装後に自動的にレビューと修正が行われます。おそらく途中で coderabbit --prompt-only を実行していいか確認されるので、許可してください。

すべての指摘が修正されると、最後にレビュー指摘の一覧が表示されます。以下はその例です。

  Coderabbit feedback addressed:

  1. Escape apostrophes in escapeHtml to match docs (js/text-utils.js:23).
  2. Avoid innerHTML assignment by returning DOM nodes from highlightSearchText (js/ui-renderer.js:149, js/text-utils.js:71).
  3. Make search/filter handlers accessible by defining global exports (js/search-filter-handlers.js:220).

  Next step (optional): run through UI manually to confirm combined search + filter scenarios.

CLI単体でレビューする

CLI単体でレビューを行う場合には、リポジトリにて以下のコマンドを実行してください。

coderabbit

変更に対してレビューが実行され、指摘内容がファイルごとに確認できます。AIエージェント向けのプロンプトをコピーしたり、サジェストを適用できます。

まとめ

CodeRabbitはAIコードレビュー専門のサービスであり、適切なコンテキストに基づいた専門的レビューを提供します。ぜひ、こちらのハンズオン資料を基に、CodeRabbitを体験してみてください！

AI Code Reviews | CodeRabbit | Try for Free