VSCodeでブランチ間の差分を比較する方法【GitLens】

この記事では、Visual Studio Codeの「拡張機能GitLens」を使って、ブランチ間の差分（diff）を視覚的に確認する方法を図を交えてわかりやすく解説します。

  • 今のブランチと別ブランチで、何がどう違うのか？
  • どのコミットで、どのファイルが変更されたのか？

こうした確認を視覚的に確認したい方におすすめです。

この記事では「拡張機能GitLens」がすでにインストールされている状態を前提に説明します。

GitLensでブランチ間の差分（diff）を確認する

まず、VSCode左側のアクティビティバーから「ソース管理（ブランチのアイコン）」をクリックします。

GitLensでブランチ間の差分（diff）を確認する01

ソース管理ペイン内に表示されている「GITLENS」セクションを展開します。

GitLensでブランチ間の差分（diff）を確認する02

GITLENS内の「Branches」をクリックすると、リポジトリ内のブランチ一覧が表示されます。

GitLensでブランチ間の差分（diff）を確認する03

比較したいブランチにマウスホバーして、「比較アイコン」をクリックします。今回は「feature/sampleブランチの比較アイコン」を選択しています。

GitLensでブランチ間の差分（diff）を確認する04

補足

Altキーを押しながら「比較アイコン」をクリックすると、Working Tree（現在編集しているコミット前のファイル）と選択したブランチを比較することもできます。

比較アイコンをクリックすると、「SEARCH ＆ COMPARE」が開き、「自分が現在いるブランチ（HEAD）」と「選択したブランチ」のファイル差分一覧が表示されます。差分一覧を見ると、どのファイルに変更があるかが一目で分かります。この例では、READMEファイルとsample.jsファイルが変更されていることわかります。

GitLensでブランチ間の差分（diff）を確認する05

各ファイルをクリックすると、VSCodeのdiffビューで実際の変更行を確認できます。

GitLensでブランチ間の差分（diff）を確認する06

さらに、Aheadのアコーディオンを開くと、各コミットでどのファイルが変更されたかを確認できます。例えば、コミット01ではREADMEファイルとsample.jsファイルが変更されていることわかります。

GitLensでブランチ間の差分（diff）を確認する07

ここでも、各ファイルをクリックすると、VSCodeのdiffビューで実際の変更行を確認できます。

GitLensでブランチ間の差分（diff）を確認する08

GitLensでブランチ間の差分（diff）を確認する別の方法

GitLensでは、別の操作でもブランチ差分を確認できます。

「GitLens Inspectサイドパネル」を開きます。

GitLensでブランチ間の差分（diff）を確認する別の方法01

SEARCH ＆ COMPAREペインで「Compare references」をクリックします。

GitLensでブランチ間の差分（diff）を確認する別の方法02

コマンドパレットが開くので「比較先（Compare To）」を選択します。

GitLensでブランチ間の差分（diff）を確認する別の方法03

次に「比較元（Compare From）」を選択します。

GitLensでブランチ間の差分（diff）を確認する別の方法04

すると、選択した2つのブランチ（またはタグ・コミット）間のファイル差分一覧が表示されます。

GitLensでブランチ間の差分（diff）を確認する別の方法05

本記事のまとめ

この記事では「拡張機能GitLens」を使って、ブランチ間の差分（diff）を視覚的に確認する方法について説明しました。

GitLensを使えば、VSCode上で次のような差分確認が簡単に行えます。

  • ブランチ間の差分を一覧で確認できる
  • コミット単位で変更内容を追える
  • ファイル差分をそのままVSCodeで確認できる
  • Working Treeとの比較も可能

Gitコマンドを使わなくても、視覚的に安全・確実に差分確認したい場合に、GitLensは非常に強力なツールです。

お読みいただきありがとうございました。

スポンサーリンク