VSCodeでGit Diffを確認する方法について

VSCodeにはGit連携機能が標準で搭載されており、Gitで管理しているファイルの変更差分を画面上で確認できます。

Git Diffを利用すると、コードを編集したあとに「どの行を追加したのか」「どこを削除したのか」「コミットには何が含まれるのか」といった変更内容を確認できます。

特に複数のファイルを編集した場合や、コミット前に変更内容を見直したい場合に便利です。

VSCodeでは、主に次のような差分を確認できます。

• ステージングしていない変更
• ステージング済みの変更
• 過去のコミットとの差分
• ブランチやタグとの差分
• リモートとローカルのコミット差分

Git Diffを確認する基本的な方法を理解しておけば、意図しないコードをコミットしたり、必要な変更をコミットし忘れたりするリスクを減らせます。

VSCodeでGit Diffを確認する基本的な方法

VSCodeで現在の変更内容を確認する場合は、Source Controlを利用する方法が基本です。

Source Controlを開く

VSCode左側のアクティビティバーにある「Source Control」アイコンをクリックします。

WindowsやLinuxでは、次のショートカットから開くこともできます。

Ctrl + Shift + G

Gitリポジトリ内のファイルを編集すると、Source Controlの「Changes」に変更されたファイルが表示されます。

たとえば、次のような状態です。

SOURCE CONTROL

Changes
  M index.html
  M style.css
  M app.js

MはModifiedを意味しており、Gitで管理されているファイルが変更されたことを示しています。

Changesからファイルを選択する

Source Controlの「Changes」に表示されているファイルをクリックすると、Diff Editorが開きます。

Diff Editorでは、変更前の状態と現在の状態を比較できます。

たとえば、次のコードを、

const count = 10;

次のように変更したとします。

const count = 20;

Diff Editorでは、10から20へ変更されたことを視覚的に確認できます。

VSCodeのDiff Editorの見方

VSCodeでは、Gitの変更内容を専用のDiff Editorで確認できます。

Side by Side表示

Side by Sideでは、変更前と変更後のコードが左右に分かれて表示されます。

基本的には、

左側：変更前
右側：変更後

という構成です。

たとえば、

変更前                  変更後

const a = 1;      |     const a = 2;

のように比較できます。

変更量が多い場合や、元のコードと現在のコードを詳しく比較したい場合に適しています。

Inline表示

Inlineでは、変更内容が1つのエディター上にまとめて表示されます。

イメージとしては次のようになります。

- const a = 1;
+ const a = 2;

Gitコマンドのgit diffに近い感覚で確認したい場合に便利です。

Automatic表示

VSCodeでは、画面の横幅に応じてSide by SideとInlineを自動的に切り替えるAutomatic表示も利用できます。

画面が広い場合はSide by Side、狭い場合はInlineになるなど、表示領域に合わせて自動調整されます。

Diff Editorのメニューから、

Diff View

を開くと、

Inline
Side by Side
Automatic

などを選択できます。

ChangesとStaged Changesの違い

VSCodeでGit Diffを確認するときに、特に重要なのが「Changes」と「Staged Changes」の違いです。

Gitでは、ファイルを編集してからコミットするまでに、基本的に次の状態を経由します。

HEAD
↓
Index（Staging Area）
↓
Working Tree

この構造を理解すると、VSCodeのDiffが何を比較しているのか分かりやすくなります。

Changesはステージングしていない変更

「Changes」に表示されるDiffは、基本的に次の比較です。

Index
↕
Working Tree

つまり、まだステージングしていない変更を確認できます。

ターミナルのGitコマンドでは、

git diff

に近い内容です。

まだ何もステージングしていない場合、IndexはHEADと同じ状態になっています。

そのため、その場合は実質的に、

最後のコミット
↕
現在のファイル

の違いを確認していることになります。

Staged Changesは次のコミットに含まれる変更

変更ファイルをStageすると、Source Controlの「Staged Changes」に移動します。

たとえば、

Staged Changes
  M app.js

と表示されます。

Staged ChangesのDiffは、

HEAD
↕
Index

の比較です。

つまり、「次のコミットに何が含まれるのか」を確認できます。

コミット直前には、Staged Changesを確認しておくと安心です。

同じファイルがChangesとStaged Changesの両方に表示される理由

同じファイルが、ChangesとStaged Changesの両方に表示されることがあります。

たとえば、

Changes
  M app.js

Staged Changes
  M app.js

という状態です。

これは異常ではありません。

ステージング後にさらに編集すると両方に表示される

たとえば、次の状態から始めます。

const a = 1;

これを、

const a = 2;

に変更してStageします。

この時点では、

HEAD
const a = 1;

Index
const a = 2;

となります。

そのあとさらに編集して、

const a = 3;

にすると、

HEAD
const a = 1;

Index
const a = 2;

Working Tree
const a = 3;

という状態になります。

この場合、Staged Changesでは、

1 → 2

の変更を確認できます。

一方、Changesでは、

2 → 3

の変更を確認できます。

