CI/CDをkatacodaで体験（初心者向け） - Part7(Finding Bugs)

# CI/CD入門
このぺーじでは、[katacoda](https://www.katacoda.com/)と呼ばれる「ブラウザから無料で勉強用のインスタンスを起動できるWebサービス」を利用してCI/CDを実践します
内容は上記リンクに沿うので、不明点があればそちらへどうぞ

## Gitのバージョン管理について - Scenario 7 - Finding Bugs
ここでは、CI/CDとして欠かせないGitによるバージョン管理について学習します
このシナリオで学習することをさっと確認する場合は**概要**を確認
**理解に間違い等がございましたら、ぜひご指摘ください**

### <font color="Red">概要</font>
>- ```git diff <hashA> <hashB>```で特定のバージョンを比較
- ```git log <option>```で様々なログの表示が可能
    - option = --oneline：一行で各commitコメントを確認
    - option = -p：↑に加えて「誰が」、「いつ」、「どのような」変更を加えたか確認
    - option = --grep="(hoge)"：特定のcommitコメントが入ったバージョンのみ表示
- ```git bisect```で誤りのあるcommitを二分探索
    1. ```git bisect start```で探索開始
    2. ```git bisect bad/good <hash>```で正誤を定義
    3. badおよびgood内のランダムなバージョンで正誤を確認
    4. 正誤に対して、```git bisect bad/good```で評価
    5. 3,4を繰り返して誤りのあるcommitを発見
    6. ```git bisect reset```で探索終了
- ```git blame```でファイルの特定のセクション（各行）で誰が最後に作業したか確認

### Git Diff Two Commits
```git diff```は最も簡単なコミットの差分を出力する方法
同じファイルに対してバージョンごとの差分を見る場合は以下のような使い方をする

```
$ git diff HEAD~2 HEAD
ESC[1mdiff --git a/list.html b/list.htmlESC[m
ESC[1mindex 96e99d0..9f53aec 100644ESC[m
ESC[1m--- a/list.htmlESC[m
ESC[1m+++ b/list.htmlESC[m
ESC[36m@@ -2,4 +2,6 @@ESC[m
 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>ESC[m
 <li>Aliquam tincidunt mauris eu risus.</li>ESC[m
 <li>Vestibulum auctor dapibus neque.</li>ESC[m
ESC[32m+ESC[mESC[32m<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in,   //変更箇所
ESC[32m+ESC[mESC[32m<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu   //変更箇所
 </ul>ESC[m
```

HEAD~2は、現在作業をしているbranch（HEAD）から二つ前のバージョンを示している
つまりここでは、現在作業をしているbranchとそのbranchが二つ前にcommitした際の結果を比較
```git diff```の結果を理解するため、```git blame <hash> file```というコマンドで各バージョンごとの変遷を確認

```
$ git blame HEAD list.html
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 1) <ul>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 2) <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
eddb7535 (Katacoda Scenario 2020-10-19 11:01:16 +0000 5) <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, p
93701df5 (Katacoda Scenario 2020-10-19 11:01:16 +0000 6) <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu v
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 7) </ul>
$ git blame HEAD~1 list.html
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 1) <ul>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 2) <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
eddb7535 (Katacoda Scenario 2020-10-19 11:01:16 +0000 5) <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, p
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 6) </ul>
$ git blame HEAD~2 list.html
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 1) <ul>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 2) <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
^b22862a (Katacoda Scenario 2020-10-19 11:01:16 +0000 5) </ul>
$ git blame HEAD~3 list.html
fatal: bad revision 'HEAD~3'
```

上記の結果から```list.html```現在も合わせて3つのバージョンを持っていることが判明
第一世代では、```<ul>~</ul>```までの5行がhash値"b22862a"というバージョンで管理されている
第二世代では、```<li>Morbi~```の5行目がhash値"eddb7535"というバージョンで管理されている
第三世代では、```<li>Praesent```の6行目がhash値"93701df5"というバージョンで管理されている

### Git Log
ここでは、```git log```を用いて該当レポジトリ内での変遷を様々な粒度で確認
```git log --oneline```はコミットメッセージとhash値を簡潔に確認

```
$ git log --oneline
ESC[33m93701dfESC[mESC[33m (ESC[mESC[1;36mHEAD -> ESC[mESC[1;32mmasterESC[mESC[33m)ESC[m Final Item
ESC[33meddb753ESC[m New Item
ESC[33mb22862aESC[m Initial commit of the list
```

```git log -p```は上記の内容に加え、「誰が」、「いつ」、「どのような」変更を加えたかlessコマンドで表示
オプションとして```-n 2```を付けることで、現在のhash値から何世代前まで表示するか指定可能（この場合、HEAD,HEAD~1）

```
$ git log -p
ESC[33mcommit 93701df5e4a964c2bf483e0d171528684699d0f4ESC[mESC[33m (ESC[mESC[1;36mHEAD -> ESC[mESC[1;32mmasterESC[mESC[33
Author: Katacoda Scenario <scenario@katacoda.com>
Date:   Mon Oct 19 11:01:16 2020 +0000

    Final Item

ESC[1mdiff --git a/list.html b/list.htmlESC[m
ESC[1mindex def310d..9f53aec 100644ESC[m
ESC[1m--- a/list.htmlESC[m
ESC[1m+++ b/list.htmlESC[m
ESC[36m@@ -3,4 +3,5 @@ESC[m
 <li>Aliquam tincidunt mauris eu risus.</li>ESC[m
 <li>Vestibulum auctor dapibus neque.</li>ESC[m
 <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a.</li>ESC[m
ESC[32m+ESC[mESC[32m<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros e
 </ul>ESC[m

ESC[33mcommit eddb7535cb88cd4000673585e2981be06cfe2375ESC[m
Author: Katacoda Scenario <scenario@katacoda.com>
Date:   Mon Oct 19 11:01:16 2020 +0000

    New Item
```

```git log --grep="Initial"```はコミットの文字列で表示するコミットを制限することができる

```
$ git log --grep="Initial"   //"Initial"とコメントされているcommitを表示
ESC[33mcommit b22862af361944b5ff365b094011c875c798f4efESC[m
Author: Katacoda Scenario <scenario@katacoda.com>
Date:   Mon Oct 19 11:01:16 2020 +0000

    Initial commit of the list
```

### Git Bisect
```git bisect```は誤った変更等、間違いを含んだcommitを特定することが可能
今回のシナリオでは、list.html内のhtmlタグが未入力となってcommitされたバージョンを特定する

0.初めに```git log```で状態を確認

```
$ git  log --oneline
ESC[33mbbb550fESC[mESC[33m (ESC[mESC[1;36mHEAD -> ESC[mESC[1;32mmasterESC[mESC[33m)ESC[m Adding Pel
ESC[33mefb15afESC[m Adding Quisque
ESC[33m9c5469bESC[m Adding Vestibulum
ESC[33m063f446ESC[m Final Item
ESC[33m4167e39ESC[m New Item
ESC[33m2ae3793ESC[m Initial commit of the list
```

1.```git bisect start```で探索を開始

2.```git bisect bad (HEAD)```で間違った結果を定義
間違った変更がいつcommitされたか探索するために、「正しい結果のcommit」、「間違った結果のcommit」を定義する必要がある
ここでは、「間違った結果のcommit」と定義

3.```git bisect good HEAD~5```
ここでは、「正しい結果のcommit」と定義
hash値は正しいと確証が得られるバージョンであればより新しいバージョンでも問題ない

4.「正しい結果のcommit」と「誤った結果のcommit」の間のランダムなバージョンに対して結果の正誤を確かめる

```
Bisecting: 2 revisions left to test after this (roughly 1 step)
[063f4464b45cbc3f2bb3c30ca33ef3c579b3318a] Final Item   //ランダムにHEAD~3のバージョンが選択された
$ cat list.html   //htmlタグ記述漏れの確認（目視）
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</li>
</ul>
$ git bisect good   //結果が正しいことをgitに伝える
```

HEAD~3時点では、list.htmlに記述漏れは存在しない（**＝HEAD~4以前の探索は不要**）

5.4の繰り返し

```
Bisecting: 0 revisions left to test after this (roughly 1 step)
[efb15afb8108df6760557a183592321cd803d9fc] Adding Quisque   ////ランダムにHEAD~1のバージョンが選択された
$ cat list.html
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</li>
Vestibulum auctor dapibus neque   //htmlタグの記述漏れを発見
<li>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.</li>
</ul>
$ git bisect bad   //結果が間違っていることをGitに伝える
```

4と5の探索から誤りの混入したcommitはHEAD~3とHEAD~1の間
すなわち、HEAD~2の"Adding Vestibulum"のcommit時と断定

6.探索終了

```
$ git bisect reset
Previous HEAD position was 9c5469b Adding Vestibulum
Switched to branch 'master'
$ git branch -va
* ESC[32mmasterESC[m bbb550f Adding Pellentesque
```

確認のため、以下に各バージョンのlist.htmlを順に表記
一つずつバージョンを遡って確認するより、手間がかからないことを実感できるはず

```
$ git blame HEAD list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000  1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000  2) <li>Lorem ipsum dolor sit amet, consectet
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000  3) <li>Aliquam tincidunt mauris eu risus.</l
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000  4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000  5) <li>Morbi in sem quis dui placerat ornare
59b68ac6 (Katacoda Scenario 2020-10-19 13:04:19 +0000  6) <li>Praesent dapibus, neque id cursus fau
6c0c7e6a (Katacoda Scenario 2020-10-19 13:04:42 +0000  7) Vestibulum auctor dapibus neque
3abf424c (Katacoda Scenario 2020-10-19 13:04:42 +0000  8) <li>Quisque sit amet est et sapien ullamc
45b0dc5d (Katacoda Scenario 2020-10-19 13:04:42 +0000  9) <li>Pellentesque fermentum dolor</li>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 10) </ul>
$ git blame HEAD~1 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) <li>Morbi in sem quis dui placerat ornare.
59b68ac6 (Katacoda Scenario 2020-10-19 13:04:19 +0000 6) <li>Praesent dapibus, neque id cursus fauc
6c0c7e6a (Katacoda Scenario 2020-10-19 13:04:42 +0000 7) Vestibulum auctor dapibus neque
3abf424c (Katacoda Scenario 2020-10-19 13:04:42 +0000 8) <li>Quisque sit amet est et sapien ullamco
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 9) </ul>
$ git blame HEAD~2 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) <li>Morbi in sem quis dui placerat ornare.
59b68ac6 (Katacoda Scenario 2020-10-19 13:04:19 +0000 6) <li>Praesent dapibus, neque id cursus fauc
6c0c7e6a (Katacoda Scenario 2020-10-19 13:04:42 +0000 7) Vestibulum auctor dapibus neque
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 8) </ul>
$ git blame HEAD~3 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) <li>Morbi in sem quis dui placerat ornare.
59b68ac6 (Katacoda Scenario 2020-10-19 13:04:19 +0000 6) <li>Praesent dapibus, neque id cursus fauc
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 7) </ul>
$ git blame HEAD~4 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
3dd56b54 (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) <li>Morbi in sem quis dui placerat ornare.
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 6) </ul>
$ git blame HEAD~5 list.html
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 1) <ul>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 2) <li>Lorem ipsum dolor sit amet, consectetu
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 3) <li>Aliquam tincidunt mauris eu risus.</li
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 4) <li>Vestibulum auctor dapibus neque.</li>
^d9670fb (Katacoda Scenario 2020-10-19 13:04:18 +0000 5) </ul>
```

### Git Blame
```git blame```はファイルの特定のセクション（各行）で誰が作業したかを知ることができます
また、行数が多いファイルに対しては、確認したい行を指定することが可能です

```
$ git blame list.html
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000  1) <ul>
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000  2) <li>Lorem ipsum dolor sit amet, consectet
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000  3) <li>Aliquam tincidunt mauris eu risus.</l
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000  4) <li>Vestibulum auctor dapibus neque.</li>
4167e39f (Katacoda Scenario 2020-10-19 13:41:30 +0000  5) <li>Morbi in sem quis dui placerat ornare
063f4464 (Katacoda Scenario 2020-10-19 13:41:30 +0000  6) <li>Praesent dapibus, neque id cursus fau
9c5469be (Katacoda Scenario 2020-10-19 13:41:47 +0000  7) Vestibulum auctor dapibus neque
efb15afb (Katacoda Scenario 2020-10-19 13:41:47 +0000  8) <li>Quisque sit amet est et sapien ullamc
bbb550f2 (Katacoda Scenario 2020-10-19 13:41:47 +0000  9) <li>Pellentesque fermentum dolor</li>
^2ae3793 (Katacoda Scenario 2020-10-19 13:41:30 +0000 10) </ul>
$ git blame -L 6,8 list.html   //6行目から8行目を確認
063f4464 (Katacoda Scenario 2020-10-19 13:41:30 +0000 6) <li>Praesent dapibus, neque id cursus fauc
9c5469be (Katacoda Scenario 2020-10-19 13:41:47 +0000 7) Vestibulum auctor dapibus neque
efb15afb (Katacoda Scenario 2020-10-19 13:41:47 +0000 8) <li>Quisque sit amet est et sapien ullamco
```