3人チーム開発を想定して、Gitのコンフリクトを実際に起こしてみた

おはようございます、YASUです。

昨日はGitの学習で、これまでで一番濃い時間を過ごしました。3人チームでの開発を想定して、わざとコンフリクトを起こし、それを実際に解消するところまで一通り体験しました。今日はその一部始終をシェアします。

結論

コンフリクトは怖いものではなく、Gitが「どちらを採用すればいいか、人間に判断してほしい」と教えてくれているだけの状態でした。実際に手を動かしてみると、その仕組みがよく分かりました。

3人チームのシチュエーションを設定する

自分をチームリーダーとして、Bさんがログイン機能を担当、Cさんがトップページのデザインを担当、という3人体制を想定しました。mainブランチから、feature/loginとfeature/designという2つのブランチをそれぞれ分岐させます。

git checkout -b feature/login
echo "<p>ログイン機能をここに実装予定</p>" >> index.html
git add index.html
git commit -m "feat: ログイン機能の実装場所を追加"

Bさんの作業として、index.htmlの末尾にログイン機能の実装予定を追記してコミットしました。

git checkout main
git checkout -b feature/design
echo "<p>ここはトップページのデザイン変更予定地です</p>" >> index.html
git add index.html
git commit -m "feat: デザイン変更の予定地を追加"

次にCさんの作業として、同じindex.htmlの末尾に、今度はデザイン変更の予定地を追記してコミットしました。同じファイルの同じ場所を、2人が別々に触っている状態です。

Bさんの変更はあっさりマージできた

mainブランチに戻り、まずBさんの変更をマージしました。

git checkout main
git merge feature/login

これは何の問題もなく、Fast-forwardという形式であっさり成功しました。

Cさんの変更でコンフリクト発生

続けてCさんの変更をマージしようとしたところ、画面にこう表示されました。

git merge feature/design
CONFLICT (content): Merge conflict in index.html

これがコンフリクトです。ファイルの中身を見てみると、Gitが挿入した特殊な記号が並んでいました。

<<<<<<< HEAD
<p>ログイン機能をここに実装予定</p>
=======
<p>ここはトップページのデザイン変更予定地です</p>
>>>>>>> feature/design

上下を区切る線があり、その間にBさんの内容とCさんの内容が、両方そのまま残っている状態です。Gitは「どちらを消せばいいか分からないので、両方残しておきます、選んでください」と言っているわけです。

VS Codeで解消する

ここでVS Codeを開きました。VS Codeにはコンフリクトを自動で検出して、色分けして見せてくれる機能があります。

• 緑色:今の変更(main側、Bさんのログイン)
• 青色:マージしようとした側の変更(feature/design、Cさんのデザイン)

画面の上には「現在の変更を取り込む」「入力側の変更を取り込む」「両方の変更を取り込む」というボタンが並んでいました。今回は両方とも活かしたかったので、「両方の変更を取り込む」を選びました。すると、あの特殊な記号がきれいさっぱり消えて、BさんとCさんの内容が両方とも普通の形で残りました。

git add index.html
git commit -m "merge: feature/designをマージ、コンフリクトを解消"

あとは保存して、いつも通りaddしてcommitするだけです。これでコンフリクトの解消が正式に完了しました。

まとめ

これまでステージング、ブランチ、マージと一つずつ積み上げてきましたが、今回のコンフリクト解消でようやく実務のチーム開発に近い感覚がつかめた気がします。同じところでつまずいている方の参考になれば嬉しいです。それでは、また明日!