AIレビューについて(導入方法、使用感、料金)

## 概要

弊社(株式会社コムニコ)でレビュー効率を上げるために、AIレビューの導入を検討しました！
今回ご紹介するのはPR-Agentというライブラリで、無料範囲で十分に成果を上げてくれます。

設定方法、料金、実践的な使用感を具体的に解説しているので、さらっと読んでみてください！

Github ActionとBitBucket Pipelineで設定するYAMLテンプレートもご用意しております。

**読了時間目安は約5 ~ 10分**です。

## 目次

- [(3行で)弊社について](#3行で弊社について)
- [PR-Agentでできること](#pr-agentでできること)
- [各機能のレビュー](#各機能のレビュー)
    - [前提](#前提)
    - [`/describe`について](#describeについて)
    - [`/review`について](#reviewについて)
    - [`/improve`について](#improveについて)
    - [`/ask`について](#askについて)
- [OpenAIにかかったお値段](#openaiにかかったお値段)
- [導入方法](#導入方法)
    - [設定テンプレート: Github Action](#設定テンプレート-github-action)
    - [設定テンプレート: BitBucket Pipeline](#設定テンプレート-bitbucket-pipeline)
- [つまずいたポイント](#つまずいたポイント)
    - [大きいPRに対応する方法](#大きいprに対応する方法)
    - [BitBucket Pipelineの場合](#bitbucket-pipelineの場合)
- [SNSに興味があるエンジニアを求む！](#snsに興味があるエンジニアを求む！)
- [参考にさせていただいた記事](#参考にさせていただいた記事)

## (3行で)弊社について

3行で弊社について説明させてください！

株式会社コムニコは、SNSのプロフェッショナル集団が集まったSNSの総合代理店です。
React, Vue, Express(Node.jsベースのバックエンドFW)を利用して開発しています。
でき立てのもの〜10年選手のものまで自社プロダクトの開発に携われます！

## PR-Agentでできること

💎マークの機能は有料版での提供となります。

PR-Agentのメイン機能である`Review`, `Describe`, `Improve`, `ask`は無料版でご利用いただけます。親切な設計が嬉しいポイント高いです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/e13f290d-a1db-98da-ca8f-e00e91ba56fb.png)

PR-Agent公式ドキュメント

https://pr-agent-docs.codium.ai/installation/

## 各機能のレビュー

- 一次レビューにおいては、ある程度の範囲で効果が見込めそう
- しかし、時折、誤解を招くような指摘も見受けられた
- PRの概要をまとめてくれる機能は大変便利
- 価格は思っていたよりもお手頃
- 自己レビューを行う際に、非常に役立つツールであると感じた

上記の点を踏まえて、実際にPR-Agentを使用してみました。

### 前提

私の個人プロジェクトにPR-Agentを導入し、以下のような規模のPRをレビューしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/7b162eca-e343-ff88-b319-b28ec3055437.png)


PR-Agentでは主に以下の4つのコマンドを使用します。

- ◎ `/describe`
    PRの概要を教えてくれる

- ◎ `/review`
    レビュー時に特に注意すべき点についてのアドバイスを提供してくれる
    
- ○ `/improve` もしくは `/improve --extended`
    改善点を指摘してくれる
    `--extended` オプションを利用すると、大きなPRにも対応し、より詳細なチェックを行ってくれる
    
- (`/ask`)
    PRに関する質問をすることができる
    
以下に、上記の4つの機能を使用した結果をまとめます。

### `/describe`について

使用感は非常に良好でした！
以下のようにPRの概要を提示してくれるため、メリットが多いと感じます。

- PRの作成時間を削減できる
- レビュー時に、どのファイルでどのような変更が行われているかが一目でわかる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/be7e375d-1fbd-184a-dae9-515be590ca00.png)

### `/review`について

レビュー時のアドバイスを提供してくれるため、これに基づいて自己レビューを徹底する方針が取れます。また、レビューをする際には、デバッグする箇所を的確に把握しやすくなります。

※ コードフィードバックは複数提示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/ee8a490c-aaef-4820-434b-bac5c28c6c16.png)

### `/improve`について

時折、見当違いの指摘を受けることもありますが、「一般的な実装ではそこに気をつける」ということが学べます。
また、たまに非常に鋭い指摘を受けることもあります。

`/improve --extended` というオプションをつけると、大きなPRにも対応してくれます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/55bc10e0-b9d1-e823-109e-e507b6f89b25.png)

### `/ask`について

私が作成したPRでは特に質問する点がありませんでしたが、友人が作成した別のPRで行った質問には、愚直に信じるのではなく、対話を通じて実際に改善案を得ることができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/fab8eae6-f7dd-e429-21bf-41cd748f6109.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/ce07ade8-4b44-3821-bff1-7c8d08ec5b97.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/e7044cbb-8f2d-c401-454c-d5ebcb9a881a.png)

## OpenAIにかかったお値段

GPT-4 Turboを使用して15～20回のやりとりを行い、この価格であれば十分に採算が取れると思います。PR-Agent自体は無料で、OpenAIの料金のみが発生します。

0.1~0.2$/request

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895998/1beeb972-8b57-515f-4b4e-ab5f4c556078.png)

## 導入方法

簡単に導入できて、基本的には[公式ドキュメント](https://pr-agent-docs.codium.ai/installation/)通りに進めれば導入できます！

ただ、踏み込んだ設定をするためには、下記の公式の設定ファイルからどんなパラメータが設定できるのか見当をつける必要があります。

[公式の PR-Agent 設定ファイル](https://github.com/Codium-ai/pr-agent/blob/main/pr_agent/settings/configuration.toml)

Github Action, BitBucket Pipelineに限りますが、設定テンプレートを作成したのでご活用いただけたら幸いです！

### 設定テンプレート: Github Action

```yaml
name: pr-agent

on:
  pull_request:
    types: [opened]
  issue_comment:
    types: [created, edited]

permissions:
  pull-requests: write
  issues: write

jobs:
  pr_agent:
    runs-on: ubuntu-latest
    name: Run PR Agent
    if: ${{ github.event.sender.type != 'Bot' }}
    steps:
      - id: pr-agent
        uses: Codium-ai/pr-agent@main
        env:
          OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          github_action.auto_describe: true
          github_action.auto_review: true
          github_action.auto_improve: true
          PR_DESCRIPTION.EXTRA_INSTRUCTIONS: '日本語で記述してください。タイトルに次のPrefixをつけてください。`feat:`, `fix:`, `perf:`, `refactor:`, `test:`, `chore:`, `ci:`, `docs:` etc'
          PR_REVIEWER.EXTRA_INSTRUCTIONS: '日本語で記述してください。'
          PR_CODE_SUGGESTIONS.EXTRA_INSTRUCTIONS: '日本語で記述してください。'
```

### 設定テンプレート: BitBucket Pipeline

```yaml
pipelines:
  pull-requests:
    '**':
      - step:
          name: Initialize PR Review
          script:
            - echo "Initializing PR review..."
      - step:
          name: PR Agent Review
          image: python:3.10
          trigger: manual
          services:
            - docker
          script:
            - docker run -e CONFIG.GIT_PROVIDER=bitbucket -e OPENAI.KEY=$OPENAI_API_KEY -e BITBUCKET.BEARER_TOKEN=$BITBUCKET_BEARER_TOKEN codiumai/pr-agent:latest --pr_url=https://bitbucket.org/$BITBUCKET_WORKSPACE/$BITBUCKET_REPO_SLUG/pull-requests/$BITBUCKET_PR_ID review --pr_reviewer.extra_instructions='日本語で記述してください。'
            - docker run -e CONFIG.GIT_PROVIDER=bitbucket -e OPENAI.KEY=$OPENAI_API_KEY -e BITBUCKET.BEARER_TOKEN=$BITBUCKET_BEARER_TOKEN codiumai/pr-agent:latest --pr_url=https://bitbucket.org/$BITBUCKET_WORKSPACE/$BITBUCKET_REPO_SLUG/pull-requests/$BITBUCKET_PR_ID describe --pr_description.extra_instructions='日本語で記述してください。タイトルには次のコミットリントパターンの設定をしてください。 `feat:`, `fix:`, `perf:`, `refactor:`, `test:`, `chore:`, `ci:`, `docs:` etc'
```

### プロンプトを細かく指定したい場合
`PR_DESCRIPTION.EXTRA_INSTRUCTIONS` などに記載してください！参考までに、僕は`PR_CODE_SUGGESTIONS.EXTRA_INSTRUCTIONS`に下記のプロンプトを指定していました。

```
'日本語で回答してください。
あなたは Next.js や React.js, TypeScript, Prisma, TailwindCSS に精通した Web アプリケーションエンジニアです。
渡されたコードについて改善点を見つけ、変更する理由を説明した上で、変更後のコード例を示してください。
改善点がない場合には絶対にコメントをしないでください。

特に以下の点を指摘してください:
  - 誤解を招いたり、実態を正確に表していない命名があるか
  - 適度に変数を定義し自己ドキュメントされているか
  - 冗長な書き方のコードがないか
  - ファイル内で @var のようなインスタンス変数しか定義していないのに var のような変数名を使っていないか、またはその逆
  - N+1問題（N+1 query problem）を引き起こす箇所
  - 読んで理解が難しい箇所にコメントが適切にされているか
  - コメントの内容は日本語として読んでわかりやすく、簡潔に説明できているか
  - 理解の難しい複雑な条件式が作られていないか
  - 新しいメソッドを定義したときにテストコードを書いているか
  - テスト内の説明文は、テストの内容をわかりやすく適切に表しているか
  - 明らかなセキュリティの問題があるか

誰にとっても読みやすいコードになるよう、改善点を見つけたら積極的にレビューしてください。
あなたに渡されるコードは一部分であるため、未定義のメソッドやクラスなどの指摘については消極的にしてください。'
```

## つまずいたポイント

ChatGPTに課金しているのとは別に、OpenAIに課金の設定をしないとAPIを使うことができません…
APIキーの取得方法については以下のリンクを参照してください。

[APIキーの取得方法](https://www.goatman.co.jp/media/gpt-4/gpt-4-api-howto-and-pricing/)

### 大きいPRに対応する方法

大きなPRに対応するための対処法には2つの方法があります。

1. `/improve --extended`コマンドを使用する
`/improve` コマンドだけは、 `--extended` というオプションで大きめのPRに対応することができます。
2. より大きなトークンを扱えるモデルに切り替える

[PR-Agent Improve 機能詳細](https://pr-agent-docs.codium.ai/tools/improve/?h=#extended-mode)

### BitBucket Pipelineの場合

`improve` を利用しようとするとエラーが発生しました…
今はまだ使えないみたいです。

## SNSに興味があるエンジニアを求む！
株式会社コムニコは、SNSのプロフェッショナル集団が集まったSNSの総合代理店です。
エンジニアチームでは、X(旧Twitter)やFacebook, Instagramに関する3つのプロダクトの開発を行っています！

* SNSに興味がある
* 成長フェーズの自社プロダクト開発に興味がある
* 歴史の長い自社プロダクトの開発に興味がある
* フルスタックエンジニアのキャリアを築きたい！

そんなエンジニアを大募集しているので、興味のある方はぜひ下記のリンクをポチッとしていただければ幸いです！！
カジュアル面談でお会いしましょう！

https://hrmos.co/pages/lmg/jobs/1675114439462850596

## 参考にさせていただいた記事

どれも非常にわかりやすかったので、ぜひ見てみていただけると嬉しいです！

https://tech.layerx.co.jp/entry/2023/09/01/102612

https://qiita.com/k-nhr/items/c73a19668529248268c4

https://recruit.gmo.jp/engineer/jisedai/blog/chatgpt-pr-agent-github-actions/

https://zenn.dev/taroshun32/articles/pr-agent-pull-request-ai-review

https://sreake.com/blog/pr-agent-and-similar-systems/