【Git】GitHubにプルリクエストを作成する迄の一連の流れ

## はじめに
業務でGit/GitHubをよく使用することもあり、GitHubへのプルリクエスト作成までの一連の流れを記事にしてみたいと思います。

## 前提
- GitHubアカウント作成済み
- MacBookにGitをインストール済み
- Gitの初期設定も完了済み
- 作業用のリポジトリを作成済み

## 作業フロー

![flow.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/53409e9e-ea67-6a76-cdf3-58aeb0af2d3e.png)


Gitのデータ構造(ワークツリーやインデックス等)については、以下の記事をご覧下さい。
(昔書いていた記事になります。)

https://qiita.com/masato930/items/8e88905063f7fd1010d9


## 作業手順

### ①GitHubからコードをclone

- 事前にローカルにコードを配置するディレクトリを作成する。

```zsh
mkdir ~/Code
```

※ディレクトリを作成する場所は、任意の場所で問題なし

- 対象のリモートリポジトリを開き、Cloneするために必要なコードをコピーする。

Codeを開きSSHタブを選択。`git@〜`のコードをコピーする。

![スクリーンショット 2022-06-19 13.27.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/819d919e-5c0e-80c4-039e-e493fe4ad48e.png)


- リモートリポジトリからコードをローカルに複製する。

```zsh:コマンド
git clone git@github.com:masuwa9028/testrepo.git
```

```zsh:実行例
% git clone git@github.com:masuwa9028/testrepo.git
Cloning into 'testrepo'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.
%
```

※検証用に以下のようなリモートリポジトリを作成しております。

![スクリーンショット 2022-06-19 13.19.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/00ce09cb-9d3a-8790-eeed-23e206c02925.png)

- ローカルにリモートリポジトリが複製できたことを確認。

```zsh:コマンド
ls -la ~/Code/testrepo
```

```zsh:実行例
% ls -la ~/Code/testrepo
total 8
drwxr-xr-x   4 ma-sato  staff  128  6 19 13:26 .
drwxr-xr-x   8 ma-sato  staff  256  6 19 13:26 ..
drwxr-xr-x  10 ma-sato  staff  320  6 19 13:26 .git
-rw-r--r--   1 ma-sato  staff   27  6 19 13:26 README.md
%
```

確認できたら、複製したコードの中に移動しておく。

```zsh
cd ~/Code/testrepo
```

### ②作業ブランチ作成&切り替え

- 新しいブランチの作成と切り替えを実施する。

```zsh:コマンド
git checkout -b work
```

`-b`オプションを指定することで、ブランチの作成とチェックアウトを同時に行うことができる。
※上記の場合は、workブランチの作成とチェックアウト(切り替え)を同時に実施。

```zsh:実行例
% git checkout -b work
Switched to a new branch 'work'
%
```

- ブランチが切り替わったことを確認

```zsh:コマンド
git branch
```

```zsh:実行例
% git branch
  main
* work
%
```

### ③コーディング

今回は、例としてREADME.mdに以下のように記載する。

```zsh:README.md
# Introduction
It will be a test page

# Contents
Write the content here

# lastly
Write the closing words here
```

### ④インデックスに変更分を追加

- ワークツリーとインデックスの差分を確認する。

まず、差分を確認する。

```zsh:コマンド
git diff
```

```zsh:実行例
% git diff
diff --git a/README.md b/README.md
index 023efa2..4cc4493 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,8 @@
-# testrepo
-Test Repository
+# Introduction
+It will be a test page
+
+# Contents
+Write the content here
+
+# lastly
+Write the closing words here
%
```
→`README.md`に差分があることを確認。

次にステータスを確認する。

```zsh:コマンド
git status
```

```zsh:実行例
% git status
On branch work
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")
%
```
→インデックスに登録していない変更があることを確認。

- ワークツリーからインデックスに変更を登録する。

```zsh:コマンド
git add .
```

```zsh:実行例
% git add .
%
```

- ワークツリーとインデックスに差異がないことを確認

```zsh:コマンド
git diff
```

差異がない場合、何も表示されない。

```zsh:実行例
% git diff
%
```

- インデックスに変更が反映されていることを確認

```zsh:コマンド
git status
```

```zsh:実行例
% git status
On branch work
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	modified:   README.md
%
```

### ⑤ローカルリポジトリにコミット

```zsh:コマンド
git commit -m "<コミットメッセージ>"
```

