「あ、コンフリクト起きた！」焦らない。Gitコンフリクト解決の現場ルール｜現場で使える実践テクニック
こんにちは！
今日は「Gitコンフリクト解決の現場ルール」について解説します。
複数人でコード開発していると、めっちゃ高確率で遭遇するこの問題。
「あ、コンフリクト起きた！」って時に、パニックにならず確実に対処する方法をお伝えしますね。
コンフリクトってそもそも何？現場あるあるから学ぶ
僕もフロントエンジニアになりたての頃、初めてコンフリクトを経験した時、ほんま焦りました。
画面に赤い文字がいっぱい出てきて、「えっ、ファイル壊れた？」って思ったんですよ。
でも実はそうじゃなくて、Gitが「ここの部分、どっちの変更を採用する？」って教えてくれてるだけなんです。
コンフリクトが起きるシーンって、実はかなり限定的です。
一番よくあるのは、複数人が同じファイルの同じ箇所を編集した時。
例えば、あなたがAさんと同時にheader.htmlのナビゲーション部分を編集してて、その後マージしようとする、みたいなパターンですね。
現場あるあるとしては：
- デザイナーが色を変更したブランチと、別の人がクラス名を変更したブランチをマージしようとした
- CSSファイルで、Aさんが
marginを調整して、Bさんがそのすぐ下のpaddingを調整した場合は意外とコンフリクトしない（同じ行じゃないから） - みんなで
package.jsonを触ると、めっちゃコンフリクトする
要するに、「Gitは賢いけど、完全には判断できない時がある」くらいの理解で大丈夫ですよ。
実際のコンフリクト画面を見てみる
コンフリクトが発生するとどう見えるか、実例で説明しますね。
例えば、あなたがbutton.cssを編集してコミットしました。
同時期に同僚も同じファイルの同じ箇所を編集してコミットしてました。
今からマージしようとしてgit mergeコマンドを実行すると、こんな表示が出ます：
Auto-merging button.css
CONFLICT (content): Merge conflict in button.css
Automatic merge failed; fix conflicts and then commit the result.
ここまで来たら落ち着いて、実際にファイルを開いてみると、こんな風になってるはずです：
.btn-primary {
padding: 12px 24px;
<<<<<<< HEAD
background-color: #3b79b7;
=======
background-color: #2d5a8c;
>>>>>>> feature/button-style
border-radius: 4px;
}
この表記が「マーカー」というやつです。
<<<<<<< HEADから=======までが、あなたの現在のブランチの内容。
=======から>>>>>>>までが、マージしようとしてるブランチの内容。
つまり、背景色について、二つの異なる値が提案されてる状態ですね。
コンフリクト解決の4ステップ
ステップ1：まず状態を確認する
焦らず、まず今の状態を把握しましょう。
git statusコマンドを実行すると、コンフリクト状態にあるファイルが表示されます。
$ git status
On branch main
You have unmerged paths.
(fix conflicts and run "git commit")
Unmerged paths:
both modified: button.css
「button.cssで両方が修正してるね」って教えてくれてます。
複数ファイルでコンフリクトしてることもあるので、どのファイルが問題なのか確認するのが大事ですよ。
ステップ2：コンフリクト箇所を理解する
ファイルを開いて、マーカーを見つけます。
複数箇所でコンフリクトしてることもあるので、<<<<<<<で検索すると探しやすいですよ。
そして大事なのは、「どっちが正しいのか」を判断すること。
自分の変更が正しい？相手の変更が正しい？それともどっちも採用したい？
ここで僕も失敗した経験があるんです。
深く考えず、自分の方を採用しちゃったら、後で「あ、向こうの変更の方がよかった」ってなったことが。
解決する前に、必ずチームメイトに「どっちで行こうか」って相談するといいですよ、特に初めてのコンフリクトなら。
ステップ3：マーカーを削除して確定させる
判断したら、いらないマーカーを削除して、最終的なコードに整えます。
例えば、相手の色の方が好きなら、こう変更します：
.btn-primary {
padding: 12px 24px;
background-color: #2d5a8c;
border-radius: 4px;
}
大事なのは、「3つのマーカー（<<<<<<<、=======、>>>>>>>）が完全に削除されてる」ことです。
マーカーが残ってたら、ファイルが壊れたまま。
もしマーカーが残ったまま本番環境に行ったら、めっちゃ大変なことになるので注意してくださいね。
ステップ4：ステージングして、コミットする
解決が終わったら、変更をステージングします：
$ git add button.css
複数ファイルでコンフリクトしてたら、全部解決した後にgit