<p>私が普段心がけている PR の書き方やコードレビューの方法をご紹介しようと思います。<br>
そもそもコードレビューってどうやるの、どういった観点でコードレビューをするのか、みたいなところは、わかりやすい記事がたくさんあるので、そちらを参照していだくと良いと思います。<br>
この記事では、 PR の書き方やレビュアーにアサインされた際のコメントの仕方などをご紹介できればと思います。</p>
<h2 id="1.-pr-%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#1.-pr-%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> 1. PR を作成する</h2>
<p>Github に限定した PR の出し方を順を追って説明します。<br>
下記の画像は PR を作成する際の例です。<br>
ご参考までに。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/yzzywsfcx0fao7a4hokfz65fcwp9" alt loading="lazy" class="md-img"></p>
<h3 id="(1)-%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#(1)-%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E3%81%99%E3%82%8B" aria-hidden="true"></a> (1) ブランチの設定をする</h3>
<p>派生元のブランチと変更ブランチを正しく設定します。</p>
<h3 id="(2)-%E8%AA%AC%E6%98%8E%E3%82%92%E8%A8%98%E5%85%A5%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#(2)-%E8%AA%AC%E6%98%8E%E3%82%92%E8%A8%98%E5%85%A5%E3%81%99%E3%82%8B" aria-hidden="true"></a> (2) 説明を記入する</h3>
<p>フォーマットが決まっていればそれに従うようにします。<br>
特に決まっていなければ、 <code>Why</code> , <code>What</code> を書くと良いと思います。</p>
<ul>
<li>Why
<ul>
<li>なぜこの PR が必要なのかを記載します</li>
<li>PR を出すからにはなにか背景があるはずです</li>
<li>issue があればそのリンクも貼っておくと、レビュアーや後でその PR を見た人が仕様を把握するのに役立ちます</li>
</ul>
</li>
<li>What
<ul>
<li>どんな変更をするのかの概要を書きます</li>
<li>画面の変更もあれば、 before / after のスクショもあると良いです</li>
</ul>
</li>
</ul>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>ここらへんは個人の勝手な考えです。<br>
issue を Github 以外のサービス (例えば Jira や Backlog 等) で管理している場合は description の書き方をちょっと注意したほうが良いかもしれません。<br>
リンクだけしか貼っていないと、仮のそのサービスを利用しなくなった場合に情報が全く追えなくなってしまいます。<br>
そこまで心配しなくても感はありますが...<br>
コードを書くときもそうですが、何かに依存する場合はあまり変更しないものに依存したほうが良いといいますので、 Github に依存したほうが良いと思ってます。<br>
ですので、せめて概要くらいは書いておいたほうが今後のためになると思います。</p>
</div></aside>
<h3 id="(3)-assignees-%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#(3)-assignees-%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B" aria-hidden="true"></a> (3) Assignees を設定する</h3>
<p>PR のこちらの部分です。<br>
自分を設定します。<br>
複数名いる場合はその人も含めておくと良いです。<br>
これをしないと、あとから自分が担当した PR が探しにくくなります。</p>
<h3 id="(4)-submit">
<a class="header-anchor-link" href="#(4)-submit" aria-hidden="true"></a> (4) submit</h3>
<p>全て書き終わったら file の diff をざっと確認し、問題なさそうであれば作成ボタンを押して PR を作成する。</p>
<h2 id="2.-pr-%E4%BD%9C%E6%88%90%E5%BE%8C%E3%81%AB%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#2.-pr-%E4%BD%9C%E6%88%90%E5%BE%8C%E3%81%AB%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> 2. PR 作成後にすること</h2>
<p>作成した PR をそのままレビューに出しても良いですが、必要であれば下記をやったほうが良いです。</p>
<h3 id="(1)-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E8%A8%98%E5%85%A5%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#(1)-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E8%A8%98%E5%85%A5%E3%81%99%E3%82%8B" aria-hidden="true"></a> (1) コードにコメントを記入する</h3>
<p>見ただけでは分からなそうなところにはコメントを入れたほうがレビューしやすいです。<br>
実装して迷ったところなどは積極的にコメントしておくと良いです。</p>
<p>コメントの仕方ですが、コメントを入れたい箇所のプラスマークをクリックします。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/3uzwwwsfivq107vyhsptts21p0v6" alt loading="lazy" class="md-img"></p>
<p>そうするとコメントを入力するフィールドが出てくるので、コメントを書いていきます。<br>
単にコメント書く以外にも色々できますので、 Write -&gt; Preview を繰り返して試してみると良いです。</p>
<p>コメントの submit には、2 通りあります。<br>
<code>Add single comment</code> ボタンは、押すとすぐに反映されます。<br>
<code>Start Review</code> ボタンは、複数のコメントをためて、1 つのレビューとすることができます。<br>
基本的には <code>Start Review</code> の方を使うと良いと思います。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/aufq3i5243e0bg1st0zine35o5uk" alt loading="lazy" class="md-img"></p>
<p>最近、コメントに動画をアップロードできるようになりましたね！<br>
手元で gif に変換しなくて良くなったので、とても助かっています。<br>
cf. <a href="https://github.blog/changelog/2020-12-16-video-upload-public-beta/" target="_blank" rel="nofollow noopener noreferrer">https://github.blog/changelog/2020-12-16-video-upload-public-beta/</a></p>
<p>実際に動く画面を見せられると、レビュアーはとても安心します。</p>
<h3 id="(2)-%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E4%BE%9D%E9%A0%BC%E3%82%92%E5%87%BA%E3%81%99">
<a class="header-anchor-link" href="#(2)-%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E4%BE%9D%E9%A0%BC%E3%82%92%E5%87%BA%E3%81%99" aria-hidden="true"></a> (2) レビュー依頼を出す</h3>
<p>コメントもし終わったらレビューに出しましょう！<br>
レビューお願いします！だけでなく、どんな PR なのかも添えて依頼するとレビュアーは嬉しいと思います。<br>
下記のように一言添えるだけで結構違うはずです。</p>
<div class="code-block-container"><pre><code>xx のため、 oo を変更する必要が出てきました！
レビューお願いします！
</code></pre></div><p>その後 PR の Reviewers にレビュアーを設定してレビュー依頼完了です！</p>
<h2 id="3.-%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC">
<a class="header-anchor-link" href="#3.-%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC" aria-hidden="true"></a> 3. コードレビュー</h2>
<p>どういった観点でレビューするかは、下記の記事をよく参考にさせてもらっています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__753e3f2bada8a" src="https://embed.zenn.studio/card#zenn-embedded__753e3f2bada8a" data-content="https%3A%2F%2Fqiita.com%2Fawakia%2Fitems%2F8344ba751426e386e0f5" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/awakia/items/8344ba751426e386e0f5" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/awakia/items/8344ba751426e386e0f5</a></p>
<p>余談ですが、「！」をつけるとトゲがなくなるので私は結構使います。<br>
これはコードレビューに限らず、普段のテキストコミュニケーションでもそうするようにしています。<br>
ビジネスびっくりです。<br>
更に余談ですが、 <code>:thinking_face:</code> , <code>:man-bowing</code> , <code>:pray:</code> の絵文字はかなり使います。<br>
これつけとけばなんとかなります。</p>
<p>下記は同じ文章ですが受ける印象はだいぶ違うと思いますがいかがでしょうか？</p>
<ul>
<li>xx したほうが良いと思います</li>
<li>xx したほうが良いと思います。</li>
<li>xx したほうが良いと思います！</li>
</ul>
<p>話がそれました。</p>
<p>また、コメントの略語を使っても良いと思います。<br>
前職の同僚から教えていただいた記事ですが、私はこちらの方法を使っています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7b49927192a9c" src="https://embed.zenn.studio/card#zenn-embedded__7b49927192a9c" data-content="https%3A%2F%2Fqiita.com%2Figanin%2Fitems%2Faee297eade84849cc9cd" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://qiita.com/iganin/items/aee297eade84849cc9cd" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/iganin/items/aee297eade84849cc9cd</a></p>
<p>こんなかんじでラベルが打てます。<br>
少し華やかになりますでしょう？</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--ELfJhnA6--/https://img.shields.io/badge/review-must-red.svg" alt="badge" loading="lazy" class="md-img"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--fUwf4_0q--/https://img.shields.io/badge/review-imo-orange.svg" alt="badge" loading="lazy" class="md-img"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--rdM2b4fw--/https://img.shields.io/badge/review-ask-blue.svg" alt="badge" loading="lazy" class="md-img"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--VRFNrQmm--/https://img.shields.io/badge/review-nits-green.svg" alt="badge" loading="lazy" class="md-img"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--DTMFm2hW--/https://img.shields.io/badge/review-suggestion-blue.svg" alt="badge" loading="lazy" class="md-img"></p>
<p>ちなみに URL 変えれば色々できますね。</p>
<table>
<thead>
<tr>
<th>url</th>
<th>badge</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>https://img.shields.io/badge/Hello-world-purple.svg</code></td>
<td><img src="https://res.cloudinary.com/zenn/image/fetch/s--SS3Rrspx--/https://img.shields.io/badge/Hello-world-purple.svg" alt="badge" loading="lazy" class="md-img"></td>
</tr>
</tbody>
</table>
<p>cf. <a href="https://shields.io/" target="_blank" rel="nofollow noopener noreferrer">https://shields.io/</a></p>
<p>レビューして、問題なさそうであれば、 Approve して <code>LGTM</code> しましょう！<br>
さらに一言添えると気持ち良いと思います。</p>
<div class="code-block-container"><pre><code>LGTM です！！
実装ありがとうございます！お疲れさまでした！
</code></pre></div><h2 id="4.-%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E6%88%BB%E3%82%8A%E3%81%8C%E3%81%82%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88">
<a class="header-anchor-link" href="#4.-%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E6%88%BB%E3%82%8A%E3%81%8C%E3%81%82%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88" aria-hidden="true"></a> 4. レビュー戻りがあった場合</h2>
<p>レビュー戻りがあったら対応しましょう。<br>
可能であれば 1 指摘 1 commit にすると良いと思います。<br>
そうすることで、返しのコメントで下記のように書けます。<br>
レビュアーも該当コミットだけ確認すれば良くなります。</p>
<div class="code-block-container"><pre><code>xx するように対応しました！ &lt;commitのリンク&gt;
</code></pre></div><p>一通り修正して返し終わったら Reviews の Status をクリックして黄色の丸に変更します。<br>
これをしないと、レビューアーが下記 URL でレビューリクエストされている PR を確認できません。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a9ad874fb45a6" src="https://embed.zenn.studio/card#zenn-embedded__a9ad874fb45a6" data-content="https%3A%2F%2Fgithub.com%2Fpulls%2Freview-requested" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/pulls/review-requested" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/pulls/review-requested</a></p>
<h2 id="%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E7%B5%82%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> 終わりに</h2>
<p>以上、普段心がけている PR の書き方やコードレビューの方法をご紹介しました。<br>
なかなか記事だと伝えにくいなーと、書いてて思いました。<br>
ご参考になれば幸いです。</p>
<h2 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<ul>
<li><a href="https://qiita.com/awakia/items/8344ba751426e386e0f5" target="_blank" rel="nofollow noopener noreferrer">https://qiita.com/awakia/items/8344ba751426e386e0f5</a></li>
<li><a href="https://www.atlassian.com/ja/agile/software-development/code-reviews" target="_blank" rel="nofollow noopener noreferrer">https://www.atlassian.com/ja/agile/software-development/code-reviews</a></li>
</ul>


心がけている PR の書き方とコードレビューについて

(1) コードにコメントを記入する

Discussion