```zsh:実行例
% git commit -m "Update READMD.md"
[work 4c001c1] Update READMD.md
 1 file changed, 8 insertions(+), 2 deletions(-)
%
```

※コミットメッセージの作成方法は、以下のページを参照
[誰にとってもわかりやすいGitのコミットメッセージを考える](https://www.tam-tam.co.jp/tipsnote/program/post16686.html)

- コミットログを確認する。

コミットが反映されているか確認。

```zsh:コマンド
git log --oneline
```

```zsh:実行例
% git log --oneline
4c001c1 (HEAD -> work) Update READMD.md
20ac8ba (origin/main, origin/HEAD, main) Initial commit
%
```
→新しいコミット`4c001c1`が反映されていることを確認。

※以下のコマンドを使用した場合、コミットログの詳しい情報を確認することができる。

```zsh:コマンド
git log
```

```zsh:実行例
% git log
commit 4c001c128cc95094c840be753c4084443f3bdef8 (HEAD -> work)
Author: masuwa <teste******@gmail.com>
Date:   Sun Jun 19 15:28:05 2022 +0900

    Update READMD.md

commit 20ac8ba1a809ea81d6e518c7039c0c1ab0533f3f (origin/main, origin/HEAD, main)
Author: masuwa9028 <***********@users.noreply.github.com>
Date:   Sun Jun 19 13:15:40 2022 +0900

    Initial commit
%
```

- リモートリポジトリの接続先が登録されていることを確認

```zsh:コマンド
git remote -v
```

```zsh:実行例
% git remote -v
origin	git@github.com:masuwa9028/testrepo.git (fetch)
origin	git@github.com:masuwa9028/testrepo.git (push)
%
```

※`git clone`を実施しているため、自動で登録されている。

### ⑥GitHubへコードをPush

リモートリポジトリ(GitHub)にローカルリポジトリの変更を反映させる。

```zsh:コマンド
git push origin work
```

```zsh:実行例
% git push origin work
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 333 bytes | 333.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
remote:
remote: Create a pull request for 'work' on GitHub by visiting:
remote:      https://github.com/masuwa9028/testrepo/pull/new/work
remote:
To github.com:masuwa9028/testrepo.git
 * [new branch]      work -> work
%
```

:::note warn
masterブランチへは基本的にpushをしない。
※masterブランチへ反映させる作業はプルリクエスト後のコードレビュー完了時に実施する。
:::

### ⑦プルリクエスト作成

- `git push`後に対象のリポジトリページを更新すると、以下のような画面が表示されている。

`Compare & pull request`をクリックする。

![スクリーンショット 2022-06-19 15.37.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/99a3d959-5031-7601-ed09-489360af309c.png)

- プルリクエストの作成画面が表示されるため、必要な内容を入力する。

![スクリーンショット 2022-06-19 15.40.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/1fb110de-0fb0-a588-bc44-34a7c3389e67.png)

今回は、以下のように入力する。

```zsh:内容
# What
Update README.md.

# Why
For testing.

# Ref
Nothing special.
```

- `Reviewers`と`Assignees`を設定する。

![スクリーンショット 2022-06-29 8.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/28dcd140-5f82-578c-07cc-644e8fb48645.png)


|  項目  |  内容  |
| ---- | ---- |
|  Reviewers  |  レビューしてほしい人のアカウントを設定  |
|  Assignees  |  自分のアカウントを設定  |

※今回は、テストアカウントのため設定は割愛させて頂きます。


- 入力したら、`Create pull request`をクリックする。

![スクリーンショット 2022-06-29 8.04.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/0a868b1e-1aac-a9d4-099d-df3e78fcf105.png)


- プルリクエストが作成できていることを確認

![スクリーンショット 2022-06-29 8.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/13b11937-07a3-1e50-791c-77b47377daee.png)


## さいごに
Gitに関するナレッジは他にもあるので、今後も記事を投稿していきます。

# 参考記事
[ワークツリーとインデックス](https://backlog.com/ja/git-tutorial/intro/04/)
[変更の保存 | Atlassian Git Tutorial](https://www.atlassian.com/ja/git/tutorials/saving-changes#:~:text=git%20add%20%E3%81%AF%E3%80%81%E4%BD%9C%E6%A5%AD%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA,%E4%BD%95%E3%82%82%E5%BD%B1%E9%9F%BF%E3%81%97%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82)
[プルリクエストを使った開発プロセス](https://backlog.com/ja/git-tutorial/pull-request/03/)