未経験で転職した僕が、Git沼に嵌りながら勉強中のチーム開発について復習

こんにちは、弱弱エンジニアのやまうちです。
完全に未経験でWEB系開発の会社に転職しました。
なのでそもそも、弱弱にすら到達しておりませんが、言い続けていれば夢は叶うって聞いたので言ってます。
「成功する秘訣は、成功するまで続けること」
これと一緒です。

今回初投稿にて語る内容はGitです！
GitのGの字くらいは知ってたし、一応使ったことはありました(使えるとは言ってない)がGitは沼です。
まだまだ勉強中ですが、チーム開発の超超基礎の部分を復習しながら理解を深めていきます。
ということで自分語りをしたい気持ちを抑えて本題に入っていきましょう！

![git.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281895/a5e4a612-78f9-f4e0-dca8-42cb44e32219.png)



## 想定読者
- 未経験でエンジニアを目指してる方
- 新人ときの気持ちを思い出したい方
- やまうちを応援してくれる方
- 暇な方  

新人がGitにどんな気持ちで触っているのか知ってください！ｗ


## Gitでのチーム開発を復習
一旦軽く雑談。
Gitって便利なんですよ。
チーム開発では特に力を発揮します。
弱弱エンジニアの僕でもわかります。
コミュ障とは程遠い優しい先輩たちが、嫌な顔ひとつせず色々教えてくれるわけです。
その時はふむふむと思いながら聞いてるし、理解しているつもりでも
少し違う状況になると「ん？どういう手順だ？」ってなるんで、やっぱり理解していないんですよね。

基礎では戦えても応用になると手も足も出ない。
弱弱の証です。
ということで
「こんなときはこうする！」
「こうだから！！」
っていうのを新人の僕と学んでいこう！


## 実際にブランチをイメージしながらやっていきましょう
### 一旦プロジェクト内容の確認
今回のプロジェクトは会社のHPを作ることにしましょう。
必要なファイルはこれです。

- top.html(トップページ)
- contact.html(お問い合わせページ)
- style.css(上記2ファイル用のCSS)
    
Aさんはトップページを担当し、Bさんはお問い合わせページを担当します。
CSSはなぜかすでに用意されているので担当者はいません。
が、たまに中身を少しいじります！！←__ここ重要__

### プロジェクト始動
AさんとBさんはそれぞれ`master`ブランチを元に、`top`ブランチと`contact`ブランチを作成します。
こんな感じです。

```
top          ●
          ／
master  ●
          ＼
contact      ●  
```
同じ位置の`master`ブランチからそれぞれ`top`と`contact`に派生しています。
基本的に`master`ブランチでは作業しません。
元々CSSファイルは用意されているので、AさんBさんともにサクサク作業を進めていきます。

ここでプチ問題発生！
デザインに軽微な変更発生！！
CSSの変更が必要になりました。
CSSの変更はAさんが担当します。

CSS編集用にブランチを作成しましょう。

```
css_a        ●
          ／
top     |    ●
        | ／
master  ●
          ＼
contact      ●  
```

こんな感じになります。
ちなみにここで__新しい知識が必要__になります！

### スタッシュを理解しよう！
それは__スタッシュ__！！！
今回、何気なく新しいブランチを作成しました。
しかし実際は新しいブランチを作成するにあたってこんな手順を踏んでいました。

1. `top`ブランチをスタッシュ(退避)させる
2. `master`ブランチをチェックアウト
3. `css_a`ブランチを作成
4. `css_a`ブランチをチェックアウト


それではひとつひとつ確認していきましょう。

#### 1. `top`ブランチをスタッシュ
今回の確認ではここがメインです！
このときすでに`top`ブランチでは作業を進めていました。
基本的には__今している作業から別の作業に切り替える際は、今の作業を一度コミット__します。
しかしコミットはある程度区切りのいいタイミングでします。
とはいえ別の作業をしなくてはいけないタイミングが、必ずしも区切りのいいタイミングとは限りません。
そんなとき便利なのがスタッシュです！
スタッシュをすることで、今していた作業を一旦退避することができるので、別の作業に取り掛かる環境をつくることができるんです。

おそらくこの辺りは、やってみないと中々ピンとこない部分だと思います。
ですのでこれを覚えておきましょう！！
「__今している作業を中断して別の作業をする際は、
キリが良ければコミット、キリが悪ければスタッシュをしてから別の作業をする！__」
以上！

#### 2. `master`ブランチをチェックアウト
1の手順をしたら、次に`master`ブランチをチェックアウト(選択)します。
なぜ`master`ブランチをチェックアウトするかと言うと、`css_a`ブランチを`master`ブランチから派生させるためです。

