明日から使えるGitHub便利機能 7選 (2021年版)

![github-logo_icon-icons.com_73546.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/f4f11ca4-c5ff-311c-b3ea-8e504af62f74.png)

# はじめに
現在、多くの開発のバージョン管理ツールとしてGitが利用されるようになりました。
その中でも特に多くの開発で利用されている**サービス**と言えば[GitHub](https://github.com) 。
この記事ではチーム開発を加速させるオススメ機能を7つ厳選してご紹介致します。

# 対象読者
- GitHubを用いてチームで開発・運営を行っている方
- GitHubをうまく活用してコミュニケーションを円滑にしたいと考えている方

# お品書き
1. Issues/PullRequestテンプレート機能
2. コードオーナーの設定と自動マージ
3. Draft pull Request機能
4. コードハイライト機能
5. Diff機能(ブランチ、タグ、コミット)
6. GitHub Grep機能(高度検索機能)
7. ブランチタイムライン表示機能

---

# 1. Issues/PullRequestテンプレート機能

IssuesやPullRequest作成時に文面をテンプレート文章を自動的に挿入します。

**【メリット】**

- 記載内容の統一し、コミュニケーションロス低減
- 過去のIssueのコピペ・編集の手間の削減

**【デメリット】**

記載粒度が細かいと形骸化する。

## Issuesテンプレートの作成方法

Settingタブから実施要領は以下の通りです。
（※リポジトリ設定権限がない場合は後述の「Settingタブが表示されない場合(リポジトリの設定権限がない場合）」を参照ください）

### 1.1.1 GitHubのSettingタブを表示

![github_001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/5325ed6f-3b57-d631-b782-239f376a8a63.gif)

### 1.1.2 Features - Issuesより「Set up templates」を選択

![github_002.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/96df8728-39f4-0dd2-cf2a-0fe99cf7e950.gif)

### 1.1.3 テンプレートを選択と編集

テンプレートは以下3種類から選択することができます。
1. Bugテンプレート(バグ用テンプレート)
2. Featureテンプレート(機能リクエストテンプレート)
3. カスタムテンプレート(空のテンプレート）

追加したテンプレートは画面上でカスタマイズすることも可能です。
![github_003.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/d71b97d6-2213-f4b1-a71e-0ced9e15c9da.gif)

### 1.1.4 テンプレートをコミットする

「Propose changes」ボタンより追加したテンプレートをコミットすることができます。
オプションとして、以下2種類を選択することができるので、プロジェクトの方針に合わせて選択しましょう。
1. デフォルトブランチへ直接コミット
2. 別ブランチを作成しプルリクエストを作成する

![github_004.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/3ac2ca67-2089-8b5f-e3c6-f7ef13ab0f24.gif)

#### コミットされると以下のディレクトリにmdファイルが追加されます

```
repo/.github/ISSUE_TEMPLATE/
```

![github_005.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/11d589e3-3602-8982-4804-f8d91b9abea0.gif)

### 1.1.5 Issuesからテンプレートを選択します

Issuesから「New issue」をクリックすると追加したテンプレートが表示されます。

![github_006.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/13bbd22a-c8ec-275c-7f31-924a69836366.gif)

#### Settingタブが表示されない場合(リポジトリの設定権限がない場合）

直接以下のディレクトリへファイルを作成しPushしても同様の効果を得ることができます。フォーマットは以下の通り。

```
---
name: タイトル
about: フォーマットについての説明
title: 'タイトルのPrefix'
labels: ラベル
assignees: アサイン
---

# テンプレート本文(Markdownで記載)
```

#### Ex.) 質問用のIssueテンプレートを追加したい場合
```
---
name: Question
about: Ask the developer about the feature
title: '[Question]'
labels: question
assignees: ''
---
# テンプレート本文(Markdownで記載)
```

`repo/.github/ISSUE_TEMPLATE/questions.md`を追加すると、Issuesに追加した内容が追加されていることがわかります。

![github_007.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/941a7e33-1a08-9ca8-ed9c-7e478795812a.gif)

## Pull Requstテンプレートの作成方法

Pull Requstのテンプレートは直接ファイルレポジトリへファイルを追加する形となります。
ファイルの配置先は以下の通りとなります。

```
repo/.github/PULL_REQUEST_TEMPLATE.md (デフォルトのテンプレートファイル)
repo/.github/PULL_REQUEST_TEMPLATE/[任意の名前].md
```

#### ファイルの追加方法( デフォルトテンプレートの場合 )

**テンプレートの追加**
![github_008.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/259ffb1b-e50a-ebe8-3ff6-68978fec77ab.gif)

**プルリクエストへの反映**

![github_009.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/c9778505-d80d-54c4-fdff-b5e46a359fef.gif)

本設定はGitHub上の画面から実施しましたが、ローカルで編集してPushする方法でもOKです。

#### 任意テンプレートの追加方法と利用方法

**利用用途**
本機能を利用する場合は用途・運用を事前に検討ください。

- 機能追加、バグでテンプレートを分けたい
- masterブランチやstagingブランチへのマージでテンプレートを分けたい

**設定方法**

プロジェクトルールを運用を検討する必要があります。以下は`master`ブランチマージする時のPull Requestは別のテンプレートを利用する。

.githubディレクトリに`PULL_REQUEST_TEMPLATE`を作成し、任意の名前のmdファイルを作成します。

![github_011.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/4a5597fe-ea7b-a684-74b6-e00959a6087e.gif)

Pull Request時のパラメータに`&template=[テンプレートファイル名]`を入れることで適用されます。

![github_011.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/af62fad1-05c8-2751-2572-84f26a0e573c.gif)

#### コピペ用テンプレート
先程作ったテンプレートの通りとなります。プロジェクトに合わせてカスタマイズしてご利用ください。

```
**対処概要**

 ～ 対処内容を簡潔に明記する ～

**対処内容**

 ～ 対処内容を明記する ～

**関連チケット**

 ～ 関連するissue / pull request を明記する ～

**関連資料**

 ～ 設計書のパス(URL）を明記する

**チェックリスト**

  - [ ] タイトルは簡潔か
  - [ ] コーディングガイドラインに遵守しているか
  - [ ] フォーマッタは実行しているか
  - [ ] 静的解析にて潜在バグを指摘されていないか
  - [ ] 単体試験はパスしているか
  - [ ] 疎通確認は実施しているか

**特記事項**


**証跡**

```

尚、上記で配置する方法の他にPull Requestテンプレート( `PULL_REQUEST_TEMPLATE.md` )は以下ディレクトリへの配置も許容しております。Pull Requestのテンプレートは一つでOKという場合は以下に配置しましょう。


|  場所  |  ファイル名  |
| ---- | ---- |
| リポジトリ直下   |  repo/PULL_REQUEST_TEMPLATE.md  |
| docs/配下  |  repo/docs/PULL_REQUEST_TEMPLATE.md  |

---

# 2. コードオーナーの設定と自動マージ

本章ではブランチへのマージ事故を回避すると共に、開発に待ち時間を作らないために用意されているGitHubの機能について紹介致します。

**【機能内容】**

- デフォルトブランチの変更
- ブランチへの直接のPush禁止
- コードオーナー設定
- 自動的にマージする機能（現在ベータ版）

**【メリット】**

- マージ事故の防止
- レビューの徹底。コード品質の保証
- 待ち時間の軽減

## 2.1. デフォルトブランチの変更

repository新規作成時、defaultブランチは `master`となります。(※)
masterブランチへ誤って操作をされるのを防止するため、`develop`ブランチをデフォルトブランチにします。

※2020年10月に`master`を`main`ブランチにするという[発表](https://github.blog/changelog/2020-10-01-the-default-branch-for-newly-created-repositories-is-now-main/) がありましたが本記事ではmasterという名称で記載します。

#### Settings -> Branches -> Default branch

![github_012.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/7af6d31f-5a76-f1c7-0074-61f700d583df.gif)

## 2.2. ブランチへの直接Push禁止

リリース後ソースコードやE2E試験環境のソースコードが入っているブランチへ直接Pushされると、管理者の知らないところでコード改変が行われてしまい、品質を担保することが難しくなります。本例では`master`ブランチに直接Pushすることを禁止とする設定を行います( プロジェクトによって `staging`や`develop`ブランチへのpushも制限も検討しましょう。)

### 2.2.1 直接Push禁止設定

ここでは`master`ブランチを対象に最小限の設定のみかけます。プロジェクトに応じて設定項目を見直ししましょう。

#### Settings -> Branches -> Branch protection rules -> Add rule

|  設定項目  |  設定内容  |
| ---- | ---- |
| Branch name pattern   | 制限をかけたいブランチ名を指定します(正規表現利用可)  |
| Protect matching branches |  Pull Requestを強制する( これで直接Pushされることはなくなります) |
| Include administrators |  管理者にも適用する |

![github_013.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/877cdb7c-0ffb-a46b-f1a3-b4cc2c794b67.gif)

### 2.2.1. 直接Push禁止設定

#### Rejectの確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/d5447ed9-e46e-43a3-7467-b37939ef808d.png)

#### Reviewを必須となっていることの確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/e44bf9a1-cbb4-2723-26ae-750132ad7475.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/5a7e6245-6adf-96aa-4a32-5fa340bf5d89.png)

## 2.3. コードオーナーの設定

先程の設定では**誰かが承認するとMerge可能となってしまいます**。そのため**必須レビューア**の設定を行います

### 2.3.1. コードオーナーの設定を有効にする

1. Settings -> Branches -> Branch protection rule -> 対象ルールを選択
2. Protect matching branches に 「Require review from Code Owners」にチェックを入れる

![github_014.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/5de7613a-f215-3240-7478-d7c9a0205e5f.gif)

### 2.3.2. CODEOWNERSファイルを作成する

リポジトリ直下に`CODEOWNERS`ファイルを作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/c278e228-d87f-d6ec-7d3e-283cea634bec.png)

**レビューアを細かく分ける場合**

monorepo運用を行っている場合やプログラミング言語によってレビューアを変更したいというケースがあるかと思います。

|  設定例  |  対象内容  |
| ----  | ---- |
| *     | 全ファイル対象  |
| *.js  | 拡張子による制限 |
| /dir  | ROOT配下にあるdirディレクトリにある全てのファイル |
| dir/  | dirディレクトリ名配下にある全てのファイル |
| dir/* | dirディレクトリ名配下の第一階層のファイル |

詳細は公式ドキュメントをご連絡ください。
https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners

#### コードオーナーのレビューが必須であることの確認

**鍵穴マークが表示されていること**
![github_015.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/258e0e2c-be96-252b-ac1e-ada14e3ee5e1.gif)

**「Code owner review required」と表示されていること**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/f5f33585-d0d8-b718-15e1-6b091b7f6472.png)

## 2.3. 自動マージの設定(ベータ版)

必須レビューアがApproveしたら即座にMergeする設定をいれ、マージ漏れや待ち時間を減らします。

### 2.3.1. 自動マージの有効化

Settings -> Merge button -> Allow auto-merge へチェックをつける

![github_016.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/a3f50215-8053-8c72-231f-2b620ba3c523.gif)
 
### 2.3.2. プロテクトされたブランチへのPull Requestを出す

**Enable auto-mergeと表示されていること。auto-merge有効後、必須レビューアによるレビューにてApproveされたら自動マージされます**

![github_017.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/0276abb8-3423-a502-e4dd-d36d10fd5c65.gif)

---

## 3. Draft pull Request機能

作業中のPull Requestの作成します。

**メリット**

- 進捗状況の見える化
- 有識者によるウォークスルーレビューによる手戻り工数の低減
- Merge事故防止( Draft pull requestではMerge不可 )

### 3.1. 「Create pull request」ボタンの右にある「▼」より「Create draft pull request」へ変更し、ボタンを押下する

![github_018.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/b7581fd1-1c32-2e7e-c5a6-a7793b547d43.gif)

### 3.2. 「Ready for review」で正式のPull Requestへ昇格させる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/2abfa9b4-8d3f-0ffc-480e-7fecf1eb1c65.png)

---

## 4. コードハイライト機能

Gitのテキストファイルを行単位でハイライトします。

**メリット**

コミュニケーションの円滑化( ファイル名、クラス名、関数名、行番号を伝える工数を削減 )

### 4.1. 構文

```
[1行] 
https://github.com/[owner]/[repo]/blob/[branch]/**filepath**/#L行番号

[複数] 
https://github.com/[owner]/[repo]/blob/[branch]/**filepath**/#L行番号-#L行番号
```

**例）1行をハイライト**
[https://github.com/yukiusa/slick3-sample/blob/master/src/main/scala/com/yukiusalab/sample/slick3/Main.scala#L30](https://github.com/yukiusa/slick3-sample/blob/master/src/main/scala/com/yukiusalab/sample/slick3/Main.scala#L30)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/6f585eea-4904-4988-9458-1facf82820a3.png)


**例）複数をハイライト**
[https://github.com/yukiusa/slick3-sample/blob/master/src/main/scala/com/yukiusalab/sample/slick3/Main.scala#L30-#L34](https://github.com/yukiusa/slick3-sample/blob/master/src/main/scala/com/yukiusalab/sample/slick3/Main.scala#L30-#L34)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/83933ce0-f383-8f69-434c-9948245ae448.png)

---

## 5. Diff機能(ブランチ、タグ、コミット)

ブランチ間やTag間、またはコミット間の差分を表示します。

**メリット**

- コミュニケーションの円滑化と工数削減

### 5.1. 構文

```
[ブランチ間で比較する]
https://github.com/[owner]/[repo]/compare/[branch]...[branch]

[Tag間で比較する] 
https://github.com/[owner]/[repo]/compare/[tag]...[tag]

[Commit間で比較する] 
https://github.com/[owner]/[repo]/compare/[commit hash]...[commit hash]
```
「ブランチとタグ」「タグとコミット」などの組み合わせも可能です

**例)タグ間での可視化**
Spring Frameworkのv5.3.1とv5.3.2を比較
[https://github.com/spring-projects/spring-framework/compare/v5.3.1...v5.3.2](https://github.com/spring-projects/spring-framework/compare/v5.3.1...v5.3.2)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/cc98f381-dc7d-6e81-922c-96ee6cf94d22.png)

---

## 6. GitHub Grep機能(高度検索機能)

GitHubの対象リポジトリのソースコードを検索したい時、わざわざcloneしたり、zipでダウンロードする必要はございません。
対象リポジトリ内で完結してソースコードを検索することが出来ます。

**メリット**

- 検索の手間軽減
- コミュニケーションの円滑化(URLだけで連携できるのは嬉しい)

### 6.1. 検索ページを開く

[https://github.com/search/advanced](https://github.com/search/advanced)

#### 入力項目

特定のリポジトリ内を検索する場合以下を設定すること

|  設定項目  |  対象内容  |
| ----  | ---- |
| In these repositories  | owners/repository |

**例）spring frameworkからRestTemplateという単語を検索する**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/e7c262e1-b997-2c83-5427-3eec636ff88f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/5f87db61-97d5-2a28-1dca-5bc1e7ebe7ed.png)

#### 検索結果

該当のリポジトリの情報が検索されます。動作を見たい方は以下のURLで実際に結果をご確認ください。
[https://github.com/search?l=&q=RestTemplate+repo%3Aspring-projects%2Fspring-framework+language%3AJava&type=code](https://github.com/search?l=&q=RestTemplate+repo%3Aspring-projects%2Fspring-framework+language%3AJava&type=code)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/441b39c8-1f37-17e6-1760-6e555017a5f4.png)

今回は最小限の設定のみ記載しましたがAdvanced searchには様々条件を指定できますので色々と試してみましょう。

### 6.2. URLにて直接検索を行う

毎回advanced searchページを開くのは大変なのでURLを直接変更して検索を行います。

#### 構文

&q=[検索ワード]

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/3d5d5110-d932-64b3-5a09-db372f0dc8d2.png)

上記を直接編集することで、好きなワードで検索が行えます。

---

## 7. ブランチタイムライン表示機能

自身が作業しているブランチがどのブランチから派生したのか？またはいつマージされたのか？グラフィカルに表示する。

**メリット**

- ブランチ状況把握にかかる工数削減

### リポジトリのコミットはマージ状況の可視化する

**Insights -> Network**
![github_019.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/d4f5eb0b-4a8e-961a-632b-815d5fb5c4de.gif)

---

## 番外編：ダークモード

ダークモードラブ！という方GitHubにもちゃんとダークモードが用意されました！

### ダークモードを有効化する(ベータ版)

![github_900.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122958/3f792c0c-9090-b1fb-a2a4-045ea1e46c70.gif)

# さいごに

いかがでしたでしょうか？
普段から利用されている機能もあれば、知らなかった機能もあるのではないでしょうか？

各プロジェクトによってバージョン管理の運用は様々かと思っております。
運用するための手順書を作成することも大切ですが、システム側で制限を付与することによって未然の事故防止や手順の簡略化ができるのではないかと思っております。使えそうな機能がありましたら、今後の業務にお役立てください。

最後まで読んでいただきましてありがとうございました。

# 改訂履歴

**2021/1/11**
PULL_REQUEST_TEMPLATE.mdのコピペ用テンプレートから「区分」を削除しました。Pull Requstを出す際はlabelで運用を行うようにしましょう ( @ucan-lab 様ご指摘ありがとうございます！ )