図解！ Gitのブランチ・ツリーをちゃんと読む

## はじめに

この記事は、ちょっとだけGitは使ったことがあるけれども、SourcetreeやGitHubやBacklogなどで出てくるGitのツリー（樹形図）の読み方がよく分からないという人に向けた記事です。なんとな～くで読んでしまっていて、実はよく分かっていないという人も、意外といるのではないでしょうか。

もしあなたが、まだGitを触ったことがなかったり、「変更のステージング」「ブランチにチェックアウトする」と言ってなんの事か分からなかったりしたら、先にこの記事 [君には1時間でGitについて知ってもらう(with VSCode)](https://qiita.com/jesus_isao/items/63557eba36819faa4ad9) を読んでくることをオススメします。（宣伝）

## 対象読者の想定レベル

- [x] Gitを触ったことがあり、コミットをしたことがあるが、本格的なチームでのGitを使った開発は未経験
- [x] mainブランチ（masterブランチ）というものがあるらしいということは知っている
- [x] SourcetreeやGitHub等でグラフィカルに表示されるブランチの、複雑なツリーが読めない
- [x] 何かしらのプログラムを書いた経験があり、「参照」というとなんとな〜くでいいので雰囲気が分かる
- [x] ブランチを消すとどのコミットが消えるか分からなくて怖い

## この記事のゴール

- ブランチのツリーが読めるようになる
- ブランチを作る/消すということがどういうことか分かるようになる

## 注意点

この記事では、人名らしきものが入ったブランチ名が例として登場しますが、人名をブランチ名として使用することを推奨しているわけではありません。実際にプロジェクトで使用するブランチ名は、そのプロジェクトに合った命名規則で運用してください。

また、この記事を書いた当時は`master`ブランチがデフォルトのブランチ名でした。現在は`main`ブランチがデフォルトになっているため、`master`に聞き馴染みの無い方もいるかもしれませんが、同じものです。気にしないでください。

## 突然の問題

藪から棒ですが、4問だけでいいので、ちょっと私の出題に付き合ってください。すぐ終わります。

### 第一問

画像を見てください。
![スクリーンショット 2019-06-23 11.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/2b312621-7322-436c-ee73-c65ca98301bb.png)
それぞれの図形の定義は別に言っていない状態ですが、多分Gitを知っている人ならばなんとなく内容を理解できると思います。
さぁ問題です。この画像にブランチは何本あるでしょうか！

<details><summary>クリックして正解を見る（押すと開きます）</summary>

いや、すいません、バカにしているわけではないんですよ。少しずつ小さなステップを踏んでいくことが大切なのです。
正解は、masterブランチ **1本** だけです。

</details>

### 第二問

それでは次の問題です。この図にブランチは何本あるでしょうか。
![スクリーンショット 2019-07-06 11.27.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/5a7ea90c-95ab-89ec-73c6-31bbb9d82ac8.png)
なんかコミットAからコミットB, C, Dが、それぞれ生えてますね。

<details><summary>クリックして正解を見る</summary>

答えは **3本** です。多分皆さんそう答えると思いますし、それが正解です。
masterブランチ、takahashi_devブランチ、sato_devブランチの3本です。

sato_devブランチを消したらコミットBが消えて、takahashi_devブランチを消したらコミットCが消える……というのも、なんとな〜く直感で理解できるような気がします。

「ブランチ完全に理解した」

</details>

### 第三問

この図にブランチは何本あるでしょうか。
![スクリーンショット 2019-06-23 11.33.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/b0dd88b1-c385-b14e-db60-712a601fd734.png)
これは一体どういう状態なんだ？
おかしい。
masterブランチとtakahashi_devブランチと、sato_devブランチがありそうなのに、同じコミットに吹き出しが出ている。
何かがあったに違いない……。
そこに先輩がこう言います。
「sato_devブランチはもう要らないから消しといて」
「（ええっ、そんなことをしたら全てのコミットが消えてしまうんじゃないの！ ブランチなんもわからん……。）」

<details><summary>クリックして正解を見る</summary>

答えは **3本** です。masterブランチとtakahashi_devブランチとsato_devブランチがあります。
それに大丈夫です、sato_devを消してもコミットが消えたりはしません。

</details>

### 第四問

最後の問題です。ブランチは何本あるでしょうか。
![スクリーンショット 2019-07-13 23.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/38154ab6-7971-d4bc-c475-bfee183880e2.png)
「なんか2本あるっぽいように見えるぞ……」

<details><summary>クリックして正解を見る</summary>

正解は **1本** です。
ここまで来たら、どうもブランチの数は枝分かれの数ではなく、「吹き出しの数」らしいという規則性は理解できたかと思います。

</details>

## よくある勘違い

どうでしょうか。4問の問題を確証をもって秒殺することができたでしょうか。
もし確証アンド秒殺できなかったら、この記事はきっとあなたのお役に立つと思います。

Gitのブランチは一旦どういうものか理解してしまえば簡単です。
けれども理解したつもりになって勘違いしていると、いざというときに思わぬ挙動を見てびっくりする時が来ます。ここに、Gitのよくある **勘違い** の図を書いておきます。
![スクリーンショット 2019-07-06 10.41.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/ab8ffa24-4974-bf5d-f099-529166d1b887.png)
さて、あなたは新入社員です。先輩に **「新しくブランチを切って作業して」** と言われました。
**ブランチを切る** というのは、枝を切断するという意味ではなく、新しく **ブランチを作る** という意味です。伝票を切る、と一緒です。その時にイメージをするのは、この勘違いの図なのではないでしょうか。この青い矢印を作ってから、新しくここにコミットが乗っていくというようなイメージです。ちゃんとブランチを知っている人なら分かっている通り、このイメージは **完全な誤り** です。

この図にはおかしなところがいくつかあるので、順に示していきます。
１つ目。
![スクリーンショット 2019-07-06 11.01.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/960aaa18-e4c8-aa2d-29f6-18938fca6d6c.png)
コミットDは最新のコミットなのに、矢印が突き抜けています。これはGitの図としておかしいです。
この矢印マークは、ただどっちが新しいかを示しているだけなので、「過去」とか「現在」とか書いてる以上矢印を書く意味もそんなにありませんが……。
なんでおかしいかはこの記事を読んだら多分わかるようになります。

2つ目。
![スクリーンショット 2019-07-06 11.09.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/82d00371-4a18-3168-2138-3559cb2e2c28.png)
これも1つ目と同じようなものですが、必ず矢印の先にはコミットがあるはずで、おかしいです。
それに、新しくブランチを作った瞬間には、まだ新しい矢印は発生しません。

3つ目。
![スクリーンショット 2019-07-06 11.06.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/ee3ba3c4-43a4-e435-1619-4e6378a7791f.png)
矢印のことをmasterと言っていますが、これもおかしいです。ブランチは、必ずコミットに対して指し示す必要があります。

ブランチは、「複数のコミットが入っている入れ物」でも、「複数のコミットを載せている矢印」でもありません。

ブランチが何もわからなくなった？　安心して下さい。これから知っていきましょう。

## ブランチの前にコミットを知ろう

それではブランチが何かを知っていきましょう……といきたいところなんですが、
それより前にコミットについて知る必要があります。
**「概念としての」ブランチはコミットの連なり** です。
なので、まずは **コミット同士がどう繋がっているか** を知るところから始めましょう。

コミットには、各々を識別するためのIDのようなものがあります。
このIDは、SHA-1というアルゴリズム[^1]でコミット内容をHashした値です。そして各コミットは、前のコミットが生成したその値の情報を持っており、これによってコミット同士が繋がっています。
いや心配しないで下さい。大丈夫です。なんか今一瞬だけ難しげな雰囲気が出ましたが、一瞬だけですから！

簡単に言うと、

- コミット毎に、その変更内容によって振られる **謎のID** がついている
- **各コミットは、自分の前のコミットのIDを知っている** ため、コミット同士が繋がることができる

ということです。

図を見ればすぐ分かります。
![スクリーンショット 2019-06-23 18.04.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/8b76fdf0-0a44-5f06-3611-ebbafa48ba8f.png)
最新のコミット`e515a31`は、その一つ前のコミット`2d7b999`を参照しており、更にそのコミット`2d7b999`は、コミット`9bf0fd4`を参照している……という具合です。このようにしてコミット同士は繋がっています。

## ブランチを知ろう

それでは本題に入りましょう。ブランチです。さっきの画像にピョコンと吹き出しをつけました。
![スクリーンショット 2019-06-23 17.56.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/39f33118-b632-e55a-5637-53d2185c9a1a.png)
勘の良い方はもしかしたらお気づきになったかもしれませんが、ブランチというものは、コミットへの参照です。各コミットが前のコミットを参照するのと同じように、この「masterブランチ」というものの実体は、コミット`e515a31`への参照です。ただそれだけなのです。なので、ブランチはとても軽く、沢山作っても職場の先輩には怒られません。……いや無意味にブランチを作りまくったら多分怒られますが、ブランチはただコミットを指し示しているだけなので、その点ではGitのタグと同じで、とても軽いものです。

けれどもブランチはタグとは違います。僕たちが日常的に「masterブランチが〜」と言ったりする時にイメージするのは、変更の枝の中の一本の線です。そして、その認識はほぼ間違っていません。ブランチの実体がただの一つのコミット`e515a31`を指すだけなのに、なぜ一本の線がブランチなのでしょうか。
それは、ブランチは確かにただ一つのコミットを指しているだけなのですが、概念としてのブランチは、そのブランチの指すコミットが連なっているチェーンそのものを指すからです。

それがどういうことか説明しましょう。
![スクリーンショット 2019-06-23 18.31.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/c502cb1a-f4a4-c0a6-545b-70fd4d638762.png)

- 実体としてのmasterブランチは、ただのコミット`e515a31`への参照です。
- 実体としてのtakahashi_devブランチは、ただのコミット`6a3022c`への参照です。

ここまではいいですね。
けれども「概念としてのブランチ」では話が変わってきます。ブランチはやっぱり線だからです。

- 概念としてのmasterブランチは、`e515a31`→`2d7b999`→`9bf0fd4`→`375f7e0`へのコミットの連なりを指します。
- 概念としてのtakahashi_devブランチは、`6a3022c`→`8aad6d7`→`9bf0fd4`→`375f7e0`のコミットの連なりを指します。

実体としてのブランチはただ一つのコミットへの参照なのに、概念としてのブランチが成立するのは、上で説明した通りコミット自身が前のコミットへの参照を持っているからです。

だから、僕たちが普段「takahashi_devブランチが〜」と言った時に指すのは、この図の黄色になっているところなわけです。ブランチはコミットの連なりなのです。
![スクリーンショット 2019-06-23 19.09.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/93a6f0be-7afd-25d1-fc90-65f1f8a624c2.png)

## ブランチの動きを見る

もうブランチとは何かが分かったと思うので、ここからは実際にブランチを運用していく様子を見ていきましょう。
ブランチを作って、コミットをして、削除するところまで見ていきましょう。

### ブランチを作る

第一問の時の画像をそのまま引っ張ってきます。
![スクリーンショット 2019-06-23 11.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/2b312621-7322-436c-ee73-c65ca98301bb.png)
このmasterにチェックアウトした状態で、新しく **tsuchiya_devブランチを作ります** 。
新しくコミットDを参照するtsuchiya_devが作られて、こうなります。
![スクリーンショット 2019-06-23 20.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/841c698b-c319-8526-7545-ffcba01eaa59.png)

### tsuchiya_devブランチを作ったのでコミットする

さっきtsuchiya_devを作ったので、そこにチェックアウトしてコミットをしましょう。
tsuchiya_devでコミットすると、こうなります。（左側のコミットA、Bは省略しました）
![スクリーンショット 2019-06-23 21.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/4b24ebb4-781a-a31f-3f40-d303e3dfa335.png)

### masterブランチにもコミットする

続いてmasterにも誰かがコミットしました。こうなります。
![スクリーンショット 2019-06-23 21.08.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/5db6cf66-ff9c-cfc6-1598-bd086c9e03be.png)

### tsuchiya_devブランチを消す

開発が進んで下記のような感じになりました。
![スクリーンショット 2019-06-23 21.16.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/e2ae20b0-2fcd-e9d3-d1a0-9a1da326a96d.png)
この状態でtsuchiya_devブランチを消すことになりました。
顧客の要望が変わり、開発していたものが完全に不要となったためです。
**「やり直しは、やり始めるよりも、辛い。」** Getting Over Itの壺おじさん・ディオゲネスもそう教えてくれましたが、masterにマージ（併合）するよりも前の段階で分かっただけまだマシと割り切りましょう。
削除するとこうなります。
![スクリーンショット 2019-07-12 00.24.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/022d8e9a-6bea-50a8-3b5b-52edb2d27c76.png)
この、点線になっている部分が消えます。tsuchiya_devブランチは黄色になっている部分を指しますが、消えない部分もあるようです。
tsuchiya_devを消すと、tsuchiya_devによってだけ見られていた、コミットGを参照するものは何もなくなります。なのでコミットGが消えます。コミットGが消えると、コミットEを参照するものは何もなくなります。なのでコミットEも消えます。コミットDは、コミットEには参照されなくなりますが、コミットFに参照されているのでまだ消えません。コミットCは、消えないコミットDに参照されているので消えません。

#### 補足：ブランチの削除

ブランチの削除がちゃんと理解できているかをここでもう一回確認しましょう。
下の画像は、tsuchiya_devブランチが作りたてホヤホヤだった頃の画像です。この画像の状態から、tsuchiya_devブランチを削除したらどうなるか考えてみて下さい。
![スクリーンショット 2019-06-23 20.46.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/841c698b-c319-8526-7545-ffcba01eaa59.png)
答えは簡単。
![スクリーンショット 2019-06-23 11.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/2b312621-7322-436c-ee73-c65ca98301bb.png)
ただtsuchiya_devブランチというコミットへの参照が消えるだけで、コミット自体は何も削除されません。なぜならコミットDは、まだmasterに参照されているからです。まだ何かに参照されているコミットは、消えることはありません。

### マージ（merge）

上までの内容だけだと樹形図はまだ完全には読めませんが、もうあと一息です。
マージというのは、分岐した変更をがっちゃんこすることです。

#### 通常のマージ（マージコミットを生成する）

コミットAからコミットB,Cに分岐した状態です。この状態から、masterブランチがsato_devブランチをマージします。
![スクリーンショット 2019-07-08 08.13.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/ce1b7431-659d-b0c5-26a4-60077e1e78d6.png)
そうするとマージコミットが作られて、こうなります。
マージコミットの時点で、ちゃんとmasterはsato_devの変更を取り込めているということになります。
![スクリーンショット 2019-07-12 00.44.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/91798afb-6084-bf9a-ba08-2ef9e8c953e8.png)
このマージコミットというやつは、今までのコミットと少しだけ違うところがあります。 **前のコミットへの参照を複数持ってるという点で、これまでのコミットとは異なっています。** この場合のマージコミットは、コミットBと、コミットCという2つの参照を持っているということです。コミットへの参照は複数持てるということを覚えておきましょう。
![スクリーンショット 2019-07-12 00.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/40abfba0-445e-3cd8-5a2d-13fa00360049.png)
ちなみに、この複数親を持ったときに一つめの親コミットを`HEAD^`、もう一つの親コミットを`HEAD^2`で指すことができます。別の方の記事ですが、[この記事](https://qiita.com/chihiro/items/d551c14cb9764454e0b9)が詳しいです。
後はもう一点だけ。この状態からsato_devブランチに新しいコミットがあった場合どんな図になるでしょうか。考えてみてください。
正解はこうです。

<details><summary> クリックして正解を見る </summary>
sato_devから1コミット進むので、こうなります。sato_devの変更をmasterが取り込んでいます（マージしました）が、sato_devにとってはそんなこと知ったことではないので、追加で「sato_dev側からmasterブランチを取り込む」ことをしない限りは、sato_devはmaster側のことを何も知ることはできません。

マージは、「どのブランチが」「どのブランチを」取り込んだかがとても大事です。masterはsato_devを取り込みましたが、sato_devはmasterを取り込んでいないということをちゃんと理解する必要があります。

![スクリーンショット 2019-07-12 08.13.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/e3e1c309-f619-9213-fa3b-10cfd807e14f.png)

**不正解** の図は、たとえばこんな図です。

![スクリーンショット 2019-07-12 08.24.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/caed2939-9234-f964-1544-830cbc7a1c02.png)
</details>

#### Fast-forward(早送り)マージ

変更をマージしてもマージコミットが作られない場合もあります。
下記の場合はコミットBからtsuchiya_devブランチが一方的に進んでいる状態です。
![スクリーンショット 2019-07-08 08.14.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/eca60ae6-7911-bb8d-541b-cae4cf28d1bb.png)
masterがtsuchiya_devをマージをすると、masterブランチがtsuchiya_devに追いつくような動きをします。
マージコミットは作られません。このようなマージをFast-forward(早送り)マージといいます。
※マージするとFast-forwardマージになる、という状態でも、マージコミットが作られる普通のマージにすることもできます。
![スクリーンショット 2019-07-08 08.14.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265900/62071b9d-42bf-cbdd-d56f-493a0413df6b.png)

## 振り返る

上記までの知識がきちんと身についたら、多分ツリーを読むことは一通りできるはずだと私は思っています。
もし、最初に4問を解けなかった人は、ここからもう一度4問を解き直してみてください。
それから、「よくある勘違い」を見て、それがなぜ勘違いかを考えてみてください。
分からなかったら完全に私の力不足でごめんなさいという感じです。

## おわりに

この記事が、Gitのツリーを読めなかった人、
もしくは、ツリーが読めない人に教える立場の人にとっての一助となれば幸いです。

私がおかしなことを言っていた場合は、遠慮なくマサカリください。
どうぞよろしくお願いします。

## 参考

[Git のブランチ機能 - ブランチとは](https://git-scm.com/book/ja/v1/Git-%E3%81%AE%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E6%A9%9F%E8%83%BD-%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%81%A8%E3%81%AF)
[Gitのコミットハッシュ値は何を元にどうやって生成されているのか](https://tech.mercari.com/entry/2016/02/08/173000)
[【やっとわかった！】gitのHEAD^とHEAD~の違い](https://qiita.com/chihiro/items/d551c14cb9764454e0b9)

[^1]: SHA-1はHashアルゴリズムとしては問題があり、米Googleが2017年、初めて衝突に成功させました。つまり、異なるパスワード（ハッシュ元）でも同じハッシュになっちゃうことを証明したような感じです。Gitではセキュリティ的な文脈でSHA-1を使っているわけではないため、あまり問題はありません。パスワードのHashなどにはSHA-1やMD5なんかは絶対使わないようにしましょう！ [SHA-1の衝突問題、Gitへの影響についてトーバルズ氏の見方は](https://japan.zdnet.com/article/35097283/)