↓こうじゃなくて↓

```
css_a              ●
                ／
top          ●
          ／
master  ●
          ＼
contact      ●  
```
 ↓こうだということ↓

```
css_a        ●
          ／
top     |    ●
        | ／
master  ●
          ＼
contact      ●  
```

理由としては、今回のプロジェクトではこれがルールだからです！(今決めた)
ですので一度`master`ブランチをチェックアウトするわけです。

#### 3. `css_a`ブランチを作成
これはもうそのままの意味です！ｗ

#### 4. `css_a`ブランチをチェックアウト
作成したからにはチェックアウトしましょう！ｗ

※3→4の流れは`git checkout -b css_a`のコマンドだと同時に行われます。

___

こんな流れで`css_a`ブランチを作成しておりました。

### マージを理解しよう！
さて、Aさんはcssファイルの編集を完了させました。
作業を完了させたら以下の流れが必要です。

1. 編集したcssファイルをインデックスに追加
2. `css_a`ブランチをコミット
3. `css_a`ブランチをプッシュ
4. `css_a`ブランチを`master`ブランチにマージ(プルリクエスト)

さて流れの確認です。

#### 1. 編集したcssファイルをステージングエリアに追加
ステージングエリアに追加...？？？
となっている方に朗報です。
コマンドで言うところの`git add`です。あの`git add`です！
このコマンドは見たことがある方が多いと思います。
ようするに__このファイルをコミットしますよ__ということを登録する感じです。
今回はcssファイルを編集して、cssファイルをコミットしたいのでcssファイルをステージングエリアに追加します。

#### 2. `css_a`ブランチをコミット
ここで遂にコミットをします。
コミットをすることで、Gitに登録ができます。
Gitに登録をしないことには、Git上に記録として残りませんので、コミットは必ずしましょう！

#### 3. `css_a`ブランチをプッシュ
次に「`css_a`ブランチをプッシュ」の説明をしたいところですが、ここで一つ新しい知識が必要です。
それは__ローカルリポジトリ__と__リモートリポジトリ__です。
___
##### ローカルリポジトリとリモートリポジトリについて
まずリポジトリとは？って話ですが、こちらのサイト（ https://wa3.i-3-i.info/word15664.html ）曰く

> ファイルなり、プログラムなり、設定情報なり、何らかの「保管場所」をカッコ付けて言った表現

らしいですｗ
ということでローカルリポジトリはローカル(自分のとこ)の保管場所。
リモートリポジトリはリモート(みんなが使うクラウド上)の保管場所です。
ですので基本的な流れとしては

1. 自分で編集したファイルの変更をローカルリポジトリに記録する
2. ローカルリポジトリに記録したものを、リモートリポジトリにも記録して共有する

ざっくりですがこんな感じになります。
___

では本題に戻りまして、`css_a`ブランチをプッシュについて説明します。
2.でコミットを行いましたが、このコミットはローカルリポジトリ上で行われただけであって、
みんなが共有して使うリモートリポジトリには一切反映されていません。
ではどうするかと言いますと、__プッシュ__です。
そう、__プッシュ__です！
※大事なことなので2回言いました

プッシュしたことによって、リモートリポジトリの`css_a`ブランチもローカルで更新した内容と同じ状態になります。

#### 4. `css_a`ブランチを`master`ブランチにマージ(プルリクエスト)
プッシュして終わりではありません。
元々`css_a`ブランチは`master`ブランチから派生したブランチです。
よって`css_a`はあるべき場所に帰ります。
「俺自身が`master`ブランチになる事だ」
※イメージ画像↓
![月牙天衝.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281895/8361544b-6bb1-8f0d-cca0-9a3407022266.png)
チョサクケンダイジ


別に`master`ブランチになるわけではないですが(おい)、`master`ブランチに合流させます。
これで__cssの編集がされた`master`ブランチが完成__します！
ちなみに(プルリクエスト)とありますが、これはマージをするにあたって別の人にマージしても大丈夫かどうかの確認をしてもらいます。
チーム開発ですので、しっかり確認作業が入るわけです(ﾟ∀ﾟ)b

### プルを理解するの巻
さてプルを理解するために、もうひとつストーリーを追加していきましょう！
といいながらストーリーは使いまわしますｗ
内容は・・・、またまた軽微なデザイン変更だ！！！
次はBさんにcssファイルの変更を任せるとするZE☆

ということでBさんにもこの流れで作業してもらうとしましょう。

1. `top`ブランチをスタッシュ(退避)させる
2. `master`ブランチをチェックアウト
3. `css_b`ブランチを作成
4. `css_b`ブランチをチェックアウト

実はこれには罠があります。
ちなみに今のリモートリポジトリはこんな感じです。

