【Git・GitHub】GitHub Flowをやってみよう！（初心者向け）

## はじめに
前回の記事から引き続き、用語の詳しい解説は省いて 「実際に使う」 ことにフォーカスを当てています。
個人で試せるようにしていますので、お気軽にお試しください。

前回の記事はこちら↓

https://qiita.com/rnk0085/items/70941059f87aecca0abb

### この記事で分かること

- GitHub から情報を取得する方法
    - `git pull origin main`
- GitHub を活用した開発の流れ＆お試し
    - GitHub Flow
    - `git branch`
    - `git checkout`
    - プルリクエスト

## GitHub から情報を取得しよう！

チーム開発をしていくと、他の方もセーブデータを GitHub に送るため、自分のPC上にあるセーブデータと、GitHub 上にあるセーブデータが必ずしも一緒であるとは限りません。このようなとき、自分のPC上に GitHub にあるセーブデータを取り込む必要があります。

まずは実際に、GitHub 上にセーブデータを増やしてみましょう。
以前作成した GitHub の Repository には緑色のボタン「Add a README」があるので、それをクリックしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/377d04ef-76e9-f333-67e6-023fec559fa1.png)

READMEの中身はいじらず、下の方にある「Commit new file」でメッセージ「README を追加」と書いて、緑色のボタン「Commit new file」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/2d5e7658-0efb-42a2-dbd6-65c7db401956.png)

すると新しくセーブデータが追加されており、README ファイルが作成されています。

（このように、GitHub 上でも変更を加えることが出来ます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/8b544e01-d056-222f-5f7f-0c087a18b167.png)

ここまでの状況を整理すると以下の通りです。

- GitHub上で新しくREADMEファイルを作成した
- 自分のPC上にはREADMEファイルは存在しない

つまり、自分のPC上に GitHub のセーブデータを取り込み、README ファイルを手にする必要があります。なので、VSCode で以下のコマンドを実行してください。


``` :GitHubからセーブデータ取得
git pull origin main
```

そうすると、自分のPC上に README ファイルが増えました。データの取得はこれだけです。


## チーム開発の流れを知ろう！

チーム開発では、他の方も同様にコーディングしています。

そのため、以下のような流れで作業をすることがあります。（これが GitHub Flow というものです。興味あればこちらの記事もどうぞ：[GitHub flowについて](https://qiita.com/rnk0085/items/89645a752ca6fecf9b40)）
1. あらかじめ自分で「ブランチ」を作成して作業を行い、
1. 一通り完了したら GitHub に Push して、
1. 「プルリクエスト」を出し、
1. レビューをもらい、
1. main ブランチに「マージ」
1. 1~5を繰り返す

なんだか用語が多くなってきましたが、1つずつ見ていきましょう


### ブランチ


ブランチを使用することで、作業を分離させ、他に影響を与えることなく作業することが出来ます。
以下のように枝分かれをするイメージです。
![pr-retargeting-diagram1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/53cc86a2-5b0a-1bb5-90c4-1698697bffed.png)

### プルリクエスト

プルリクエストを使用することで、他の人に対して自分がどのような作業をしたのかを知らせることが出来ます。こうすることで他の方にレビューをもらえます。


### マージ

マージをすることで、行った作業をmainブランチに反映させることが出来ます。マージをしないと、作業は反映されないので注意が必要です。


## 実際にやってみよう！

ここでは自分のページをもっとリッチにして、プルリクエストを出して、マージする流れを実際に試してみましょう


1. あらかじめ自分で「ブランチ」を作成して作業を行い、
1. 一通り完了したら GitHub に Push して、
1. 「プルリクエスト」を出し、
1. ~~レビューをもらい、~~（ここでは貰わない）
1. main ブランチに「マージ」

### ①あらかじめ自分で「ブランチ」を作成して作業を行う

個人的にブランチはmainから作成することが多いと思うので、流れとしては以下のようになります。

``` :ブランチ作成～切り替え
git checkout main
git pull origin main
git branch [ブランチ名]
git checkout [ブランチ名]
```

1. main ブランチに移動（※念のため）
    - ※ main じゃなくても構いません。ブランチを切りたいところに移動してください
1. GitHub 上のデータを取得（※念のため）
    - ※1が main でない場合はここも変更してください
1. ブランチ作成
1. そのブランチに移動


``` :ブランチを作成
git branch [ブランチ名]
```

``` :ブランチを切り替える
git checkout [移動したいブランチ名]
```

ブランチ名は自分の GitHub のユーザー名にして、実際にやってみましょう。

ブランチが切り替わったかどうかは `git branch` で確認できます。自分のユーザー名の前に「*」が付いてればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/d592e327-c439-6ad6-3f3b-8b1098de8043.png)

