【VSCode】ファイル・テキストの差分比較（Diff）を行う方法

VSCode学習者にお勧めの本 ↗

おすすめ

これ1冊でできる！Visual Studio Code 超入門

難易度

実用性

読みやすさ

こんな人におすすめ： VSCodeをこれから使いこなしたい全ての人

インストールから基本機能まで完璧にサポート。エディタ選びに迷っている人にもおすすめです。

Amazon 🔴 楽天

Visual Studio Code完全入門　Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り

難易度

実用性

効率化

こんな人におすすめ： Web開発に特化してVSCodeを使い倒したい人

拡張機能の選定やカスタマイズが非常に参考になる。開発効率を最大化できます。

Amazon 🔴 楽天

Visual Studio Codeパーフェクトマスター

難易度

実用性

辞書度

こんな人におすすめ： VSCodeの基礎から応用まで極めたい人

辞書代わりに使えるほど詳細。困った時に必ず解決策が見つかる、頼りになる一冊です。

Amazon 🔴 楽天

📚 ITエンジニア向けおすすめ技術書・関連書籍まとめはこちら

Visual Studio Code（VSCode）は標準機能だけで差分比較（Diff）が可能 です。WinMergeなどの外部ツールを使わなくても、VSCode内でファイルやテキストの差分確認・編集が完結します。

本記事では、エクスプローラーからの基本比較、クリップボード比較、code --diff コマンド、GitGit [ギット]ソースコードの変更履歴を管理する分散型バージョン管理システム差分の確認、便利な設定Tipsまで網羅的に解説します。

VSCodeのエクスプローラーで2つのファイルを差分比較する（基本）

プロジェクト内の2つのファイルを比較する最もシンプルで基本的な方法です。

エクスプローラーからのファイル比較手順

1. VSCodeの左側サイドバーで「エクスプローラー（Ctrl + Shift + E / Mac: Cmd + Shift + E）」を開きます。
2. 比較元のファイル（1つ目のファイル）を右クリックし、「比較対象の選択（Select for Compare）」 を選択します。

3. 比較先のファイル（2つ目のファイル）を右クリックし、「選択項目と照合（Compare with Selected）」 を選択します。

4. エディタ領域に左右分割で差分（Diffビュー）が表示されます。

VSCode差分画面（Diffエディタ）の見方

• 左側の画面: 比較元（変更前）。削除された行や変更前のテキストが 赤色（または薄い赤） でハイライトされます。
• 右側の画面: 比較先（変更後）。追加された行や変更後のテキストが 緑色（または薄い緑） でハイライトされます。
• ミニマップ・スクロールバー: 縦長のスクロールバー上にも差分のある位置が赤・緑のマークで示されるため、ファイル全体の中でどこに変更があるか一目で把握できます。
• 直接編集が可能: 差分表示中でも右側のエディタは直接コードの編集・保存が可能です。差分を見ながらその場で修正作業を行えます。

VSCodeでクリップボード（コピーしたテキスト）とファイルを差分比較する

「ファイルとして保存していないテキスト」や「Webページ・チャットツールからコピーしたコード」と、現在開いているファイルを比較したいときに便利な方法です。

わざわざ一時ファイルを作成して保存する手間が省けます。

クリップボード比較の手順

1. 比較したいテキストをあらかじめコピー（Ctrl + C / Mac: Cmd + C）しておきます。
2. 比較対象となるファイルをVSCodeで開きます。
3. コマンドパレット（Ctrl + Shift + P / Mac: Cmd + Shift + P）を開きます。

4. 検索窓に Compare Active File With Clipboard（日本語設定の場合は「アクティブ ファイルとクリップボードの比較」）と入力してEnterを押します。

5. 左側に開いているファイル、右側にクリップボードのテキストが並んだ差分画面が表示されます。

[!TIP] ログファイルのエラー出力や、同僚からSlack・Teams等で送られてきたコード片をパッと比較したいときに最適です。

VSCodeのコマンドパレットからファイルを選んで差分比較する

ファイル数が非常に多い大規模プロジェクトでは、エクスプローラーから2つのファイルを探して右クリックするのが大変な場合があります。

その場合は、コマンドパレットのファイル検索機能を使った比較が便利です。

コマンドパレットからの比較手順

1. 比較したい1つ目のファイルを開いた状態にします。

2. コマンドパレット（Ctrl + Shift + P / Mac: Cmd + Shift + P）を開きます。

3. File: Compare Active File With...（日本語設定：「アクティブ ファイルの比較相手…」）を選択します。

4. クイックオープン形式でファイル一覧と検索窓が表示されるので、比較したい2つ目のファイル名を入力してEnterを押します。

キーボード操作だけで素早く目的のファイルとの差分エディタを開くことができます。

ターミナルから code --diff コマンドでファイルを差分比較する

