GitLabのマージリクエスト機能でコードレビューする

GitLabのマージリクエスト機能でコードレビューを行う方法の覚え書きです。
プロジェクト用に考えたものを汎用化してみました。

## 環境

* GitLab Enterprise Edition 14.2.0-pre

→ 本記事のメインの内容である、Merge Request Reviews関連の機能は、GitLab Core 13.1以降で使えるようです。
詳細は、[Merge Request Reviews ｜ GitLab](https://gitlab-docs.creationline.com/ee/user/discussions/#merge-request-reviews)の「Version history」をご覧ください。

## オプション

まず、マージリクエストのオプションについて。
マージリクエスト後は、以下のようにサイドバーに表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/7c5c4064-1e34-461f-9758-b9404d9874b1.png)


コードレビューに関するものもいくつかあるので、内容を把握しておきましょう。

### Assignee

マージリクエストの直接責任者を割り当てます。
**レビューイ（=レビューされる人）** を指定しましょう。
有料版であれば、複数のAssigneeの割り当ても可能です。

### Reviewer

マージリクエストのレビューメンバーを割り当てます。
**レビュワー（=レビューする人）** 指定しましょう（ネーミングそのままですね）。

### Milestone
タイム・センシティブな変更を追跡します。

### Time tracking
マージリクエストに費やした時間です。

### Labels

マージリクエストをカテゴライズし、適切なイシューボードに表示します。

### Participants

マージリクエストへの参加、もしくはウォッチャーとなっているユーザーの一覧です。

### Notifications

マージリクエストの更新通知を受け取るかどうか。
トグルで指定します。


※マージリクエスト → マージはご存知の方も多いかと思うので、割愛させていただきます。

## 2つのコメント機能

GitLabのマージリクエストには、以下の2種類のコメント機能があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/14d3805b-687f-5dfa-1d81-4e72f2c6cc6d.png)

場合によって使い分けましょう。

### Start a review

記載したコメントをサブミットするまで、保留状態にできます。
このボタンを押した直後はPendingと表示され、本人にしか見えません。
レビューコメントをちょこちょこ入れながら、完了したら、公開みたいな使い方ができるので、忙しい層の方にぴったりですね。

なお、コメントの公開方法は以下の2通り。

#### submit review

このボタンを押すと、保留状態（= Pendingとなっている）コメント全てが公開状態になります。
レビュー内容を一括で返したい時はこのボタンを使いましょう。


#### Add comment now

このボタンを押すと、そのコメントのみが公開状態になります。
レビュー内容を少しずつ反映したいときに。

### Add comment now

コメント後、このボタンを押すとすぐ公開状態になります。
コードに補足事項など入れたい時に使うとよいでしょう。

### 補足事項

「Start a review」がどちらかといえばレビュワー（Reviewer）向け、「Add comment now」がどちらかといえばレビューイ（Assignee）向けのようですが、どちらの立場であっても両機能、使えます。

## コメントの入れ方

実際にコメントを入れてみます。
マージリクエスト機能にある3つのタブ、「Overview」, 「Commit」, 「Changes」のいずれからでも可能ですが、最終的な変更のみが一挙表示される「Changes」タブからがよいでしょう。

### 手順

(1) 「Changes」タブにて、コメントを入れたい行の左端にカーソルを合わせます。
「Add a comment to this line or drag for multiple lines」と出て、青い吹き出しマークが表示されるので、これをクリックしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/7eb3c9a5-1d55-c0b6-be15-921c27bf9a46.png)

(2) 「write」欄にてコメントを書き、「Start a review」もしくは「Add comment now」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/2de520ff-3c6c-f1f4-fe04-f8c2db7d17db.png)

(3) 今回は、「Start a review」にしました。
すると以下のような状態になります。「2つのコメント機能」でも記載の通り、この状態では書いた本人にしかコメントは見えません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/e170118c-bb89-be6f-8227-f383d4ff34f1.png)

(4) 公開OKになったら、「Submmit review」もしくは「Add comment now」をクリックします。「Submmit review」の場合は全てのコメントが、「Add comment now」は対象のコメントのみが公開されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/271737b3-6cf9-6ec0-be68-ccf4401b6c17.png)

(5) 今回は「Submmit review」をチョイスしました（Pendging状態のレビューがひとつしかないので、「Add comment now」の場合と変わりませんが）。
これでコメントが公開状態となり、他の人にも見えるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/10b8f93d-c6df-257f-2476-9c0169d37832.png)


## コードレビュー → マージの流れ

では、どのような状態になったらコードレビュー完了とし、マージしてよいか？
プロジェクトによりけりかとは思いますが、記載のコメントが全てクリアな状態になってから、がよいでしょう。

具体的には、内容が解決したコメントに対し、「Resolve thread」し、「All threads resolved」になってからです。

こちらも手順を書いておきます。

### 手順