```
css_a        ● － ● ←cssファイル更新
          ／        ＼
top     |    ●       ｜
        | ／         ｜
master  ● － － － － ●
          ＼
contact      ●  
```

ちょっとわかりずらいですが、`css_a`がcssファイルの更新を終え`master`にマージされています。
●印はコミットされたという印です。
`top`と`contact`はまだ一度もコミットしていないので、状況は変わっていません。
ということでもう一度これを確認。

1. `top`ブランチをスタッシュ(退避)させる
2. `master`ブランチをチェックアウト
3. `css_b`ブランチを作成
4. `css_b`ブランチをチェックアウト

これの問題点は2と3の流れにあります。
3で新しくブランチを作成していますが、ブランチを作成する際は派生元(今回でいうとmaster)のブランチを最新の状態にしてブランチを作成する必要があります。
ですので正しい流れはこうなります。

1. `top`ブランチをスタッシュ(退避)させる
2. `master`ブランチをチェックアウト
3. `master`ブランチをプル
4. `css_b`ブランチを作成
5. `css_b`ブランチをチェックアウト

これをした場合としなかった場合のリポジトリを確認してみましょう。

↓ますがしなかった場合↓

```
css_a        ● － ● ←cssファイル更新
          ／        ＼
top     |    ●       ｜
        | ／         ｜
master  ● － － － － ●
        |  ＼
contact |     ●  
          ＼
css_b        ●
```

更新前の`master`ブランチから`css_b`が派生しています。
↓こっちがした場合↓

```
css_a        ● － ● ←cssファイル更新
          ／        ＼
top     |    ●       ｜
        | ／         ｜
master  ● － － － － ●
          ＼         ｜
contact      ●       |
                      ＼
css_b                    ●
```

例によってわかりずらいですが汗、意図は伝わるでしょう！！？？！？！
その`master`から`css_b`のブランチが作られるかという部分が違ってきます。
なぜこういった違いができるのかを説明します。
今回は新しく追加された「`master`ブランチをプル」という部分に絞って説明していきます。

#### 3. `master`ブランチをプル
まずプルについて簡単に説明します。
__リモートリポジトリにある更新内容を、ローカルリポジトリにも反映させる。__
こんな感じです。
よくわからん！って思った方はググってくださいｗ

再掲ですが3で`master`ブランチをプルする前のリモートリポジトリです。

```
css_a        ● － ● 
          ／        ＼
top     |    ●       ｜
        | ／         ｜
master  ● － － － － ●
          ＼
contact      ●  
```

では現在、これからcssファイルを編集するBさんのローカルリポジトリはどうかというとこうです。

```
master  ● 
          ＼
contact      ●  
```

非常にシンプルです。
BさんのローカルリポジトリにとってAさんが作業している、`top`ブランチや`css_a`ブランチは関係ないんですね。
しかし勘違いしてはいけない点もあります。
__ブランチは関係なくても、更新内容は関係ある！！__んです。
そう、ブランチは関係なくても、更新内容は関係ある！！
※大事なことなので(ry

ですのでこの時点で、Aさんがcssファイルを編集した結果が反映されている`master`ブランチがありますので、これをプルする必要があります。
そうするとBさんのローカルリポジトリがこうなります。

```
master  ● － － － － ●
          ＼         
contact      ●              
```

`master`ブランチが最新の情報をGETしました！
そしてこの`master`ブランチから`css_b`ブランチを作成することでこうなります。

```
master  ● － － － － ●
          ＼         ｜
contact      ●       |
                      ＼
css_b                    ●
```

これで作業する準備が整いました！！

あとは作業をして、上の方でも説明した

1. 編集したcssファイルをステージングエリアに追加
2. `css_b`ブランチをコミット
3. `css_b`ブランチをプッシュ
4. `css_b`ブランチを`master`ブランチにマージ(プルリクエスト)

これをして、また作業する！
こんなことを繰り返しながらプロジェクトが進んでいきます。

### そんなこんなでプロジェクトは進んでいく
なんとなくは知っていましたが、プロジェクトをチームで進めていくにあたってGitは非常に重要な存在です。
便利な半面、難しさも日々感じております。
まだまだ使いこなすには時間が掛かりそうです(¯―¯٥)

なんだかpull、fetch論争的な感じのこともあるみたいですが、
まずpullとfetchのそれぞれの使いわけを正確にできるかというと出来ない！
と自信を持って言える自分がいるので、先は長そうです汗ｗｗ

覚えることが鬼のようにあって日々四苦八苦しておりますが、強強エンジニアになるべく頑張ります。
2週間に1記事くらい書けたらいいなぁって感じですのでよろしくお願いしますm(_ _)m