VS Codeで2つのファイルの差分を比較する方法｜コマンドパレット・右クリック・拡張機能を徹底解説

プログラムを書いているときや設定ファイルを修正するとき、「どこがどう変わったのか」を見たい場面はよくありますよね。

Visual Studio Code（VS Code）には、ファイル同士を簡単に比較できる便利な差分（diff）表示機能が備わっています。さらに拡張機能を使えば、複雑な差分チェックや履歴管理も可能です。

この記事では、VS Code標準機能での2ファイル比較から、右クリックメニューやコマンドパレットの使い方、さらに便利になるおすすめ拡張機能まで初心者でも分かるように紹介します。

差分比較とは？なぜ必要なの？
VS Code標準機能でファイルの差分を比較する方法
高度な差分比較機能
1. インライン差分表示
2. 空白文字の表示
差分比較をさらに便利にする拡張機能
実際の開発シーンでの活用例
トラブルシューティングと注意点
1. よくある問題と解決法
2. セキュリティと機密情報
カスタマイズと設定
1. キーボードショートカットの設定
2. 差分表示のカスタマイズ
まとめ

差分比較とは？なぜ必要なの？

差分（Diff）とは

差分の基本概念 差分とは、2つのファイルやテキストの違いを視覚的に表示する機能です。英語では「Difference」の略で「Diff」と呼ばれます。

なぜ差分比較が重要なの？

プログラム開発での活用

コードの変更確認

バグ修正前後の違いを確認
新機能追加による影響範囲の把握
リファクタリング前後の比較

設定ファイルの管理

本番環境と開発環境の設定比較
バックアップファイルとの違い確認
複数バージョン間の設定変更追跡

チーム開発での重要性

コードレビュー

他の開発者の変更内容を効率的に確認
潜在的な問題の早期発見
コードの品質向上

マージ作業

複数の変更を統合する際の競合確認
安全なマージ作業の実現

VS Codeの差分表示の特徴

視覚的な表示

カラーハイライト

追加された行：緑色
削除された行：赤色
変更された行：青色またはオレンジ色

行番号表示

元ファイルと変更後ファイルの行番号を並列表示
変更箇所の詳細な位置把握

VS Code標準機能でファイルの差分を比較する方法

エクスプローラーでの右クリック比較

基本的な操作手順

ステップ1：比較対象の選択

左側のエクスプローラー（フォルダ一覧）で、1つ目のファイルを右クリック
「ファイルを比較対象として選択」をクリック
選択したファイル名が薄く表示される

ステップ2：比較実行

比較したい2つ目のファイルを右クリック
「比較」を選択
差分ビューが新しいタブで開く

比較できるファイル形式

テキストファイル

プログラムソースコード（.js、.py、.java等）
設定ファイル（.json、.yaml、.xml等）
ドキュメント（.md、.txt等）

バイナリファイルの制限

画像ファイル（.png、.jpg等）は比較不可
実行ファイル（.exe等）は比較不可
VS Codeは「バイナリファイルのため比較できません」と表示

比較ビューの見方

画面構成

左側：比較対象として選択したファイル
右側：比較実行時に選択したファイル
中央：変更箇所を示すインジケーター

ナビゲーション

上下の矢印ボタンで次の差分箇所へ移動
Ctrl+F でファイル内検索も可能

コマンドパレットを使った比較

コマンドパレットとは

アクセス方法

ショートカット：Ctrl + Shift + P（Windows/Linux）
ショートカット：Cmd + Shift + P（macOS）
メニュー：表示 → コマンドパレット

差分比較のコマンド

比較対象の選択

> File: Select for Compare

比較の実行

> File: Compare with Selected

コマンドパレットを使う利点

キーボード操作のみで完結

マウスを使わずに操作可能
作業効率の向上
手の移動を最小限に抑制

ファジー検索

「diff」「compare」などの部分入力で候補表示
正確なコマンド名を覚える必要なし

開いているファイル同士の比較

既に開いているタブ間での比較

手順

コマンドパレットを開く（Ctrl + Shift + P）
「Compare Active File With…」を検索
比較したいファイルを選択

ワークスペース外ファイルとの比較

外部ファイルを開く

ファイル → ファイルを開く
比較したい外部ファイルを選択
通常の比較手順で実行

高度な差分比較機能

インライン差分表示

表示方法の切り替え

サイド・バイ・サイド表示

デフォルトの並列表示
2つのファイルを左右に配置

インライン表示

1つのファイル内に差分を統合表示
変更箇所を連続して確認可能

切り替え方法

ツールバーから

差分ビューの右上にあるアイコンをクリック
「Toggle Inline View」を選択

キーボードショートカット

デフォルトでは設定されていないため、カスタム設定が必要

空白文字の表示

空白文字を無視した比較

設定方法

ファイル → 基本設定 → 設定
「diff」で検索
「Diff: Ignore Trim Whitespace」にチェック

なぜ空白文字を無視するの？

コードフォーマッターの影響

自動整形による空白の変更
実質的な変更ではない差分の除外