(1) コメントが追加されると、ページの右上に「○unresolved thread」（①: ○には、未解決のコメント数が入る）と表示されます。
内容を確認し、コメントを入れるか、問題なければ「Resolve thread」しましょう(②)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/e088febb-53d7-1607-4530-fc4a73dcaf57.png)


(2) 今回はコメントを付けた上で、「Resolve thread」してみます。
(1)の「Reply」と表示されている場所にカーソルを当てると、コメント欄（①）が出現するので、コメントを記載し、「Resolve thread」にチェックを入れ（②）、「Add comment now」をクリックします（③）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/fd89fed9-67c0-111b-2b3e-077ed1fa3767.png)

(3) すると、「Resolve thread」した箇所が解決済状態になります（①）。
また、今回は、「unresloved thread」の数が1のみだったので、ページ右上のステータスが「All threads resolved」に変わりました（②）。
全てのコメントが解決状態になったので、マージOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/282fdc10-8549-4eb7-f347-0bc22180c947.png)

### 補足事項

「Resolve thread」するのは、原則Reviewerとしたほうがよいでしょう。
上の手順は、Assigneeが入れた補足コメントをReviewerがチェック＆OKした想定で書きました。

「All threads resolved」になっていなくても、マージはできてしまいますが、マージに制限を設ける機能もあるようです。
こちらについては、把握できたら別途まとめたいと思います。

## 品質管理について

品質管理の観点からすると、後から見返せることもポイントになってきますが、それも可能。

マージもしくはクローズされたマージリクエストのレビュー内容（コメント）も後から参照できます。

### 手順

(1) 左ペインにて、「Merge requests」をクリックします（①）。
今回はマージ済のマージリクエストでのコードレビューの内容を確認することにしますので、「Merged」をクリック（②）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/ed8f87af-d07c-d323-1372-233643f3c61a.png)

(2) 内容を確認したいマージリクエストをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/f3913c91-e4b8-5c68-fbf3-e97acf14b49f.png)

(3) 「Overview」欄です。
コメントと対応箇所がしっかり残ってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/e7c4284f-1547-74c1-d519-d54031196ebb.png)

(4) ビジュアル的にコメント位置を把握したいなら、「Changes」タブで確認するとよいでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/b52c276f-7191-53c8-1be9-c71c4c543b5d.png)

### 補足事項

レビュー内容を品質管理表にまとめるほうが見やすくてよいですが、二度手間なので、対象のマージリクエストの「Overview」欄へのリンクを貼るなどでもよいのではないかと。

## オマケ

コードレビューをよりスムーズにしてくれる機能をいくつかご紹介します。

### 説明テンプレート

以下のようなマージリクエストのDescription（説明）欄用のテンプレートを作ることができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/0b4a3baa-6090-0fd8-5e47-dd493033c2c5.png)

手順は、[Description templates | GitLab](https://docs.gitlab.com/ee/user/project/description_templates.html)をご覧ください。
「Create an issue template」に記載の手順を参考に、「Create a merge request template」を作るイメージになります。

### 通知

更新時に、通知を受け取る設定です。
「オプション」でも記載の通り、マージリクエストの通知受信設定ができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/7c060143-306d-8b65-4ca3-1944011d254d.png)


個別の設定についても確認しておくとよいでしょう。
詳細は、[GitLab Notification Emails | GitLab](https://docs.gitlab.com/ee/user/profile/notifications.html)をご覧ください。


### 絵文字

コメントに対し、絵文字でリアクションすることも可能です。
コメントを書く余裕がなくても、代わりに絵文字を入れるだけで、雰囲気変わりますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/011eb4ec-f2b9-7bc7-814f-fc238907e36a.png)


詳細は、[Award emoji | GitLab](https://docs.gitlab.com/ee/user/award_emojis.html)をご覧ください。

### その他

GitLabには、他にもコードレビューに便利な機能がたくさんあります。
[コードレビュー | GitLab.jp](https://www.gitlab.jp/stages-devops-lifecycle/code-review/)のページの下部に各ページへのリンクがあるので、ご参考に。


## 終わりに

まだまだ途上ですが、レビューするにあたって、メンバーどうし気持ちよくスムーズにやりとりできるようにしていきたいです。
他に便利な機能や使い方があれば、ぜひ教えてください！

## 参考

* [Merge requests | GitLab](https://docs.gitlab.com/ee/user/project/merge_requests/)

* [Review a merge request | GitLab](https://docs.gitlab.com/ee/user/project/merge_requests/reviews/)

* [プルリクエストでの「Start a review」と「Add single comment」の使い分けがよくわかってなかったのでまとめてみた | Beeeat’s log](https://bake0937.hatenablog.com/entry/2019/10/24/145241)

* [コードレビュー | GitLab.jp](https://www.gitlab.jp/stages-devops-lifecycle/code-review/)