gitとgithubのcloneからPRまでを図解で理解する


## gitとgithubを使った開発環境の流れ

チームで開発する時，個人で開発をしてみようと思っている時，

gitとgithubを使うと言われても何がなんなのかわからない人が多いと思ったので，図で理解しやすいようにまとめてみました．

---


<!-- ![gitの流れ1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/fe6090ba-8724-3703-5868-2c46e43189dc.jpeg) -->
まずは
1. clone（pull）
1. ブランチを作る
1. commit
1. push
1. PRの作成
1. マージ
の流れを説明します

---
### 初めに
githubは簡単にいうとコード用のクラウドサービスです
なので，ローカル（自分のPC）とgithubは別物です

また，今回は図解が目的なので，コマンドの説明はしません

コマンドの説明は他の記事に多くあるので，そちらを参照してください

---
### 用語の説明
- デフォルトブランチ：mainとかmasterとかdevelopという名前がついているブランチ（が多いです）

---
### 図の説明
真上に伸びている線はブランチ
丸はコミットを表しています．

---
初めは，github上にのみリポジトリがあり，ローカルには何もない状態です．

![gitの流れ2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/8b3f850f-6f7e-7cd6-c16f-6aad76e9f2dc.jpeg)

---
もしくは，cloneという作業が済んでいる人はリポジトリのみがローカルに存在しています．

![gitの流れ3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/2bbe81af-52de-83ac-ead0-2404cb90d8a2.jpeg)


---
#### clone（pull）
github上のコードをローカルにも反映させましょう

初めてならclone, 2回目以降はpullを使います

---
ローカル（自分のPC）に反映

![gitの流れ4.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/455f7b99-f8da-b932-d9b0-f090133fcd98.jpeg)

---
#### ブランチを作る
ここからはローカルで作業します

---
作業用のブランチを作りましょう

![gitの流れ5.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/a40d64d6-3e0e-18d2-db9e-bc674ce17384.jpeg)

---
作業用のブランチでコミット（コードの変更）をします

![gitの流れ6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/39f5aadd-7712-269b-c765-8c65f8dfaf40.jpeg)

---
#### push
ローカルでの変更をgithubに反映させましょう

---
作業用のブランチでコミットした内容をgithubに反映させます

![gitの流れ7.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/08bedad1-8632-ca12-68f4-1d2414609672.jpeg)

---
#### PRの作成
PRを出すことで，他の人にコードの変更を確認してもらうことができます

変更の確認をレビューと言います

---
PRを出す

![gitの流れ8.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/8ba2a3c5-e08f-8366-3a9a-6b33f0a9d1a4.jpeg)

---
#### マージ
レビューが通ったらマージします

マージとは，ブランチの変更をデフォルトブランチに反映させることです

---
マージする

![gitの流れ9.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/5abe6fa8-d6ed-821f-fe09-a9b59df48147.jpeg)

---
#### ローカルにも反映したい
マージが完了することで，コードの変更が反映されました！

ですが，ローカルにはまだ変更が反映されていません

---
マージが完了したので，ローカルにも反映させましょう
この方法は，始めのpullと同じです

---
ローカルにも反映

![gitの流れ10.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/1dfc982f-5765-a8d5-61a7-6f902c0620eb.jpeg)

---
以上が，gitとgithubを使った開発環境の流れです

<!-- ![gitの流れ11.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/2b1f1860-51e8-d00f-97bc-a43245e27517.jpeg) -->

---
## 直接mainブランチにpush
では，直接デフォルトブランチにpushするとどうなるのでしょうか

---
ここは同じです

![gitの流れ12.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/38a2adc4-1b1e-2756-28f7-298c3ced3e61.jpeg)

---
作業用ブランチを作らずに変更

![gitの流れ13.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/32ddda80-ea5a-eaa1-1e25-cf89afbde0dc.jpeg)

---
直接push

![gitの流れ14.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/551ebe42-4d44-0fdf-631f-baef81d26403.jpeg)

---
この時点でローカルとリモートは同じなので，pullが必要ありません

つまり直接デフォルトブランチにpushすることもできます！

しかし，問題点もあります

---
### 問題点
個人でやる分には，問題がない時もありますが，チームで開発するときは問題があります．

---
## 複数人で作業
<!-- ![gitの流れ15.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/4e4b660d-6b0a-fbc5-bc01-5328196f9900.jpeg) -->
複数人で作業する時どうなるかを見てみましょう

---
今回は，githubが真ん中にあり，左右に2人の開発者がいるとします

![gitの流れ16.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/69b8c7d6-4203-c576-0414-100ee729b2ba.jpeg)

---
他の人がデフォルトブランチを更新

![gitの流れ17.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/d0f14664-5587-9345-2c85-4783865a8918.jpeg)

---
自分のローカルには，デフォルトブランチの変更が反映されていない

![gitの流れ18.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/e5824d6e-7246-5f38-61d6-592def45ecdf.jpeg)

---
### 問題点
このように，デフォルトブランチに直接pushすると，他の人の変更が反映されていないことがあります

それによって，コンフリクト（競合）が発生することがあります

---
## 理想

<!-- ![gitの流れ19.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/58a23bbf-6e98-b356-7a67-12df3e9bc42b.jpeg) -->

---
各自が作業用ブランチを作る

![gitの流れ20.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/320ee45f-d2c3-31b4-1ce3-588de6057b74.jpeg)

---
## まとめ
これ以外にもgitの機能はたくさんありますが，この流れを理解しておけば，gitを使った開発ができるようになると思います

とりあえずやってみると実感もわくでしょう