そのため、同じファイルが両方に表示されます。

ファイルの一部分だけStageする方法

VSCodeでは、ファイル全体ではなく変更した一部分だけをステージングすることもできます。

Diff Editorから部分的にStageする

Diff Editorでステージングしたい行や範囲を選択し、「Stage Selected Ranges」を利用すると、その部分だけをStageできます。

たとえば1つのファイルに、

バグ修正
コード整形
デバッグ用コード

という3種類の変更が含まれている場合でも、バグ修正だけをStageできます。

1つのファイルに異なる目的の変更が混在している場合に便利です。

エディター上から変更箇所を確認する方法

Source Controlを開かなくても、通常のコードエディターから変更箇所を確認できます。

エディター左端の変更マーカーを確認する

Gitで管理されているファイルを編集すると、エディター左端のガターに変更を示すマーカーが表示されます。

標準的なテーマでは、追加・変更・削除された場所を色やマーカーの形で区別できます。

そのため、大きなファイルを編集した場合でも、

どこを変更したのか

をすぐ確認できます。

変更マーカーを選択すると、その場所のDiff Previewを確認できる場合もあります。

Diff内の変更箇所を効率よく確認する方法

変更箇所が多いファイルでは、Diff Editorの便利な機能を利用すると確認しやすくなります。

Next ChangeとPrevious Changeを使う

Diff Editorでは「Next Change」と「Previous Change」を使って、変更箇所を順番に移動できます。

何百行もあるファイルの中から変更箇所だけを確認したい場合に便利です。

Accessible Diff Viewerを使う

アクセシビリティ向けのAccessible Diff Viewerでは、F7やShift + F7などを利用して差分を確認できます。

通常のDiff Editor内の移動については、Next ChangeやPrevious Changeを利用すると分かりやすいでしょう。

未変更部分を折りたたむ

Diff Editorでは、変更されていない部分を折りたたむこともできます。

「Collapse Unchanged Regions」を利用すると、

変更部分
↓
大量の未変更コード
↓
変更部分

となっている場合に、未変更部分を省略して表示できます。

大きなファイルをレビューするときに便利です。

ターミナルからGit Diffを確認する方法

VSCodeには統合ターミナルがあるため、GitコマンドからDiffを確認することもできます。

GUIとコマンドの両方を理解しておくと、Gitをより柔軟に操作できます。

git diffで未ステージの変更を確認する

次のコマンドを実行します。

git diff

git diffは基本的に、

Index
↕
Working Tree

を比較します。

つまり、まだStageしていない変更を確認できます。

VSCodeの「Changes」とほぼ対応する操作です。

git diff –stagedでステージ済みの変更を確認する

Stage済みの変更を確認する場合は、次のコマンドを使用します。

git diff --staged

次のコマンドでもほぼ同じ意味です。

git diff --cached

比較対象は、

HEAD
↕
Index

です。

つまり、VSCodeの「Staged Changes」に近い内容を確認できます。

コミット直前に実行すれば、意図しない変更が含まれていないか確認できます。

特定のファイルだけDiffを確認する

変更ファイルが多い場合は、ファイルを指定できます。

git diff src/index.js

これで、src/index.jsの未ステージ変更だけを確認できます。

Stage済みの特定ファイルなら、

git diff --staged src/index.js

を使用します。

過去のコミットとの差分を確認する方法

VSCodeでは、現在の変更だけでなく過去のコミットも確認できます。

Source Control Graphを使う

Source Control Graphを利用すると、Gitのコミット履歴を視覚的に確認できます。

確認したいコミットを選択すると、そのコミットで変更されたファイルを確認できます。

さらに変更ファイルを選択すれば、

そのコミット以前の状態
↕
そのコミット後の状態

のDiffを確認できます。

「この修正はいつ入ったのか」「このコミットでは何を変更したのか」と調査するときに便利です。

Multi-file Diffを使う

コミット内で複数のファイルが変更されている場合は、Multi-file Diffを利用すると効率的です。

Source Control Graphで対象コミットの「Open Changes」などを利用すると、そのコミットに含まれる複数ファイルのDiffをまとめて確認できます。

たとえば、

src/app.js
src/api.js
src/style.css
README.md

という複数ファイルを変更したコミットでも、まとめてレビューできます。

ブランチやタグとの差分を確認する方法

Gitでは、現在の作業内容だけでなく、ブランチ同士の差分を確認したい場合もあります。

Compare withを利用する

Source Control Graphからコミットなどを右クリックして、

Compare with...

を選択すると、別のリビジョンと比較できます。

比較対象として、

ローカルブランチ
リモートブランチ
タグ

などを指定できます。

たとえば、

feature/login
↕
main

の違いを確認したい場合に便利です。

基本的には、コミットされたリビジョン同士を比較する用途として利用します。

リモートとの差分を確認する方法

GitHubなどのリモートリポジトリを利用している場合は、ローカルとupstream branchのコミット差分も確認できます。

Incoming Changesを確認する

Incoming Changesは、upstream側には存在しているものの、ローカル側にはまだ取り込まれていないコミットです。