あとは自分のページに色々情報を加えたりして、セーブしてください。自由に作業してみましょう。
（`git add`、`git commit` を忘れずに！）


### ②一通り完了したら GitHub に Push

セーブデータを GitHub に送りましょう。ブランチ名はさっき自分が作ったものに変更してください

``` :[ブランチ名]をGitHubに送信
git push origin [ブランチ名]
```

### ③「プルリクエスト」を出そう！

GitHub を見るとこのようになっているので、「Compare & pull request」をクリックして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/de259548-3366-781c-5cfc-4304823eb162.png)

「base」が「main」になっているか、「compare」が「Pushしたブランチ名」になっているかを確認して、良ければ「Create pull request」をクリック！
（チーム開発では、Leave a comment のところに「何をしたのか」についての概要を書いたりします）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/ba32abc0-dfa7-99b7-6481-2049319052d1.png)

以上でプルリクエストを出せました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/6a91fe7c-3495-1d16-b813-1dccd1be1cda.png)


### ④レビューをもらいます

ここではカットします


### ⑤mainブランチに「マージ」しよう！

「Merge pull request」⇒「Confirm merge」を順にクリックするだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/53b76753-eae8-dae8-29db-0eafad49218a.png)

こうなっていればOKです。ブランチがもう必要なければ「Delete branch」で消しておくと良いでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/fc17f1b4-4119-564f-4627-2ad4a760929d.png)

## おまけ：Repository をコピーする方法

今までは自分で1から作っていましたが、毎回自分から作るとは限りません。誰かが作成したものを使用する場合は、最初にCloneする必要があります。

試しにこちらのRepositoryをCloneしてみましょう。

https://github.com/rnk0085/profiles

「Code」をクリックして、コピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/f508bf4d-a6c6-4f38-5077-67042e506ddf.png)

VSCodeに戻って以下のURL部分を変更して実行しましょう（`git init` していない場合は先にやっておきましょう）

``` :Repository をコピー
git clone [URL]
```

Cloneしてきたディレクトリ内部に入ってしまえば、今までと同様に作業が出来ます。


## おまけ：Private な Repository に招待する方法

Private の場合は「Settings」＞「Collaborators」＞「Manage access」内の緑色のボタン「Add people」をクリックし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/cfaa0bc6-a9cc-005d-ae02-c50a391285cc.png)

次のようなものが表示されるので、招待したいユーザー名を入れます。そうすると招待された側にはメールが届くので、承諾しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/774b0fcc-08d8-da23-cb5b-51f98fb90d05.png)

## 参考資料
https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository

https://docs.github.com/ja/pull-requests


## おわりに

個人的には、この辺りは実際にチーム開発をするのが一番手っ取り早いと思うのでやってみると良いと思います。
段々慣れてきたな～と思ったら他のコマンドを調べてみると面白いので興味があればぜひ！（コミットを取り消したり、特定のコミット履歴まで戻ったり色々出来ます）


ここまで読んでいただき、ありがとうございました！何かありましたら、コメントをお願いいたします。