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


株式会社トラストバンク・プロダクト開発部の @hiroooo23 です。
この記事は トラストバンク [Advent Calendar 2024](https://qiita.com/advent-calendar/2024/trustbank) の16日目の記事です。

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

# AIがコードレビュー？

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

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

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

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

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

# 準備
### レビュー対象になるコードを用意する
すぐに作れるNext.jsの公式サイトの[create-next-app](https://nextjs.org/docs/app/getting-started/installation)を使いました。

### AIツールを決める

今回はCodeRabbitのOSSである「[ai-pr-review](https://github.com/coderabbitai/ai-pr-reviewer)」というツールを使いました。しっかりとツールを選定をしたというわけでなく、
```
・関連する記事が多い
・Github Actionの設定するだけなら導入ハードルが低そう
```
という理由でとりあえず選びました。

:warning:ただし[CodeRabbit](https://www.coderabbit.ai/)のサイトは「Pro版」の案内をしているので注意です！

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

1. OpenAIのAPIクレジットを購入する
以前は無料クレジットがあったようですが、今は最低5ドルのクレジットを購入する必要があるようです。(クレジットを購入せずに利用すると自分はGithub Actionでエラーになりました...)  

2. APIキーを入手
クレジットを購入後、[API keysタブ](https://platform.openai.com/api-keys)でAPIキーを入手できます。

3. GithubにTokenを設定する
GitHubのリポジトリ設定で`OPENAI_API_KEY`に取得したTokenを設定します。
![スクリーンショット 2024-12-16 23.09.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/dbb32468-2c5c-42d1-2b27-3dd45b39cd65.png)


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

```yaml:.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は使用しない　→ :ok_hand:指摘してくれた
![スクリーンショット 2024-12-16 23.27.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/d4b67590-3e39-94bc-0382-ae0f79876971.png)

 - 条件を満たさないimgタグの属性　→ :ok_hand:指摘してくれた
![スクリーンショット 2024-12-16 23.27.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/1de8d84c-1fbd-ea89-aa73-94d3cfbe5366.png)

- aタグにはtarget=_blank　→ :ok_hand:指摘してくれた
![スクリーンショット 2024-12-16 23.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/b860c133-8067-f5cc-a9c7-dfee53f9cfb4.png)

- idの重複　→ :ok_hand:指摘してくれた
![スクリーンショット 2024-12-16 23.28.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/45623a8c-8692-40aa-a25b-21de142e08b8.png)

- href="javascript:void(0)"　→ :frowning2:他の方法の提案はしてくれなかった
上記はリンクの遷移を意図的になくす処理ですが、jsで制御しなくてもaタグにせず、カーソル機能をCSSで実装する方法もあります。今回そのような提案はされませんでした...

 ### TypeSciptのレビュー
明らかにロジックが間違っている部分は指摘してくれました！またany型になっていることや簡単な命名法の部分も指摘、提案してくれています。

- ロジックのミス（true,falseが逆）　→ :ok_hand:指摘してくれた
![スクリーンショット 2024-12-16 23.52.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/20a4cb6f-3377-8d4b-90e6-7fa53558201b.png)

- 型の命名法やany型について　→ :ok_hand:指摘してくれた
![スクリーンショット 2024-12-16 23.53.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/37a5cc74-41f0-643d-e2e3-08393f386ae1.png)
![スクリーンショット 2024-12-16 23.52.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/2fc4fb27-0c93-1a26-0507-6ceaaaa38a83.png)


# まとめ・感想
あまり多くのパターンは試せませんでしたが、自分が想像以上に適切にレビューしてくれました。コーディング規約・レビュー方針をしっかり決めておけば、AIレビューの設定もスムーズかもしれません。

# メモ：要修正・調査事項
### レビューのタイミング調整
今のままだとコミットする度にAIのレビュー処理が走ってしまうのでGithub Actionを調整が必要です。
### コストの計測
今回はパフォーマンスに着目しましたが、使用するchatGPTのモデルによって料金も変わるようなので本来は詳細な調査が必要そうです。
![スクリーンショット 2024-12-17 0.15.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858377/78b2c565-bb45-48a7-baa9-984b22088b49.png)

### セキュリティ面
よくある話ですがAIにコードを学習させていいのか？という部分は当然考える必要がありますね。

# 最後に
トラストバンクでは一緒に働く仲間を絶賛募集中です！
ご興味を持たれた方はぜひお気軽にご連絡ください！

https://www.wantedly.com/projects/1764178

https://www.wantedly.com/projects/1504346


 # 参考記事
https://qiita.com/ysk91_engineer/items/47cff12d0625f003d50d

https://zenn.dev/minedia/articles/7928ef7545b393