4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[GitHub入門]VS CodeでGitを使いこなす マージ・コンフリクト・便利機能

Posted at

前回(変更を確定!コミット実行とコミットメッセージの書き方)では、変更を記録する「コミット」の基本を学びました。

第4回となる今回は、Gitを使っていると必ず直面する 「マージ(統合)」 と、誰もが一度は恐れる 「コンフリクト(競合)」 の解決方法について解説します。
「黒い画面(コマンドライン)でコンフリクトを直すのが怖い…」という方も安心してください。VS Codeの強力なGUI機能を使えば、パズルのように視覚的に解決できます!

GitHub入門シリーズ 全10回

本記事は「GitHub入門」全10回のNo.4です。

github-introduction.png

今回のゴール

  1. ブランチの作成と切り替えがVS Codeでできる
  2. ブランチをマージ(統合)する方法を覚える
  3. コンフリクト(競合)をVS Codeのマージエディタで解決できる
  4. 「Git Graph」で履歴の流れを視覚的に理解する
  5. 「Stash」で作業を一時退避する方法を知る

ブランチの作成と切り替え

チーム開発では、機能ごとに「ブランチ(枝)」を分けて作業し、最後にメインの枝(main)に統合(マージ)するのが一般的です。

VS Codeでブランチを作成・切り替え

コマンドを覚える必要はありません。VS Codeの左下のステータスバーに注目してください。

  1. 左下の main(現在のブランチ名)をクリックします
  2. 上部に出るメニューから「+ Create new branch...」を選択します
  3. ブランチ名(例: feature/login)を入力してEnterを押します。左下の mainが入力したブランチ名に変更されます

これだけで、新しい並行世界(ブランチ)が作成され、自動的にそこに切り替わります。

create-new-branch.png

ブランチをマージ(統合)する

作業が終わったら、分けた枝を本体(main)に戻す作業、すなわち「マージ」を行います。
ここでは feature/login で作業が終わり、main に統合する流れを実践します。

先ほど作った feature/login で変更を加えてcommitしてください。

ステップ1:受け入れ先に移動する(重要!)

マージにおいて最も重要なルールは、「吸収する側(main)に移動してから、吸収したい相手(feature)を選ぶ」ことです。

  1. 左下のステータスバーをクリックし、main を選択して切り替えます
  2. この時、feature/login での作業内容はすべてコミット済みであることを確認してください

ステップ2:マージを実行する

  1. コマンドパレット(Ctrl/Cmd + Shift + P)を開き、Git: Merge... と入力して選択します
  2. 「どのブランチをmainに取り込みますか?」と聞かれるので、feature/login を選択します

特に競合がなければ、これでマージ完了です!mainに変更が反映されているはずです。

merge.png

select-merge-branch.png

【拡張機能】Git Graphで履歴を「地図」にする

コマンドラインのログ(文字の羅列)だけでは、「どのブランチがどこから派生して、どこで合流したか」を把握するのは困難です。
そこで、「Git Graph」という拡張機能をインストールしましょう。

  • インストール方法: 左側の拡張機能アイコン → "Git Graph" で検索 → Install

install-git-graph.png

インストール後、ステータスバーの「Git Graph」ボタンを押すと、コミットの履歴が「地下鉄の路線図」のようにカラフルに表示されます。
複雑なツリー構造も一目で理解でき、マージの状態確認が劇的に楽になります。

git-graph.png

コンフリクト(競合)をパズル感覚で解決する

「同じファイルの同じ行」を別々の人が修正してマージしようとすると、Gitは「どっちを採用すればいいかわからない!」と悲鳴を上げます。これがコンフリクトです。

昔は、ソースコードの中に挿入された <<<<<<< HEAD といった記号を手動で修正する必要があり、これが初心者の高い壁でした。
しかし、現在のVS Codeには 「3-way マージエディタ」 が搭載されています。

VS Codeでの解決手順

  1. マージしてコンフリクトが発生すると、ファイル名に ! マークが付きます
  2. そのファイルを開き、右下の「マージエディタで開く(Resolve in Merge Editor)」ボタンを押します
  3. 3つの画面が表示されます:
    • 左上(Incoming): 相手の変更(取り込もうとしている内容)
    • 右上(Current): 自分の変更(今持っている内容)
    • 下(Result): マージ後の結果
  4. 採用したい変更のチェックボックスにチェックを入れるだけです。「自分の変更を採用し、相手の変更もこの部分だけ取り入れる」といったパズルのような操作が可能です
  5. マージを完了(Complete Merge)」を押せばコンフリクト解決です
  6. 最後にソースツリーの コミットをクリックしてマージを完了します

コンフリクト
Screenshot 2025-12-10 at 9.46.45.png

マージエディタ
Screenshot 2025-12-10 at 9.47.19.png

知っておくと得する便利機能

Stash(スタッシュ):作業の一時退避

「作業中だけど、緊急のバグ修正のために別のブランチに切り替えたい…でも今の状態はまだコミットしたくない(中途半端だから)」
そんな時は Stash(一時退避) を使います。

  1. ソース管理パネルの「…」メニュー → StashStash (Include Untracked) を選択
  2. 変更が一時的に消え、クリーンな状態になります
  3. 作業再開時は、StashPop Stash で元に戻せます

まとめ

今回はVS Codeを使って、Git操作を効率化する方法を解説しました。

  1. ブランチ操作: ステータスバーからクリック一つで完了
  2. マージ: ブランチでの変更を本体へ反映
  3. Git Graph: 履歴を「路線図」として視覚化し、迷子にならない
  4. マージエディタ: 怖いコンフリクトも3画面GUIならパズル感覚で解決
  5. 便利機能: Stashで、作業を一時退避

コマンドラインへの苦手意識を捨て、VS Codeの強力な機能を使い倒しましょう!

次回は、いよいよGitHubの機能を使ったタスク管理、「Issue(イシュー)」について解説します。コードだけでなく「やるべきこと」を管理する手法を学びましょう。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?