VSCodeソース比較完全ガイド｜ファイルの差分を一瞬で見つける便利機能

プログラミング・IT

「このファイル、どこを変更したんだっけ…」 「2つのバージョンの違いを確認したい…」 「マージする前に差分をチェックしたい…」

プログラミングをしていると、ファイルの比較は日常茶飯事。実はVSCodeには、ファイル比較のための強力な機能が標準で搭載されているんです。

この記事では、基本的な比較方法から、Git連携、フォルダー単位の比較、さらには便利な拡張機能まで、VSCodeのソース比較機能を完全マスターできる内容をお届けします。

スポンサーリンク
  1. VSCodeで使える3つの比較方法
    1. 1. ファイル同士を比較（最も基本的）
    2. 2. Git差分の確認（最も実用的）
    3. 3. フォルダー比較（プロジェクト全体）
  2. 基本編：2つのファイルを比較する
    1. 方法1：エクスプローラーから比較（最も簡単！）
    2. 方法2：コマンドパレットを使用
    3. 方法3：コマンドラインから起動
  3. 比較画面の見方と操作方法
    1. 差分の表示形式
    2. 便利なナビゲーション
    3. インライン表示と並列表示の切り替え
  4. Git連携：変更履歴を確認する
    1. ワーキングツリーの変更を確認
    2. 特定のコミットと比較
    3. ブランチ間の比較
  5. 高度な比較テクニック
    1. 3方向マージ（コンフリクト解決）
    2. 選択範囲だけを比較
    3. クリップボードと比較
  6. フォルダー・プロジェクト全体の比較
    1. 標準機能での制限
    2. Folder Compare（拡張機能）
    3. コマンドラインツールとの連携
  7. おすすめ拡張機能
    1. 1. Partial Diff（部分差分）
    2. 2. Diff Folders（フォルダー比較）
    3. 3. GitLens（Git統合強化）
  8. 比較を効率化する設定
    1. settings.jsonでのカスタマイズ
    2. 色のカスタマイズ
  9. ユースケース別活用法
    1. コードレビュー時の使い方
    2. バグ修正時の活用
    3. リファクタリング時の確認
  10. トラブルシューティング
    1. Q1: 比較画面が開かない
    2. Q2: 差分が正しく表示されない
    3. Q3: 大きなファイルで比較が遅い
    4. Q4: Git差分が表示されない
  11. 外部ツールとの連携
    1. Beyond Compareとの連携
    2. WinMergeとの連携
  12. 効率的な比較のコツ
    1. 比較前の準備
    2. 比較時の注意点
    3. 比較後の処理
  13. まとめ：今すぐ使える比較テクニック3選

VSCodeで使える3つの比較方法

1. ファイル同士を比較（最も基本的）

2つのファイルの違いを並べて確認する方法です。

2. Git差分の確認（最も実用的）

変更履歴やコミット前の差分を確認できます。

3. フォルダー比較（プロジェクト全体）

複数ファイルの差分を一度に確認できます。

それぞれ詳しく見ていきましょう！

基本編：2つのファイルを比較する

方法1：エクスプローラーから比較（最も簡単！）

手順：

  1. エクスプローラーで最初のファイルを右クリック
  2. 「比較対象の選択」をクリック
  3. 2つ目のファイルを右クリック
  4. 「選択項目と比較」をクリック

これだけで、2つのファイルが左右に並んで表示されます！

方法2：コマンドパレットを使用

手順：

  1. Ctrl+Shift+P（Mac: Cmd+Shift+P）でコマンドパレット
  2. 「File: Compare Active File With…」と入力
  3. 比較したいファイルを選択

現在開いているファイルと別のファイルを素早く比較できます。

方法3：コマンドラインから起動

ターミナルで実行：

# 2つのファイルを比較モードで開く
code --diff file1.js file2.js

# 既存のウィンドウで開く場合
code -r --diff file1.js file2.js

スクリプトやバッチ処理に組み込める便利な方法です。

比較画面の見方と操作方法

差分の表示形式

色分けの意味：

  • 緑色（+）：追加された行
  • 赤色（-）：削除された行
  • 黄色（~）：変更された行
  • グレー：変更なし

便利なナビゲーション