プログラミング言語による差異

Pythonなどインデントが重要な言語
HTMLなどで空白が表示に影響しない場合

差分比較をさらに便利にする拡張機能

GitLens：Git統合の最強ツール

GitLensの主要機能

ファイル履歴の比較

現在のファイルと過去のコミットを比較
特定のコミット間での差分確認
ブランチ間での変更差分

Blame情報の表示

行ごとの最後の変更者と日時
コミットメッセージの表示
変更理由の追跡

インストールと基本使用法

インストール手順

拡張機能ビュー（Ctrl + Shift + X）を開く
「GitLens」で検索
「GitLens — Git supercharged」をインストール

基本的な比較操作

ファイルエクスプローラーでファイルを右クリック
「GitLens: Open Changes」を選択
最新の変更内容が表示される

高度な比較機能

コミット間の比較

コマンドパレットで「GitLens: Search Commits」
比較したいコミットを選択
「Compare with Working Tree」

ブランチ間の比較

左下のブランチ名をクリック
比較したいブランチを選択
GitLensが自動で差分を表示

Partial Diff：部分比較の専門ツール

Partial Diffの特徴

選択範囲同士の比較

ファイル全体ではなく特定の部分のみ比較
大きなファイルの一部分だけを確認したい場合に便利

クリップボードとの比較

コピーしたテキストとファイルの内容を比較
Webページからコピーしたコードとの比較

インストールと使用方法

インストール

拡張機能ビューで「Partial Diff」を検索
インストール後、VS Codeを再起動

基本的な使用法

比較したいテキストを選択
コマンドパレットで「Partial Diff: Select Text for Compare」
2つ目のテキストを選択
「Partial Diff: Compare Text with Previous Selection」

実用的な活用例

設定ファイルの一部比較

// 設定Aの一部
{
  "editor.fontSize": 14,
  "editor.wordWrap": "on"
}

// 設定Bの一部
{
  "editor.fontSize": 16,
  "editor.wordWrap": "off"
}

APIレスポンスの比較

テスト環境と本番環境のAPIレスポンス
異なるバージョンでの出力結果

Compare Folders：フォルダ単位での比較

機能概要

フォルダ全体の比較

複数ファイルの一括比較
ファイル構造の違いも表示
追加・削除されたファイルの検出

フィルタリング機能

特定の拡張子のみ比較
除外パターンの設定
サイズや更新日での絞り込み

使用シーン

プロジェクトのバックアップ比較

作業前後のプロジェクト全体比較
バックアップの整合性確認

環境間の設定比較

開発環境と本番環境の設定差分
チームメンバー間の環境統一確認

実際の開発シーンでの活用例

Webアプリケーション開発

HTMLファイルの比較

デザイン変更前後の確認

<!-- 変更前 -->
<div class="container">
  <h1>タイトル</h1>
</div>

<!-- 変更後 -->
<div class="container-fluid">
  <h1 class="main-title">タイトル</h1>
</div>

CSSファイルの比較

スタイル修正の影響確認

/* 変更前 */
.button {
  background-color: blue;
  color: white;
}

/* 変更後 */
.button {
  background-color: #007bff;
  color: #ffffff;
  border-radius: 4px;
}

プログラムのリファクタリング

関数の改善比較

JavaScript関数の最適化

// 変更前
function calculateTotal(items) {
  var total = 0;
  for (var i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

// 変更後
function calculateTotal(items) {
  return items.reduce((total, item) => total + item.price, 0);
}

設定ファイルの管理

JSONファイルの設定変更

VS Code設定の比較

// 開発用設定
{
  "editor.fontSize": 14,
  "workbench.colorTheme": "Dark+ (default dark)",
  "editor.minimap.enabled": true
}

// プレゼンテーション用設定
{
  "editor.fontSize": 18,
  "workbench.colorTheme": "Light+ (default light)",
  "editor.minimap.enabled": false
}

トラブルシューティングと注意点

よくある問題と解決法

差分が表示されない場合

原因1：同じファイルを比較している

解決法：異なるファイルを選択し直す
確認：ファイルパスが違うことを確認

原因2：バイナリファイルを比較している

解決法：テキストファイルで比較を試す
確認：ファイル拡張子を確認

文字エンコーディングの問題

症状

文字化けが発生
正しく差分が表示されない

解決法

ファイル → 基本設定 → 設定
「files.encoding」を検索
適切なエンコーディングを設定

大きなファイルでの性能問題

症状

比較に時間がかかる
VS Codeが重くなる

対策

Partial Diffで必要な部分のみ比較
ファイルサイズの制限を設定
より高性能なマシンでの作業

セキュリティと機密情報

機密ファイルの取り扱い

注意点

機密情報を含むファイルの比較時は周囲に注意
スクリーンショットや画面共有での情報漏洩防止
一時ファイルの適切な削除

対策

機密部分のマスキング
専用の開発環境での作業
アクセス制御の徹底

カスタマイズと設定

キーボードショートカットの設定

よく使う操作のショートカット化