AIプルリクレビューサービス｢CodeRabbit｣を使い初めて1日たった浅い感想と日記みたいなもの

この記事は[TechCommit Advent Calendar 2023](https://adventar.org/calendars/8839)の24日目の記事です。
前日はかぴえもんさんの[SwiftUIの学習を始めました](https://note.com/kapiemon555_note/n/nb3ecf04376f2)です｡

# CodeRabbitってなに?
ざっくりというとプルリクをレビューしてくれるAiツール
この記事を編集時点はパブリックリポジトリなら無料で使えるとのこと

詳しいことは公式サイトで｡

[introduction](https://coderabbit.ai/docs/introduction)
[CodeRabbit in Action](https://docs.coderabbit.ai/about/features/)
[Plans](https://docs.coderabbit.ai/about/pricing/)

# 使い方
詳しいことは公式サイト見たほうが良い｡

https://coderabbit.ai/docs/get-started/signup

大まかな登録の流れは
1. githubもしくはgitlabのアカウントを使って登録
1. organizationを選択
    * (よく分からなければとりあえず自分のアイコンや名前が表示されてるやつクリックすれば多分大丈夫)
1. 見てもらうリポジトリを個別にするか､全部見てもらうか決める
    * (私は全部にした)

## CodeRabbitの設定を編集してみた
まずは､CodeRabbitに見てほしいリポジトリ名の`Configure`と書かれたオレンジ色のボタンをおして設定画面に行きましょう｡

![スクリーンショット (7591).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/c0be22ca-41e2-d28a-4871-7f9c7883065b.png)
※ リポジトリ名を押すとgithubのリポジトリに飛びます｡

デフォルト設定でも問題ないとは思いますが｡
私は2箇所いじりました
### 言語を日本語に変更
![スクリーンショット (7592).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/d08fa7b5-a063-b340-2dd1-496128814802.png)
デフォルトでは英語でレビューされるので日本語でレビューするように編集しました｡

### どんな風にレビューするか設定
`+Instructions`ボタンを押すと
![スクリーンショット (7594).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/68df4f11-5671-1289-587c-061f5ee0310a.png)

以下の写真のような画面になります｡
![スクリーンショット (7593).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/93ad9e30-ad3e-1bcc-36c5-76041f121cee.png)

#### それぞれの意味
##### Path
どこのどのファイルに

##### Instructions
どんなレビューをするか

---
今回私はこのツールを教えて頂いた方を参考にして
`src`フォルダの`.js`ファイルと`.vue`ファイルに以下のようにレビューするように設定してみました｡
* 初心者だから優しくしてください｡
* 基礎的なこと教えてください｡
* googleが提唱するやり方に沿ってるかどうか確認してください｡(英語なのは公式サンプルからそのままコピペしたから)

変更したら`Apply`ボタンで保存します｡


ここの部分に関する公式のurl貼っときます
**add-repo**

https://coderabbit.ai/docs/get-started/add-repo

**customize-coderabbit**

https://coderabbit.ai/docs/get-started/customize-coderabbit



## プルリクを作ってレビューしてもらう
ブランチ切って作業してコミットしてアップして**プルリク**を作成｡
環境や､編集したコード数にもよりますが大体**5~15**ぐらい待てばレビューが帰ってくるので気長に待ちましょう｡

# こんな感じのレビューをされました｡
以下の写真はvueでテトリス作ったファイルたちをリファクタリングしている時の写真です｡

![スクリーンショット (7625).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/bd79cdbf-cc77-9559-ef63-f0a2ced68fa1.png)

四角で囲んだ部分にこのコミットでどんなことをしたのかというまとめが出力されました｡
この写真では､`新機能`､`改善点`と見出しが表示されていますが｡他のレビューでは`バグ修正`､`リファクタリング`､`パフォーマンス改善`という見出しも表示されました｡どういう編集したかによって変化するようです｡

下にスクロールするとウォークスルーとどのファイルがどのように変更されたかのまとめ(変更概要)が表示されました｡
![スクリーンショット (7626).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/b81b244c-8765-83c4-6866-5d65b4e42c69.png)

更に下にスクロールすると差分に対して､｢このやり方は良くないよ｣｢ここ改善できそうだよ｣などのレビューが表示されました｡
![スクリーンショット (7627).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/08c332fd-2876-2d44-8b7a-95e7c01c50de.png)

![スクリーンショット (7628).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/e8a41c9a-6e48-30c1-cf71-516901a919f8.png)

## CodeRabbitと会話してみた
レビューの`Reply`という場所に文字を入力して送信するとCodeRabbitと会話できるようなのでやってみました｡

先程載せた写真で`json.parse`を使うディープコピーはパフォーマンス的に良くないらしいので､`json.parse()を使わないディープコピー`についてでもっと教えて欲しいとコメントしてみました｡
大体5分ほどで返信が届きました｡
![スクリーンショット (7629).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/151d26ee-2365-4ff0-1f4f-8d5df2d62183.png)


`structuredClone()`という関数があってこれを使えばパフォーマンス良く複製ができるとのこと｡
早速編集したところ,正しく動かずエラー文からして`structuredClone()`ではコピーできない情報だったことが判明｡


というわけで､他の方法がないか質問してみました
![スクリーンショット (7630).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/48d714af-2221-ef04-3721-b9a6cf8d62e5.png)

ローダッシュを使う方法があるので､そちらを試したところ､問題なく正常に動作した｡

パフォーマンスについては目立つほどの改善はなかったが｡自分でローダッシュの`cloneDeep`について調べていたところ､
`json.parse()`では全て文字列にしてしまうので`Date()`など一部情報が壊れてしまうとのことなので､今後は基本`cloneDeep`か今回は動かなかったが､`structuredClone()`でディープコピーをしていこうと思います｡

# この記事を編集段階で現在一番良いなと思ったレビュー
テトリスで今まで消した列の合計によりゲームのレベルが上がる処理を他のファイルに移した時のレビュー

![スクリーンショット (7631).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/0fa9bdb0-9112-fcf7-1ae5-60b833170212.png)
![スクリーンショット (7632).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/25da5e21-efda-abfc-3672-b7fef2589084.png)
私は`if文`で判別していたが､配列と`find`を使う方法を提案してくれた｡
##### before
```javascript
export function levelCalculation(countOfLinesVanished){
    if (countOfLinesVanished >= 270) { 
        return {
            level:10,
            autoDropInterval:1100,
            ojyamaInterval:6000
        }
    }

    if (countOfLinesVanished >= 216) { 
        return {
            level:9,
            autoDropInterval : 1200,
            ojyamaInterval : 7000
        }
    }
    :
    (省略)
    :
    if (countOfLinesVanished >= 6) { 
        return {
            level:2,
            autoDropInterval : 1900,
            ojyamaInterval : 14000
        }
    }

    return {
        level:1,
        autoDropInterval : 2000,
        ojyamaInterval : 15000

    }
}
```
```javascript
/** レベル計算 */
const currentLevel = levelCalculation(this.countOfLinesVanished)

```

##### after
```javascript
export const levelConfig = [
    { threshold: 270, level: 10, autoDropInterval: 1100, ojyamaInterval: 6000 },
    { threshold: 216, level: 9,  autoDropInterval: 1200, ojyamaInterval: 7000 },
    :
    (省略)
    :
    { threshold: 6,   level: 2,  autoDropInterval: 1900, ojyamaInterval: 14000 },
    { threshold: 0,   level: 1,  autoDropInterval: 2000, ojyamaInterval: 15000 },
];
```
```javascript
/** レベル計算 */
const currentLevel = levelConfig.find(config => this.countOfLinesVanished >= config.threshold);
```

おかげさまで約80行あったコードが約15行に減りました｡

**自分だけだとこの方法は絶対に思いつきませんでした｡**
# 過去のプルリクをレビューしてほしいと頼んでみたけど｡｡｡
もっと他の部分も改善していこうと思い｡CodeRabbitを導入する前のプルリクをレビューしてもらおうとしました｡

`@coderabbitai`をつけてコメントを追記するとCodeRabbitと会話ができるのでコメントからレビューしてくださいとお願いしてみる｡

![スクリーンショット (7633).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/c6cf5e1a-cf3d-740c-ef73-3d56ad4fe1dc.png)
しかし上記の写真の状態からいっこうに変化がない

色々つけたしてもう一度コメントを送信してみる｡
![スクリーンショット (7634).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/18677280-d227-a4e1-7428-1ff39988dfca.png)
なぜか`readme.md`だけみてレビューしたもよう｡

今度は､見るファイルを指定して送信してみる
![スクリーンショット (7635).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/5d5d0e3f-19b7-76eb-c35c-028c1dc19b9d.png)
![スクリーンショット (7636).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/caf9949e-7256-fd12-5b8c-0677fd406d25.png)
![スクリーンショット (7637).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/9ec2d6c5-5d8b-4c30-2584-16cd10046cb1.png)

うーむ､今までのレビューのようなものが出力されるのを期待したが求めてるのとちがうものが出力されました｡

最後に`Tetris.js`についてもっと詳しくレビューしてもらえるようにコメントを送信しました｡
![スクリーンショット (7638).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/d76e95ea-28e3-7eb1-fa47-ff64c5d3353c.png)

写真はないですが､
* クラスプロパティの定義
* メソッドの分割
* ゲームロジックの分離

など7箇所の改善を提案をされたがやはり今までのレビューの仕方とは違うものが出力されました｡

正直なことをいうと今までのようなレビューの仕方のほうが見やすいしわかりやすいのでそのやり方で出力してほしかったです｡
chatgptにコード丸投げして｢レビューして｣と依頼するのと変わらないレベルかなと思いました｡
もちろん､私の使い方が悪かったかもしれません｡
今後に期待したいです｡

# (追記 2024/1/8)バグかわかりませんが､こんなパターンもありました｡
一見なんのレビューもされていませんが`Review Status`をクリックして
![スクリーンショット (7647).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/5dd2d481-6b6e-d2e6-5f7b-9960d83c28aa.png)

更に`additional comments`をクリックすると
![スクリーンショット (7648).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/c514b404-af27-4d25-bcab-30edd098382f.png)

いままでのようなレビューの文章が中にありました｡
![スクリーンショット (7649).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421721/85f626aa-24b4-efc4-8493-2f64442be5fe.png)

しかし､この出力の仕方では問答ができないというデメリットがあります｡
(というかこの出力のされ方ではメリットがなさそう…)

CodeRabbitをいじった記憶が無いのですが､なにかいじってしまったからでしょうか…｡

# 注意
1時間あたりでレビューされるファイル数､会話数などの制限が設けられているいます｡
無課金ユーザーはもっと厳し目に制限がされているようです｡

詳しくはfaqの13番まで

https://coderabbit.ai/docs/faq

# 終わりに
レビューによって`cloneDeep`や`structuredClone()`調べるきっかけになったり､自分だけでは思いつかなかった方法を提案してくれるので便利なだけでなく勉強にもなりました｡

最後は不満で本文を終えてしまいましたが､まだまだここ最近に作られたツールなので今後より使いやすくなる､よりよいレビューが出力されることを期待していきましょう｡
私自身ももっとAIを使いこなしていかないといけないなと思いました｡