ショートカットキー：

  • F7：次の差分へジャンプ
  • Shift+F7：前の差分へジャンプ
  • Alt+F5：すべての変更を受け入れる

マウス操作：

  • スクロールバーの色付き部分をクリックで即座に移動
  • 差分の横の矢印で変更を取り込み

インライン表示と並列表示の切り替え

表示モードの変更：

  1. 比較ビューの右上のアイコンをクリック
  2. 「インラインビュー」と「並列ビュー」を切り替え

それぞれの特徴：

  • 並列ビュー：左右で比較しやすい
  • インラインビュー：縦に長いファイルに適している

Git連携：変更履歴を確認する

ワーキングツリーの変更を確認

現在の変更を見る：

  1. 左サイドバーの「ソース管理」アイコンをクリック
  2. 変更されたファイルをクリック
  3. 自動的に差分が表示される

便利な操作：

M  = Modified（変更）
A  = Added（追加）
D  = Deleted（削除）
U  = Untracked（追跡対象外）

特定のコミットと比較

GitLensを使わない方法：

# ターミナルで特定のコミットと比較
git difftool HEAD~1 HEAD

VSCode内で操作：

  1. コマンドパレットで「Git: View History」
  2. 比較したいコミットを選択
  3. ファイルをクリックで差分表示

ブランチ間の比較

手順：

  1. ソース管理ビューを開く
  2. 「…」メニューから「Branch」→「Compare」
  3. 比較したいブランチを選択

マージ前の確認に必須の機能です！

高度な比較テクニック

3方向マージ（コンフリクト解決）

マージコンフリクト時の表示：

<<<<<<< HEAD（現在の変更）
あなたのコード
=======
他の人のコード
>>>>>>> branch-name（取り込む変更）

VSCodeの解決支援：

  • 「現在の変更を採用」
  • 「入力側の変更を採用」
  • 「両方の変更を採用」
  • 「変更を比較」

ボタンをクリックするだけで解決！

選択範囲だけを比較

部分比較の方法：

  1. 比較したい範囲を選択
  2. 右クリックで「選択範囲を比較」
  3. 別ファイルの範囲を選択
  4. 部分的な差分が表示される

大きなファイルの一部だけを比較したい時に便利！

クリップボードと比較

手順：

  1. 比較したいテキストをコピー
  2. VSCodeでファイルを開く
  3. コマンドパレットで「Compare Active File with Clipboard」

外部のコードと素早く比較できます。

フォルダー・プロジェクト全体の比較

標準機能での制限

残念ながら、VSCodeの標準機能ではフォルダー全体の比較はできません。 でも、拡張機能を使えば可能です！

Folder Compare（拡張機能）

インストール：

  1. 拡張機能ビューで「Folder Compare」を検索
  2. インストール

使い方：

  1. エクスプローラーでフォルダーを右クリック
  2. 「Select for Compare」
  3. 別のフォルダーで「Compare with Selected」

コマンドラインツールとの連携

diffコマンドを使用：

# Linuxの場合
diff -r folder1/ folder2/

# より見やすく表示
diff -r --brief folder1/ folder2/

おすすめ拡張機能

1. Partial Diff（部分差分）

特徴：

  • 選択範囲の比較が簡単
  • クリップボードとの比較
  • 同一ファイル内の比較も可能

便利な使い方：

1. テキストを選択
2. Ctrl+Shift+P
3. 「Partial Diff: Compare」
4. 別の範囲を選択して比較

2. Diff Folders（フォルダー比較）

特徴：

  • フォルダー構造の違いを視覚化
  • ファイル単位で差分確認
  • 除外パターンの設定可能

3. GitLens（Git統合強化）

追加される機能：

  • 行単位のGit履歴
  • コミット間の詳細比較
  • ビジュアルな履歴表示
  • Blame機能（誰がいつ変更したか）

設定例：

{
  "gitlens.currentLine.enabled": true,
  "gitlens.codeLens.enabled": true,
  "gitlens.hovers.currentLine.over": "line"
}

比較を効率化する設定

settings.jsonでのカスタマイズ

