【もりけん塾】gitコンフリクト勉強会①【画像たくさんでハンズオン再現】

今日は、もりけん塾でおこなわれた「gitコンフリクト勉強会」のまとめをします。

こんにちは。Webコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
HTML/CSS(SCSS)/jQuery/WordPress
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

先日、WordPressの実務を制作会社さんとおこなったのですが、gitのコンフリクトが解消できず悔しい思いをしました。

もりけん先生(@terrace_tec)に報告したところ、gitコンフリクトのハンズオンを開催してくださることになりました(´；ω；`)感謝！

今日のこれは@fuwafuwahappy @hinapocooo
さんが業務上必要な知識で悔しいと感じたらしく急遽開かれたもの

早く勉強会して理解してもらって
現場で「え、ちょっと前まで分からなかったのに凄いね」と本人が言われるように弾丸でやります

これからも塾生の声に耳を傾けて柔軟に対応していきます

— フロントエンドエンジニア (@terrace_tech) December 19, 2020

学びや気付きがたくさんあったので、忘れぬうちにアウトプットします。

//普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

gitコンフリクト勉強会ハンズオン
あとがき

gitコンフリクト勉強会ハンズオン

ここからは勉強会のハンズオンの通り、進めていきます！

一緒に進めれば、勉強会に参加したようにコンフリクトを経験することができるので、ぜひやってみてください♪

【用意するもの】
・GitHubアカウント
・エディタ(わたしはVSCodeです)
・ターミナル

コンフリクトってなぁに？

同じファイルの同じ行 が編集されてmergeしたい先との相違があるとき、どちらのコードを採用すればいいかgitが迷ってエラーを出している状態。

リポジトリやファイルの作成

まず、勉強会で使う環境を用意していきます。
GitHub画面右上の+ > New Repositryで任意の名前をつけてリポジトリを作成します。

わたしはconflictリポジトリを作りました。以下の画面が表示されます。表示されたコードをまるっとコピーしておきます。

次にターミナルを開きます。下図のように、コマンドを打っていきます。

//"conflict"ディレクトリを作成する
mkdir conflict

//conflicftディレクトリに移動する
cd conflict

conflictディレクトリに移動できたら、先ほどまるっとコピーしていたコードを貼り付けます。

Enterすると、リモートリポジトリと同期したローカルリポジトリが完成です。

同時に、README.mdファイルと「main」ブランチが作られて、commitされた状態です。

ls -laとコマンド入力してみます。README.mdと一緒に.gitが作成されています！

mainブランチに加えて、コンフリクトをつくるためにもう一つブランチを作成します。ここではブランチ名を「feature/a」とします。

//新しいブランチを作成する
git branch ブランチ名

git branchとたたくと、ブランチ一覧 + 今いるブランチがわかります。(今、mainにいますね)

次にindex.htmlファイルを作成します。コマンドから作ってみます！

//index.htmlファイルを作成
echo > index.html

//VSCodeへ移動
code .

code .でVSCodeへ簡単に移動できました！便利〜！

うまく移動できない方は、こちらの設定をどうぞ！

https://twitter.com/terrace_tech/status/1340088128611078144?s=20

code . でEnterすると自動でVSCodeが開かれます！おお〜！！

わたしはここからは、VSCodeのターミナル使っちゃいます( ´・ᵕ・ )VSCodeが開いている状態で、うえメニューの「ターミナル > 新しいターミナル」で開けます。

index.htmlにコードを追加します。今回は簡単に「! + Enter」で基本のhtml出して→保存。

ここまででターミナルgit statusたたいてみます〜！Untracked filesにindex.htmlが出てきて、git addしてね〜と言われてます

git add .とgit commit > push します。head(最新のコミット) がリモートのmainにpushされました。

GitHubで確認してみます。先ほどのcommitメッセージが表示されていれば成功です。

コンフリクトを作ろう！

次に、コンフリクトを起こすために別ブランチに移動します。git branchで現在のブランチを確認するとmainにいるので、git checkout [ブランチ名]でfeature/aブランチに移動します。

feature/aブランチでindex.htmlを作成。

「! + Enter」で基本のhtmlを呼び出します。

ここで先ほどのmainブランチと違うのは、わざと同じ場所を編集することです。コンフリクトを起こさせるためです。

ここまでを保存。git add . とgit commitします。

このfeature/aブランチをmainブランチにmergeさせてみます。するとCONFLICTと表示されて、コンフリクトが成功しました！！(おかしな話ですがww)

なぜ、コンフリクトが起きたのか？

mainとfeature/aの内容に相違があるからです。

いつものとおり、ひどいアナログな手書きですが図を描きました。(勉強できないのがバレそうですw)

mainとfeature/aブランチでそれぞれfirstコミットしてある状態
↓
それぞれのhtmlの内容が違う
↓
feature/aをmainにmergeしようとして、コンフリクト発生！
gitがどちらのhtmlの内容を採用したら良いのか迷っている状態

コンフリクトを解消する

ここからは実際にコンフリクトを解消していきます。

ターミナルが先ほどの状態になっているところからです。↓コンフリクトが表示されています。

この状態でhtmlをみてみると、VSCodeではこのような画面になります。

<<<<<HEADから=====までの緑色がついた部分は、feature/a(ローカル)で今変更していた部分。
=====から>>>>>main までの青色がついた部分は、mergeしたい先のmainの内容です。

これらが、gitがどちらを採用したら良いか迷っている相違の部分です。

どちらが正解なのかは、その時々によって変わってくるので、どちらを取り込むのか自分で確認します。

今回は、feature/aで編集した方を取り込んでみます。

VSCodeだと、「現在の変更を取り込む」の表示があるので、こちらを選択します。

下図のように、feature/aの内容が取り込まれ、mainの内容は消えました。

この状態でgit statusをたたいてみます。Unmerged pathのところがboth added となっているのがポイントです。addしてくださいとなっているので、従います。 git add. とcommitまでして、git logをみてみます。commitの記録がみれるものです。