VSCodeのCLICLI [シーエルアイ]Command Line Interface。コマンドで操作するインターフェースコマンド code を使用すると、ターミナルやコマンドプロンプトから直接2つのファイルの差分比較画面を立ち上げることができます。コマンドラインは「Ctrl + Shift + `」で表示できます。

基本構文

1
# 基本構文
2
code --diff <ファイル1> <ファイル2>
3

4
# 短縮形（-d オプション）
5
code -d <ファイル1> <ファイル2>

実行例

1
# 例: 設定ファイルの修正前後を比較
2
code -d config.old.json config.new.json
3

4
# 例: 異なるディレクトリにある同名ファイルを比較
5
code -d src/main.py dist/main.py

実行すると、指定した2つのファイルがVSCodeの差分エディタで即座に開きます。

git difftoolとしてVSCodeを設定する方法

ターミナルで git diff を実行する代わりに、VSCodeのGUIGUI [ジーユーアイ / グーイ]Graphical User Interface。グラフィカルな操作画面差分エディタを立ち上げることも可能です。

以下のコマンドを実行してGitの設定（.gitconfig）を構成します。

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

設定後、ターミナルで以下のコマンドを実行すると、VSCode上で変更差分がグラフィカルに表示されます。

1
git difftool

VSCodeでGitの変更差分（Diff）を確認する方法

VSCodeには標準で強力なGitクライアント機能が備わっています。作業ツリーで変更したファイルの差分確認はワンクリックで行えます。

手順

1. 左側サイドバーの「ソース管理（Ctrl + Shift + G）」アイコンをクリックします。
2. 「変更（Changes）」セクションに変更されたファイルの一覧が表示されます。
3. 確認したいファイル名をクリックします。
4. 左側に前回のコミット状態（HEAD）、右側に現在の作業状態が表示され、どこを変更したかが一目で確認できます。

コミット前に変更漏れやデバッグ用コードの消し忘れがないかをセルフレビューする際に必須の機能です。

Gitの基本操作（add/commit/push）や履歴確認について詳しく知りたい方は、以下の関連記事もご覧ください。

ITナレッジライフ

【VSCode】Gitのadd・commit・pushを簡単に行う方法

VSCodeでGitのadd・commit・pushを行う方法を初心者向けに解説。環境構築から基本操作、よくあるトラブルまでわかりやすくまとめています。

ITナレッジライフ

【VSCode】ソースコードのGit履歴を確認する方法

本記事では、Visual Studio CodeでGit履歴を効率的に確認する方法を解説します。拡張機能「Git History」を用いた、使い方・履歴確認手順を詳しく紹介。VSCodeを使ったGit履歴操作をマスターしましょう。

VSCode差分比較の便利設定＆Tips

VSCodeの差分比較機能をさらに便利に使いこなすためのテクニックを紹介します。

Diffビューの左右分割とインライン表示を切り替える方法

デフォルトでは左右に並べて表示（Side-by-Side）されますが、ノートPCなど画面幅が狭い場合や、長い行を比較する場合は 「インライン表示」 に切り替えると見やすくなります。

• 切り替え方法:

  • 差分エディタ右上の「…」（その他の操作）メニューをクリック

  

  • 「インライン ビューの切り替え（Toggle Inline View）」 をクリック

  

インライン表示にすると、削除行（赤）と追加行（緑）が上下に重なって1つの画面で表示されるため、横スクロールなしで差分を確認できます。

差分箇所へ素早くジャンプするショートカットキー

行数が多いファイルの差分を確認する際、マウスでスクロールして探すのは非効率です。ショートカットキーを使うと、次の変更箇所へ瞬時にジャンプできます。

未保存のテキスト同士をVSCodeで差分比較する裏技

「どちらもファイルとして保存していない2つのテキスト」を比較したい場合のテクニックです。

1. Ctrl + N（Mac: Cmd + N）で新規ファイル「Untitled-1」を作成し、1つ目のテキストを貼り付けます。
2. もう一度 Ctrl + N で「Untitled-2」を作成し、2つ目のテキストを貼り付けます。
3. 「Untitled-2」を開いた状態でコマンドパレット（Ctrl + Shift + P）を開きます。
4. File: Compare Active File With... を選択し、候補から「Untitled-1」を選択します。

これでファイル保存を一切行わずに、一時的な2つのテキストのDiff画面を開くことができます。

VSCodeの差分比較方法まとめ（用途別おすすめ一覧表）

状況に応じて最適な方法を選択することで、作業効率を大幅に向上させることができます。

VSCodeの差分比較機能は、軽量でレスポンスが良く、差分を見ながらその場で編集できるのが大きな強みです。

日常のコーディングやレビュー、データ検証にぜひ役立ててみてください！

あわせて読みたい

VSCodeの基本的な使い方から便利な拡張機能・設定まで体系的に学びたい方は、以下のまとめ記事もあわせてご覧ください。

ITナレッジライフ

Visual Studio Code（VSCode）の使い方・設定まとめ

大人気のコードエディタ「Visual Studio Code（VSCode）」の基本的な使い方から、言語別の設定、Git連携、便利な拡張機能まで、VSCodeを活用するための情報を体系的に紹介します。

おすすめ この記事に関連する技術本

Visual Studio Code完全入門　Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り

Amazon 🔴 楽天

Kindle Unlimited

IT専門書も30日間無料で読み放題

1冊数千円する専門書から、ビジネス書、実用書、雑誌まで幅広いジャンルが定額で読み放題。ITスキルの向上はもちろん、日々の情報収集や教養を深めるのにも最適です。

• 📚 技術書も月額定額で読み放題
• 📱 マルチデバイス対応
• ✨ 30日間の無料体験

無料で30日間試してみる

この記事を書いた人

Z (ITナレッジライフ)

現役のITエンジニア。Linux、プログラミング、IT用語など、日々の業務で得た「痒いところに手が届く」技術情報を発信しています。

プロフィールと編集ポリシーを見る →