{
  // 差分エディターの設定
  "diffEditor.renderSideBySide": true,  // 並列表示
  "diffEditor.ignoreTrimWhitespace": false,  // 空白を無視しない
  "diffEditor.maxComputationTime": 5000,  // 計算時間の上限
  
  // 差分の表示設定
  "diffEditor.renderIndicators": true,  // インジケーター表示
  "diffEditor.codeLens": true,  // CodeLens表示
  
  // Git関連
  "git.openDiffOnClick": true  // クリックで差分を開く
}

色のカスタマイズ

{
  "workbench.colorCustomizations": {
    // 追加された行の背景色
    "diffEditor.insertedTextBackground": "#00ff0033",
    
    // 削除された行の背景色  
    "diffEditor.removedTextBackground": "#ff000033",
    
    // 変更された行の背景色
    "diffEditor.modifiedTextBackground": "#ffff0033"
  }
}

ユースケース別活用法

コードレビュー時の使い方

プルリクエスト前のチェック：

  1. すべての変更ファイルをソース管理で確認
  2. 重要な変更は個別に開いて詳細確認
  3. 不要な変更（空白、フォーマットだけ）を除外

バグ修正時の活用

動作するバージョンとの比較：

  1. 正常に動作していた時点のコミットを特定
  2. 現在のコードと比較
  3. 差分から問題箇所を特定

リファクタリング時の確認

変更前後の比較：

  • 機能が変わっていないことを確認
  • 意図しない変更が入っていないかチェック
  • テストコードとの整合性確認

トラブルシューティング

Q1: 比較画面が開かない

確認事項：

  • ファイルが保存されているか
  • 拡張子が認識されているか
  • エンコーディングが一致しているか

解決方法：

# VSCodeをクリーンモードで起動
code --disable-extensions

Q2: 差分が正しく表示されない

空白や改行の問題：

{
  // 空白の違いを無視
  "diffEditor.ignoreTrimWhitespace": true,
  
  // 改行コードの統一
  "files.eol": "\n"
}

Q3: 大きなファイルで比較が遅い

パフォーマンス改善：

{
  // 計算時間を延長
  "diffEditor.maxComputationTime": 10000,
  
  // 大きなファイルの警告サイズ
  "editor.largeFileOptimizations": true
}

Q4: Git差分が表示されない

Gitが認識されない場合：

{
  // Gitパスを明示的に指定
  "git.path": "C:\\Program Files\\Git\\bin\\git.exe"
}

外部ツールとの連携

Beyond Compareとの連携

設定方法：

// .gitconfig

[diff]

tool = bc

[difftool “bc”]

path = “C:/Program Files/Beyond Compare 4/BCompare.exe”

WinMergeとの連携

VSCodeから起動：

{
  "terminal.integrated.commandsToSkipShell": [
    "workbench.action.terminal.openNativeConsole"
  ]
}

効率的な比較のコツ

比較前の準備

フォーマットを統一：

  • Prettierでコード整形
  • ESLintで自動修正
  • 改行コードの統一

これで本質的な差分だけが見えます。

比較時の注意点

見落としを防ぐ：

  • 全体の差分数を確認
  • F7で順番に確認
  • 重要な箇所はコメントを追加

比較後の処理

マージする時：

  • 変更理由をコミットメッセージに
  • 大きな変更は段階的に
  • テストを必ず実行

まとめ：今すぐ使える比較テクニック3選

VSCodeのソース比較機能、こんなに便利だったんですね！

今日から実践できる3つのテクニック：

  1. 右クリックで「比較対象の選択」を活用 2つのファイルを素早く比較。これだけで作業効率が大幅アップ！
  2. F7キーで差分ジャンプ 大きなファイルでも、差分だけを効率的にチェック
  3. Git連携で履歴確認 ソース管理ビューから、変更内容を常に把握

さらに効率化するなら：

  • GitLens拡張機能で履歴を可視化
  • Partial Diffで部分比較
  • settings.jsonで自分好みにカスタマイズ

ファイル比較は開発作業の基本中の基本。VSCodeの比較機能を使いこなせば、バグの発見も、コードレビューも、マージ作業も、すべてが効率的になります。

まずは2つのファイルを選んで、右クリックから比較してみてください。その便利さに、きっと驚くはずです！

差分を見逃さない、効率的な開発ライフを送りましょう！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました