【VS Code活用術】ファイル・フォルダの差分を比較する方法とおすすめ拡張機能

Visual Studio Code（VS Code）は、軽快な動作と豊富な拡張機能で、エンジニアやライターをはじめ、幅広いユーザーに支持されている人気のコードエディターです。

今回は、VS Codeでファイルやフォルダの差分を簡単に比較する方法と、**便利な拡張機能「Diff Folders」**について詳しく解説します。

✅ 1. VS Code標準機能でファイル間の差分を比較する

1-1. GUIでの比較手順

VS Codeには、ファイル同士の変更点を比較できる**「Compare」コマンド**が標準で備わっています。

▶ ファイルの比較手順

1. 比較したい2つのファイルを開き、いずれか1つをアクティブにします
2. メニューバーの【表示】→【コマンドパレット】を開く
3. 「compare」または「比較」と入力し、 **「ファイル：アクティブファイルを比較しています」**を選択
4. 2つ目のファイルを選択

すると、左右に並んだファイルの差分が強調表示され、変更された箇所が一目でわかります。

1-2. インラインビューで差分を表示する

デフォルトでは左右並びの表示になりますが、上下に差分を並べて表示するインラインビューも選べます。

▶ 切り替え方法

1. 差分表示画面の右上にある【…（三点メニュー）】をクリック
2. 【インラインビュー】を選択

もう一度クリックすれば、元の表示に戻せます。

1-3. ターミナル（CLI）から差分を表示

コマンドラインからVS Codeを起動し、ファイルの差分を比較することも可能です。

code -d ファイル1 ファイル2

▶ 例：

code -d sample.c sample_4.c

このコマンドで、VS Codeが起動し、2つのファイルの差分がすぐに表示されます。

✅ 2. フォルダごと比較したいなら「Diff Folders」がおすすめ

VS Codeの拡張機能「Diff Folders」を使えば、フォルダ間のファイル変更・追加・削除の差分を視覚的に表示できます。

2-1. インストール方法

1. VS Code左側の拡張機能アイコン（または Ctrl + Shift + X）をクリック
2. 検索バーに「Diff Folders」と入力
3. 該当拡張機能を見つけて【インストール】をクリック

2-2. 起動・基本操作

1. コマンドパレット（Ctrl + Shift + P or Command + Shift + P）を開く
2. 「Diff Folders」を検索 → 【View: Show Diff Folders】を選択
3. 左メニューに「Diff Folders」画面が表示されたら成功
4. 【New Diff Panel】をクリックして比較画面を開く

2-3. フォルダを指定して比較する

1. 左右の【フォルダアイコン】をクリックし、それぞれ比較したいフォルダを選択
2. 【Compare】をクリック

▶ 例（サンプル）：

• styles.css に変更あり → 黄色
• script.js に変更あり → 黄色
• emoji.png が削除された → 赤色

色で状態が明確に表示されるので、直感的に差分を把握できます。

✅ 3. 「Diff Folders」の便利機能まとめ

💡 機能①：表示する差分を絞り込める

比較結果の上部にあるアイコンで、表示内容を細かくフィルターできます。

目的に応じて表示内容を切り替えられるため、大規模な比較でも探しやすいのが特徴です。

💡 機能②：比較中のフォルダ間でファイルをコピーできる

画面中央のアイコン群を使うと、左右のフォルダ間でファイルのコピー操作も可能です。

• ←矢印：右→左へコピー
• →矢印：左→右へコピー
• 対象ファイルを選択するためのアイコンもあり

例えば、削除されたファイルを元に戻したいときに、左から右へコピーして復元できます。

💡 機能③：ファイル内容をその場で確認・編集できる

差分があるファイルをクリックすると、左右の内容を並べて確認＆編集できます。VS Codeの編集機能をそのまま使えるので、比較 → 修正まで一気に進められるのが大きな魅力です。

✅ まとめ

✍️ 編集後記

VS Codeの差分比較機能と「Diff Folders」の組み合わせを使えば、コードレビューや資料比較、データの整合確認まで効率よく・正確に進めることができます。

「ちょっと差分を確認したい」「複数ファイルを一括で見たい」といったニーズにぴったりの機能なので、ぜひ日常業務に取り入れてみてくださいね。