AIにコードレビューを任せてみた

Last updated at 2024-12-16Posted at 2024-12-16

株式会社トラストバンク・プロダクト開発部の @hiroooo23 です。
この記事はトラストバンク Advent Calendar 2024 の16日目の記事です。

トラストバンクには2024年の8月に入社。
現在はふるさとチョイスのフロントエンドの開発を担当しています。

AIがコードレビュー？

以前チーム内でコードレビュー用のAIツールがあるという話を聞き、ついにそんな時代になったのか！と驚きました。

コーディング規約やレビュー観点をあらかじめ設定しておいて、一部自動でチェックしてくれる仕組みがあれば便利そうです。

「実際どこまで指摘してくれるのか？」「実務で使えそうか？」など興味を持ったので試してみました。

今回確かめたいこと

設定したコーディング規約などに沿って、AIが正しくコードレビューをしてくれるか。（セキュリティやコストは今回調べない）

確かめる方法

テスト用のリポジトリで、コーディング規約に反する問題のあるコードをAIツールにレビューしてもらう

準備

レビュー対象になるコードを用意する

すぐに作れるNext.jsの公式サイトのcreate-next-appを使いました。

AIツールを決める

今回はCodeRabbitのOSSである「ai-pr-review」というツールを使いました。しっかりとツールを選定をしたというわけでなく、

・関連する記事が多い
・Github Actionの設定するだけなら導入ハードルが低そう

という理由でとりあえず選びました。

ただしCodeRabbitのサイトは「Pro版」の案内をしているので注意です！

OpenAI APIとGithubの設定

「ai-pr-review」はOpenAIのAPIを使うので、それぞれ設定が必要です。

OpenAIのAPIクレジットを購入する
以前は無料クレジットがあったようですが、今は最低5ドルのクレジットを購入する必要があるようです。(クレジットを購入せずに利用すると自分はGithub Actionでエラーになりました...)
APIキーを入手
クレジットを購入後、API keysタブでAPIキーを入手できます。
GithubにTokenを設定する
GitHubのリポジトリ設定でOPENAI_API_KEYに取得したTokenを設定します。

Github Actionの設定

最後に.github/workflows配下で設定ファイルを作成します。
最終的にできたファイルが下記の通りです！

.github/workflows/code-rabbit.yaml

name: Code Review

permissions:
  contents: read
  pull-requests: write

on:
  pull_request:
  pull_request_review_comment:
    types: [created]

concurrency:
  group:
    ${{ github.repository }}-${{ github.event.number || github.head_ref ||
    github.sha }}-${{ github.workflow }}-${{ github.event_name ==
    'pull_request_review_comment' && 'pr_comment' || 'pr' }}
  cancel-in-progress: ${{ github.event_name != 'pull_request_review_comment' }}

jobs:
  review:
    runs-on: ubuntu-latest
    steps:
      - uses: coderabbitai/ai-pr-reviewer@latest
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
        with:
          debug: false
          review_simple_changes: false
          review_comment_lgtm: false
          openai_light_model: gpt-4
          openai_heavy_model: gpt-4
          language: ja-JP
          system_message: |
            あなたは @coderabbitai（別名 github-actions[bot]）で、OpenAIによって訓練された言語モデルです。
            あなたの目的は、非常に経験豊富なフロントエンドエンジニアとして機能し、下記コーディング規約に基づいて、コードの一部を徹底的に日本語でレビューしてください。
            - HTMLに不要な処理は入れない
            - インラインCSSは使用しない
            - HTMLタグに対して過不足な属性がないか確認する
            - "mv"というクラスがない場合はimgタグにloading="lazy”属性をつけ、altがあるか確認する
            - aタグにはtarget=_blankをつける
            - typescriptを用いた記述については下記を確認すること
              - 型でエラーが起きていないか
              - ロジックが間違っている、もしくは過不足がないか
              - 仕様に関するコメントと関数名、処理内容に乖離がないか

openai_light_model,openai_heavy_modelでchatGPTのモデルを指定する
languageで日本語を設定する（ja-JP）
system_messageにコーディング規約やレビュー観点を記入する

- HTMLに不要な処理は入れない
- インラインCSSは使用しない
- HTMLタグに対して過不足な属性がないか確認する
- "mv"というクラスがない場合はimgタグにloading="lazy”属性をつけ、altがあるか確認する
- aタグにはtarget=_blankをつける
- typescriptを用いた記述については下記を確認すること
- 型でエラーが起きていないか
- ロジックが間違っている、もしくは過不足がないか
- 仕様に関するコメントと関数名、処理内容に乖離がないか

いざ、PR

お手並み拝見ということで、色々と問題のあるHTMLとTypeSciptファイルをプッシュしてPRを出してみました。

実際のレビュー画面はこんな感じでした。

HTMLのレビュー

chatGPTのプロンプト（.github/workflows/code-rabbit.yamlのsystem_messageに書いたこと）に入れたことは全て指摘してくれました！また指示にないidの重複も指摘できてます。

インラインCSSは使用しない　→ 指摘してくれた
条件を満たさないimgタグの属性　→ 指摘してくれた
aタグにはtarget=_blank　→ 指摘してくれた
idの重複　→ 指摘してくれた
href="javascript:void(0)"　→ 他の方法の提案はしてくれなかった
上記はリンクの遷移を意図的になくす処理ですが、jsで制御しなくてもaタグにせず、カーソル機能をCSSで実装する方法もあります。今回そのような提案はされませんでした...