[GitHub] チーム開発を行う際のブランチ、プルリク、マージ、コンフリクトのステップまとめ

# 概要
リモートリポジトリは GitHub, ローカルリポジトリは Sourcetree を利用して管理することを前提として、hugo で作成した Web サイトをチームで運用することを想定した手順についてまとめる。

# 前提
[[ターミナル] git/GitHub を管理する方法](https://qiita.com/ub0t0/items/04b67ac95a1adb8cbe3c)
[[SourceTree] git/GitHub を管理する方法](https://qiita.com/ub0t0/items/ba47961f4ffb49f6714a)
[[Docker] Hugo でサイトを構築し、GitHub で公開](https://qiita.com/ub0t0/items/39b1649dffcba23517a6)

# 全体像
以下の 3 つのブランチを作成したチーム開発フローを説明する
・master ブランチ:master ブランチは本番用ページに公開される。管理者のみが review ブランチを master に反映することを想定
・review ブランチ: 検証用ページに反映される。チームメンバーのマージ先
・feature/hanako ブランチ: レビューアーのブランチ。（レビューアーごとにブランチを作成することを想定）
![スクリーンショット 2020-10-15 17.13.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/d6a2a114-ce4e-4dde-accf-fa55757cc44c.png)





# 準備
管理者とチームメンバーの準備フローについて以下に示す
![スクリーンショット 2020-10-19 23.25.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/ccc0200b-3efd-11ad-4443-8d1fd1b06f72.png)


## 管理者
ローカルリポジトリ、リモートリポジトリ、リモートリポジトリの紐付け方法は[こちら](https://qiita.com/ub0t0/items/ba47961f4ffb49f6714a)に記載

### GitHub で共同編集の設定
GitHub のリポジトリを作成後、チームメンバーに共有する
[Settings] → [Managed Access] → [Invite a  collaborator] をクリック
![スクリーンショット_2020-10-13_9_34_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/83edba0c-a8d8-d04b-9bea-f787b27acbc6.png)


メールアドレスなどを入力して [Select a collaborator above] をクリック
![スクリーンショット_2020-10-13_9_36_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/49aaa7e0-4eb8-bc0c-0389-62d9303099be.png)

招待された人はメールに記載されている [View invitation] をクリック
![スクリーンショット_2020-10-13_9_37_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/79caf66a-4817-1843-fc0a-b7b4d21b8ce4.png)

[Setting] → [Managed Access] をクリックすると、招待したメンバーの一覧が表示される。
![スクリーンショット_2020-10-13_17_15_35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/3b9ec2a9-2d9b-63a7-7f64-5eb1035ad8a5.png)

### review ブランチの作成 
今回は、最終的に master ブランチにマージするのは管理者一人を想定しているため、レビュー依頼者が最終的にマージする review ブランチを作成する。

[ブランチ] をクリック
![スクリーンショット_2020-10-13_19_37_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/8752ef4a-7bf0-5cb5-b06f-d97e52e944d4.png)

[新規ブランチ：] に 「review」 と入力し、[ブランチを作成] をクリック
![スクリーンショット_2020-10-13_17_22_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/9cb46538-9c8f-fc1a-f17a-69cef8fbe7c1.png)


review ブランチが作成できたことを確認して、[プッシュ] をクリック
![スクリーンショット_2020-10-13_19_40_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/9ea536fc-5413-413d-8022-63293d4765da.png)
リモートリポジトリの reviwe ブランチ（hugo-test/review）が作成された

## メンバーの準備
### クローン（初回のみ）
GitHub に公開されているリポジトリをローカルに複製する。
Sourcetree を起動し、[新規] → [URL からクローン] をクリック
![スクリーンショット_2020-10-13_11_20_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/fb81db2f-eee6-959f-86d9-93a22290bd1d.png)

### フェッチ
最新の状態に更新する
![スクリーンショット_2020-10-13_20_01_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/be4bfb44-b9ab-ef24-b189-b74997fe41bf.png)

# レビュー
レビューのフローは以下の通り
![スクリーンショット 2020-10-19 23.25.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/36f1f796-d2e8-46f7-66bb-44a09bcc9d8b.png)


## レビュー依頼者
### レビュー用の自分のブランチを作成
[ブランチ]をクリックして、[新規ブランチ：]に「feature/hanako」と入力する
![スクリーンショット_2020-10-13_20_06_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/becfa035-96a9-c349-d142-389765fb8116.png)

### ファイルの更新
ローカルで、ファイルを更新すると、[ファイルステータス] に更新通知がでる
![スクリーンショット_2020-10-13_20_10_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/5d43de8f-b23e-991c-5f75-dde785721f8e.png)

[ファイルステータス]をクリックして、[作業ツリーのファイル]から更新を記録したいファイルを選択
![スクリーンショット_2020-10-13_20_14_28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/4bad5ed4-62a5-f063-3426-a1e09f28f88c.png)

### コミット、プッシュ
選択したファイルが [index にステージしたファイル] に移動していることを確認したら、コミットメッセージを入力し、[コミット] をクリック
![スクリーンショット_2020-10-13_20_15_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/b285dfa1-4b22-a02a-fc1f-8ab3e1b7b1a5.png)

コミットが完了したら、[プッシュ] をクリックして、プッシュ先のリポジトリで作成した「feature/hanako」を選択し、[OK]をクリック
![スクリーンショット_2020-10-13_20_21_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/92b8d634-efba-9150-9735-3de65e39e8af.png)

### プル リクエスト
GitHub にアクセスすると、ハイライトされているところに[Compare & pull request]ボタンがあるので、クリック
![スクリーンショット_2020-10-13_20_25_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/5d13c74c-4185-52d7-9318-f454da845ff7.png)

[base:master] を [base:review] に変更して、[Create pull request] をクリック 
![スクリーンショット_2020-10-13_21_17_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/deaa6b3e-cfe8-743f-4ec2-204518b337c5.png)

プル リクエストが作成され、ページが表示される
![スクリーンショット_2020-10-13_21_18_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/5f59b908-3949-1fea-6101-24ec5d65abd9.png)

#### (参考) コンフリクト
複数人でファイルの変更を行う場合に、コンフリクト（競合）してしまうことがある。
例えば、hanakoさんが更新作業中に、taroさんが更新を完了して review ブランチにマージしていた場合
![スクリーンショット 2020-10-16 11.04.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/644877c6-8e7f-f097-ef79-5596bb6fb443.png)

この場合、hanako さんが GitHub で feature/hanako を review ブランチにマージしようとすると、[Can't automatically merge.] というメッセージが表示される
![スクリーンショット_2020-10-16_23_42_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/a9442193-edc1-d952-47ef-47dd34d2792e.png)


このままでは、マージできないので、taro さんの更新分が反映された review ブランチをプルしてファイルを最新状態にする。その後、taro さんの更新分と自分の更新分を調整してマージする。以下に手順を示す


##### コンフリクトの解消手順
Sourcetree を開き [フェッチ] をクリックし、最新の状態に更新する
![スクリーンショット_2020-10-16_23_45_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/ed81f7c0-b323-a3e0-788e-b22a9f522bf4.png)
review にここでは、「3↓」と表示されている

review ブランチに移動して [プル] をクリック
![スクリーンショット_2020-10-16_23_48_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/ce954aa5-693d-7372-0656-4649e265bcd8.png)


自分のブランチに移動し、[マージ] をクリック
![スクリーンショット_2020-10-16_23_49_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/def449b9-cde7-30b0-2be6-56a0d1a53a15.png)

[現在のツリーにマージするコミットを選択してください] で taro の変更が反映されている review ブランチを選択し、[OK] をクリック
![スクリーンショット_2020-10-16_23_50_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/1852253f-c11e-fcdb-b991-e718fd2f4201.png)

以下のようなメッセージが表示されるので、[OK] をクリック
![スクリーンショット_2020-10-16_23_50_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/fe0b37c3-8593-b42d-90d2-e43f89a7605e.png)

コンフリクトしているアイテムにビックリマークがついているので、ダブルクリックしてエディターで編集する
![スクリーンショット_2020-10-16_23_50_54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/8a94575d-eb70-3893-fb8e-e7582c8d6e0c.png)

taro の変更と自分の変更がハイライトされているので、文章を調整して上書き保存
![スクリーンショット_2020-10-16_23_51_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/7ea1801e-4da3-dbf6-9566-fe5a4e2c675d.png)


[ファイルステータス] でファイルをステージングすると自動的にコミットメッセージが表示される
![スクリーンショット_2020-10-16_23_52_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/0360e481-cfee-d33c-21a5-febd587f382c.png)

[コミット] → [プッシュ] をクリックし、GitHub で確認すると、[Able to merge.]と表示され、マージできるようになった。[Create pull request] をクリック
![スクリーンショット_2020-10-16_23_53_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/88e2d6d2-6895-cfac-f960-f5271c74be84.png)

マージメッセージを必要に応じて入力して、[Confirm merge] をクリックすれば、コンフリクトが解消される


### レビュー依頼
プルリクページのリンクをレビューアーに共有し、コメントをもらう
![スクリーンショット_2020-10-13_21_41_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/f690009a-81ac-62c5-6867-b8cf24dd3c11.png)

レビューアーのコメントが完了後、コメントをもとに修正した場合は「`### ファイルの更新`」の手順を繰り返す

### マージ
メンバー全員から Approved をもらったら、[Merge pull request] をクリック
![スクリーンショット_2020-10-16_22_58_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/b9782081-e7bf-04b3-37d7-e9806b8dd99e.png)


コメントを残して、[Confirm Merge]をクリック
![スクリーンショット_2020-10-13_21_43_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/5ebdcfb7-faaa-0329-e46a-b3787cbf80b2.png)

### レビュー用に作成した個人ブランチを削除
マージが完了したら、作成したブランチはもう使わないので、[Delete branch] をクリック
![スクリーンショット_2020-10-13_21_44_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/3aab067f-bbe2-93af-48b0-3fe1b72ae05d.png)
※ ここで不要なブランチを削除しないと、どんどんいらないブランチがたまっていってしまうので、必ず削除する

### Sourcetree の更新
[フェッチ] → [リモートで削除された追跡ブランチは取り除く] を選択して、[OK] をクリック
![スクリーンショット_2020-10-13_21_47_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/91657d96-db09-da82-a20e-bcc250bf841f.png)

[グラフ]で　`feature/hanako` のブランチが review ブランチにくっついたことが確認できる
![スクリーンショット_2020-10-13_21_48_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/ec6aa4bd-ad75-faba-0d75-5e0cf7aa6485.png)

今回使用したローカルに残っているブランチももう不要なので、 「hanako」 を右クリック → [feature/hanako を削除]
![スクリーンショット_2020-10-13_21_49_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/190d815a-9ec7-d151-a6b5-ced18e0b312c.png)

[プル] に更新履歴が溜まっているので、クリックしてローカルリポジトリを最新の状態にする
![スクリーンショット 2020-10-13 21.56.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/a950e770-8a41-d57c-a7d8-101db3d9a321.png)



## レビューアーの手順
### レビュー
共有されたページを開き、[Pull request] → [Files Changed] をクリック
削除された部分は赤く、追加された部分は緑色にハイライトされている
![スクリーンショット_2020-10-13_21_25_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/08cd78b0-8632-a30e-6957-e9b2819b34b2.png)

##### 修正点、コメントがある場合
コメントを残したい行番号の近くをホバーすると、[+] ボタンが出てくる。クリックするとコメントの入力が可能。
コメントにここでは、「`##` に変更してください」と入力し、[Start a review] をクリック
![スクリーンショット_2020-10-13_21_25_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/9920ebd3-d366-38cf-a09a-7f0f94db175b.png)

全てのコメントが完了したら、[Finish your request] をクリックし、[Comment] にチェックが入っていることを確認して [Submit review] をクリック
![スクリーンショット_2020-10-13_21_27_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/4d3d261e-a9e4-bf46-e567-cec8610833ff.png)


##### 修正点、コメントがない場合
[Review Changes] → [Approve] → [Submit review] をクリック
![スクリーンショット_2020-10-16_22_57_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/3bf238dc-1cf5-45a2-916a-b28062cec3c1.png)



# 本番環境へ反映
管理者（担当者）が Merge pull request を作成し、 master ブランチを review ブランチに反映する
![スクリーンショット 2020-10-19 23.25.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663833/ffdca619-02a2-1a5e-6c4a-82c93de038e4.png)