イメージとしては、

リモート
↓
ローカルにはまだない

という状態です。

Pullする前にIncoming Changesを確認すれば、リモート側でどのような変更が行われたのか把握できます。

Outgoing Changesを確認する

Outgoing Changesは、ローカルには存在しているものの、まだupstream側へPushしていないコミットです。

ローカル
↓
リモートにはまだない

という状態です。

Pushする前にOutgoing Changesを確認すれば、リモートへ何を送ろうとしているのか確認できます。

リモートの最新状態をFetchする

Incoming Changesなどを正確に確認するためには、リモートの最新情報を取得しておくことが重要です。

Fetchを利用する

VSCodeのSource ControlメニューなどからFetchを実行できます。

Gitコマンドでは、

git fetch

です。

Fetchを実行するとリモートのコミット情報などが取得されますが、現在の作業ブランチへ自動的に統合されるわけではありません。

そのため、

Fetch
↓
Incoming Changesを確認
↓
必要に応じてPull

という流れで確認できます。

いきなりPullするよりも、事前に変更内容を把握しやすくなります。

VSCodeをGitのDiff Toolとして利用する方法

VSCodeは、Gitの外部Diff Toolとして設定することもできます。

VSCodeをdifftoolに設定する

たとえば、次のように設定します。

git config --global diff.tool vscode
git config --global difftool.vscode.cmd 'code --wait --diff "$LOCAL" "$REMOTE"'

設定後に、

git difftool

を実行すると、VSCodeのDiff Editorを使用して差分を確認できます。

"$LOCAL"と"$REMOTE"を引用符で囲んでおくと、ファイルパスに空白が含まれる場合にも対応しやすくなります。

VSCodeでGit Diffが表示されない場合の対処法

Diffが表示されない場合は、Gitの設定や現在開いているフォルダを確認します。

Gitリポジトリか確認する

ターミナルで次のコマンドを実行します。

git status

Gitリポジトリ内であれば、

On branch main

などの情報が表示されます。

Gitリポジトリではない場合はエラーになります。

新しいフォルダをGit管理したい場合に限り、

git init

を実行して初期化できます。

既存プロジェクトを開いているつもりの場合は、誤った場所でgit initを実行せず、正しいリポジトリを開いているか先に確認しましょう。

Gitがインストールされているか確認する

次のコマンドを実行します。

git --version

正常にインストールされていれば、

git version 2.x.x

のように表示されます。

Gitコマンド自体が認識されない場合は、GitのインストールやPATH設定を確認します。

ファイルを保存する

ファイルの変更状態が意図したとおり表示されない場合は、ファイルが保存されているか確認します。

Windowsでは、

Ctrl + S

で保存できます。

Auto Saveを利用している場合は、自動的に保存されることもあります。

VSCodeでGit Diffを確認するときのおすすめ手順

日常的な開発では、次の流れで確認するとコミットミスを防ぎやすくなります。

コードを編集する

まず必要なコードを変更します。

コードを編集

ChangesのDiffを確認する

Source Controlを開いて、Changesに表示されているファイルを確認します。

編集
↓
Changes
↓
Diffを確認

不要なデバッグコードや意図しない変更がないか確認します。

必要な変更をStageする

問題がなければStageします。

ファイル全体をStageしてもよいですし、必要に応じて変更範囲だけをStageすることもできます。

Changes
↓
Stage

Staged Changesを再確認する

Stageしたあとに、Staged ChangesのDiffを確認します。

ここでは、

次のコミットに実際に入る変更

を確認できます。

Commitする

問題がなければコミットします。

編集
↓
Changes確認
↓
Stage
↓
Staged Changes確認
↓
Commit

この流れを習慣にすると、意図しない変更をコミットするリスクを減らせます。

VSCodeでGit Diffを確認する際はChangesとStaged Changesを使い分けよう

VSCodeでは、Source Controlから簡単にGit Diffを確認できます。

基本的な操作は、

Ctrl + Shift + G
↓
Source Controlを開く
↓
Changesからファイルを選択
↓
Diff Editorで確認

です。

特に理解しておきたいのが、

Changes
= Index ↔ Working Tree

と、

Staged Changes
= HEAD ↔ Index

の違いです。

Changesではまだステージングしていない編集内容を確認でき、Staged Changesでは次回のコミットに含まれる内容を確認できます。

また、VSCodeにはSide by SideやInline表示、部分Stage、Source Control Graph、Multi-file Diff、Incoming Changes、Outgoing Changesなど、Gitの変更内容を効率よく確認するための機能が用意されています。

日常的な開発では、単に変更ファイルをStageしてすぐコミットするのではなく、

Changesで確認
↓
Stage
↓
Staged Changesでもう一度確認
↓
Commit

という流れを習慣にするとよいでしょう。

Git Diffを適切に確認することで、不要なコードの混入や変更漏れを防ぎやすくなり、安全にGitを運用できます。

以上、VSCodeでGit Diffを確認する方法についてでした。

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