「このファイル、どこを変更したんだっけ…」 「2つのバージョンの違いを確認したい…」 「マージする前に差分をチェックしたい…」
プログラミングをしていると、ファイルの比較は日常茶飯事。実はVSCodeには、ファイル比較のための強力な機能が標準で搭載されているんです。
この記事では、基本的な比較方法から、Git連携、フォルダー単位の比較、さらには便利な拡張機能まで、VSCodeのソース比較機能を完全マスターできる内容をお届けします。
VSCodeで使える3つの比較方法
1. ファイル同士を比較（最も基本的）
2つのファイルの違いを並べて確認する方法です。
2. Git差分の確認（最も実用的）
変更履歴やコミット前の差分を確認できます。
3. フォルダー比較（プロジェクト全体）
複数ファイルの差分を一度に確認できます。
それぞれ詳しく見ていきましょう！
基本編：2つのファイルを比較する
方法1：エクスプローラーから比較（最も簡単！）
手順：
- エクスプローラーで最初のファイルを右クリック
- 「比較対象の選択」をクリック
- 2つ目のファイルを右クリック
- 「選択項目と比較」をクリック
これだけで、2つのファイルが左右に並んで表示されます！
方法2：コマンドパレットを使用
手順：
- Ctrl+Shift+P（Mac: Cmd+Shift+P）でコマンドパレット
- 「File: Compare Active File With…」と入力
- 比較したいファイルを選択
現在開いているファイルと別のファイルを素早く比較できます。
方法3：コマンドラインから起動
ターミナルで実行：
# 2つのファイルを比較モードで開く
code --diff file1.js file2.js
# 既存のウィンドウで開く場合
code -r --diff file1.js file2.js
スクリプトやバッチ処理に組み込める便利な方法です。
比較画面の見方と操作方法
差分の表示形式
色分けの意味：
- 緑色（+）：追加された行
- 赤色（-）：削除された行
- 黄色（~）：変更された行
- グレー：変更なし
便利なナビゲーション
ショートカットキー：
- F7：次の差分へジャンプ
- Shift+F7：前の差分へジャンプ
- Alt+F5：すべての変更を受け入れる
マウス操作：
- スクロールバーの色付き部分をクリックで即座に移動
- 差分の横の矢印で変更を取り込み
インライン表示と並列表示の切り替え
表示モードの変更：
- 比較ビューの右上のアイコンをクリック
- 「インラインビュー」と「並列ビュー」を切り替え
それぞれの特徴：
- 並列ビュー：左右で比較しやすい
- インラインビュー：縦に長いファイルに適している
Git連携：変更履歴を確認する
ワーキングツリーの変更を確認
現在の変更を見る：
- 左サイドバーの「ソース管理」アイコンをクリック
- 変更されたファイルをクリック
- 自動的に差分が表示される
便利な操作：
M = Modified（変更）
A = Added（追加）
D = Deleted（削除）
U = Untracked（追跡対象外）
特定のコミットと比較
GitLensを使わない方法：
# ターミナルで特定のコミットと比較
git difftool HEAD~1 HEAD
VSCode内で操作：
- コマンドパレットで「Git: View History」
- 比較したいコミットを選択
- ファイルをクリックで差分表示
ブランチ間の比較
手順：
- ソース管理ビューを開く
- 「…」メニューから「Branch」→「Compare」
- 比較したいブランチを選択
マージ前の確認に必須の機能です！
高度な比較テクニック
3方向マージ（コンフリクト解決）
マージコンフリクト時の表示：
<<<<<<< HEAD（現在の変更）
あなたのコード
=======
他の人のコード
>>>>>>> branch-name（取り込む変更）
VSCodeの解決支援：
- 「現在の変更を採用」
- 「入力側の変更を採用」
- 「両方の変更を採用」
- 「変更を比較」
ボタンをクリックするだけで解決！
選択範囲だけを比較
部分比較の方法：
- 比較したい範囲を選択
- 右クリックで「選択範囲を比較」
- 別ファイルの範囲を選択
- 部分的な差分が表示される
大きなファイルの一部だけを比較したい時に便利！
クリップボードと比較
手順：
- 比較したいテキストをコピー
- VSCodeでファイルを開く
- コマンドパレットで「Compare Active File with Clipboard」
外部のコードと素早く比較できます。
フォルダー・プロジェクト全体の比較
標準機能での制限
残念ながら、VSCodeの標準機能ではフォルダー全体の比較はできません。 でも、拡張機能を使えば可能です！
Folder Compare（拡張機能）
インストール：
- 拡張機能ビューで「Folder Compare」を検索
- インストール
使い方：
- エクスプローラーでフォルダーを右クリック
- 「Select for Compare」
- 別のフォルダーで「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"
}
}
ユースケース別活用法
コードレビュー時の使い方
プルリクエスト前のチェック：
- すべての変更ファイルをソース管理で確認
- 重要な変更は個別に開いて詳細確認
- 不要な変更（空白、フォーマットだけ）を除外
バグ修正時の活用
動作するバージョンとの比較：
- 正常に動作していた時点のコミットを特定
- 現在のコードと比較
- 差分から問題箇所を特定
リファクタリング時の確認
変更前後の比較：
- 機能が変わっていないことを確認
- 意図しない変更が入っていないかチェック
- テストコードとの整合性確認
トラブルシューティング
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つのテクニック：
- 右クリックで「比較対象の選択」を活用 2つのファイルを素早く比較。これだけで作業効率が大幅アップ！
- F7キーで差分ジャンプ 大きなファイルでも、差分だけを効率的にチェック
- Git連携で履歴確認 ソース管理ビューから、変更内容を常に把握
さらに効率化するなら：
- GitLens拡張機能で履歴を可視化
- Partial Diffで部分比較
- settings.jsonで自分好みにカスタマイズ
ファイル比較は開発作業の基本中の基本。VSCodeの比較機能を使いこなせば、バグの発見も、コードレビューも、マージ作業も、すべてが効率的になります。
まずは2つのファイルを選んで、右クリックから比較してみてください。その便利さに、きっと驚くはずです！
差分を見逃さない、効率的な開発ライフを送りましょう！
コメント