レビュアーの時によく使うGitHubの便利機能

# はじめに
GitHubにはコードレビューで使える便利機能がたくさんあったので、
今回はそれらを取りまとめてみました。
レビュアーとしてプルリクエストを見る際など参考になれば幸いです^_^

# 目次
[1.Hide whitespace](#1-hide-whitespace) 　( 差分をスペースやタブの差分を無視して表示してくれる )
[2.Pull Request File Tree](#2-pull-request-file-tree)　( Pull Request 上の差分をファイルツリーで表示してくれる )
[3.Suggested Change](#3-suggested-Change)　( レビュアーが提示してきたコードの修正案を即座に取り込める )
[4.Viewed](#4-viewed)　( レビューの進捗度がわかる )
[5.その他・小技](#5-その他小技)
[最後に](#最後に)


# 1. Hide whitespace
* Pull Request の差分をスペースやタブの差分を無視して表示してくれる機能

#### 使い方
URLの末尾に`?w=1`を追加、もしくは設定で「Hide whitespace」を編集
<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/d5bdad9d-b75b-8884-930b-277e7b0a0802.png">

#### メリット

* コード上の差分のみのレビューに集中できるため精度の向上につながる
* 私はインデントもコーディング規約に違反していないか確認したいので、
都度 URLに`?w=1`を追加する形で使っています

#### 参考記事
* [意外と知られてない、GitHubのURLに追加できるコマンド5選！](http://masatolan.com/Webservice/github-secret/#:~:text=%E2%91%A4%E5%B7%AE%E5%88%86%E8%A1%A8%E7%A4%BA%E3%81%A7%E3%80%81%E7%A9%BA%E7%99%BD%E3%81%A0%E3%81%91%E3%81%AE%E4%BF%AE%E6%AD%A3%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%81%AA%E3%81%84%EF%BC%81)
* [GitHub の Pull Request で出ている差分のスペースやタブを無視して見やすくする方法](https://zenn.dev/phi/articles/github-pull-request-hide-whitespace-changes)



# 2. Pull Request File Tree
* Pull Request 上の差分をファイルツリーで表示してくれる機能
* ファイルまたはフォルダ名で、ツリーをフィルタリング可能になったことでファイル移動が簡単になる。


#### 使い方（設定方法）
* Feature previewから設定 ※2022年3月にベータ版としてリリースされましたが、今はデフォルトで設定される？みたいです
<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/a674fac5-52a8-3635-2c3e-0e33f5baa1be.png">　　　
〜設定後〜
今まではフラットに一覧表示されていた　→　有効後はファイルツリーが出現
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/bb810baf-f3f7-c034-beb5-e10f7a3453a0.png">　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/9599c8bb-75c4-8da4-1ccd-46faa0885dc8.png">　　　　　　　

* Pull Request File Treeがリリースされる前はChromeの拡張機能でファイルツリー化する人が多くいたらしい
→ [Octotree を使って GitHub のコードをブラウザでツリー表示しよう！](https://dev.classmethod.jp/articles/use-octotree-github-view-tree/
)

#### メリット
* 差分ファイルが多いと下までスクロールする必要があったので、対象ファイルを確認しやすくなるのは便利です

#### 参考記事
* [GitHubのプルリクエストが見やすくなる「Pull Request File Tree」](https://dev.classmethod.jp/articles/github-pull-request-file-tree/)


# 3. Suggested Change
* レビュアーが提示してきたコードの修正案を画面上の操作だけで取り込めてしまう機能
* 「エディターで修正して、コミットして、プッシュする」という過程を取らずに、修正案を反映させることができる

#### 使い方
* コメント時に下記をクリック→該当箇所を修正(レビュアー側)
<img width="640px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/97badb1d-e628-7119-b2d7-5be357246fe4.png">　　　

* レビュアーから下記のコメントが投稿されていれば
「Commit Suggestion」→「Commit changes」でレビュアーからの修正をそのままコミットできる(レビュイー側)
<img width="640px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/ac5dc577-e9d8-6fa2-bd87-d4500d2aa546.png">　　　
#### メリット
* 軽微な修正点を「提案を即座に取り込んでいける」という面が便利

#### 参考記事
* [こんな機能あったんだ ~GitHub Suggested changes篇~](https://blog.wyrd.co.jp/2021/11/04/%E3%81%93%E3%82%93%E3%81%AA%E6%A9%9F%E8%83%BD%E3%81%82%E3%81%A3%E3%81%9F%E3%82%93%E3%81%A0-github-suggested-changes%E7%AF%87/)
* [-GitHub Docs-プルリクエストでのフィードバックを取り込む](https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/incorporating-feedback-in-your-pull-request)





# 4. Viewed
* 差分ファイルを閲覧したかどうかを判別できる機能
* 各ファイルを確認済み（Viewed）としてマークすると、自動的に折りたたまれる

#### 使い方
差分ファイルのViewedをクリック
![勉強会用 by mu7kata · Pull Request #13 · mu7kata_yuki_Portfolio (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/f19edc0e-718f-2a93-5b41-ebfac3ac75c2.png)


#### メリット
* 変更点が多すぎるとFileChangedが大量にあり、
どのコードを読んでどこまでがOKか判別が手間な時があるため、この機能を使うと便利
* 追加の修正があった場合も変更があったファイルのみViewdが外れるため、レビュイー側の時も使うようにしています。


#### 参考記事
* [Githubのviewedを活用してレビューを効率化する](https://qiita.com/nekoharuyuki/items/66bcfdc2e7b543ba0ae1)

# 5. その他・小技
### 差分ファイルを一括閉じる/開く
![勉強会用 by mu7kata · Pull Request #13 · mu7kata_yuki_Portfolio (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/d82a4186-8452-c73d-0ee7-9201d61279df.png)
#### 使い方　
Macの場合：optionキーを押しながらクリック
Windowsの場合：Altキーを押しながらクリック

### 折り畳みコメント
<img width="600px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/702131/3f1aa639-ffaa-b1e4-0163-cef3122f3ad7.gif">

#### 使い方
GitHubで有効なHTMLの折りたたみ要素を使用（下記をコピペで使えます）
```
<details>
<summary>中身のタイトル</summary>

中身中身中身

</details>
```

#### 参考記事
* [githubのプルリク上でOptionクリックするとファイルを全部開く＆全部閉じるができる](
https://qiita.com/a-nishimura/items/ddb3316f4d316238fbe9)
* [QiitaやGitHubのコメントで折りたたみ要素を作る方法](https://nishinatoshiharu.com/github-folding-comment/)

# 最後に
コードレビューは負担だし時間のかかる作業ですが、品質をあげていくには重要な作業なので
便利機能はフルに使って、効率化していきたいですね。

他にも便利な使い方あれば教えていただけると嬉しいです^_^
閲覧いただきありがとうございました !