VS Codeで簡単ファイル比較！差分確認の手順を紹介

VS Codeで簡単ファイル比較！差分確認の手順と活用法を徹底解説

プログラミング、ドキュメント作成、データ分析など、デジタルコンテンツを扱う上で「ファイルの内容がどのように変更されたか」を確認する作業は避けて通れません。特に複数人で共同作業を行う場合や、過去のバージョンと現在のバージョンを比較して変更点を追跡したい場合など、正確な差分確認は作業の効率化とミスの防止に不可欠です。

多くの開発者やコンテンツクリエイターが愛用する統合開発環境（IDE）であるVisual Studio Code（VS Code）は、その強力な編集機能や豊富な拡張機能に加え、標準で優れたファイル比較機能を提供しています。この記事では、VS Codeを使ったファイル比較・差分確認の基本的な手順から、Git連携による高度な比較、さらに便利な拡張機能の活用法まで、あらゆる側面から徹底的に解説します。

VS Codeを使い始めたばかりの初心者から、もっと効率的に差分確認を行いたいと考えているベテランユーザーまで、すべての方にとって役立つ情報となるでしょう。さあ、VS Codeでスマートなファイル比較の世界へ踏み込みましょう！

1. なぜファイル比較は重要なのか？ VS Codeを選ぶ理由

ファイル比較、あるいは差分確認（Diff）は、多くの作業フローにおいて極めて重要なプロセスです。その主な理由をいくつか挙げます。

変更点の明確な把握: ファイルのどの部分が追加、削除、変更されたのかを一目で把握できます。手動で変更点を探すのは非効率的で、見落としのリスクも伴います。
バグやエラーの原因特定: プログラムが期待通りに動作しなくなった場合、前回の正常に動作していたバージョンとの差分を比較することで、問題の原因となっているコードの変更箇所を特定しやすくなります。
共同作業の効率化: 複数人が一つのプロジェクトに取り組む際、他のメンバーが行った変更内容を理解するために差分確認は必須です。コードレビューも差分をベースに行われます。
履歴の追跡と理解: Gitなどのバージョン管理システムと連携することで、ファイルの変更履歴を辿り、各コミットでどのような変更が行われたのかを詳細に確認できます。
マージコンフリクトの解消: バージョン管理システムにおいて、複数の変更が同じ箇所以外に対して行われた場合に発生するコンフリクト（競合）を解消する際に、どちらの変更を採用するか、あるいは手動で調整するために差分を確認します。
設定ファイルやデータの管理: プログラムのコードだけでなく、設定ファイルやデータファイル（JSON, CSVなど）の変更点を確認する際にも役立ちます。環境間の設定の違いを比較する場合などにも有効です。

このように、ファイル比較は単なる変更点の確認にとどまらず、作業の品質向上、問題解決、チーム連携、履歴管理など、幅広い側面で不可欠なスキルと言えます。

そして、ファイル比較を行うツールとして、なぜVS Codeが優れているのでしょうか？

標準機能の充実: 追加のツールをインストールすることなく、基本的な2つのファイルの比較機能をすぐに利用できます。直感的で使いやすい比較ビューが標準装備されています。
強力なGit連携: VS CodeはGitとの連携が非常に強力です。ファイルの変更状態の把握、ステージング、コミット、ブランチ間の比較、マージコンフリクトの解消など、Git操作の多くをVS Code上で行え、その過程でシームレスな差分確認が可能です。
豊富な拡張機能エコシステム: 標準機能だけでは実現できないより高度な比較（例：フォルダ全体の比較、より詳細なGit履歴からの比較）を、高品質な拡張機能をインストールすることで簡単に追加できます。
統合されたワークフロー: エディタ、ターミナル、デバッガー、バージョン管理などが一つのウィンドウに統合されているVS Code内で、ファイルを編集しながら、履歴を確認し、差分を比較するという一連の作業をスムーズに行えます。
高いカスタマイズ性: 差分表示の色や形式など、比較ビューの外観や振る舞いを細かくカスタマイズできます。
クロスプラットフォーム対応: Windows、macOS、LinuxとOSを選ばずに利用できます。

これらの理由から、VS Codeはファイル比較を行う上で非常に優れた環境と言えます。次に、VS Codeの標準機能を使った基本的なファイル比較の手順から詳しく見ていきましょう。

2. VS Code標準機能によるファイル比較：基本から応用まで

VS Codeは追加の拡張機能をインストールすることなく、標準機能で2つのファイルを簡単に比較できます。ここではその基本的な手順と、比較ビューの見方、そして標準機能の限界について説明します。

2.1. 2つのファイルを比較する基本的な手順

最も一般的で簡単な、2つのファイルを比較する手順をいくつか紹介します。

手順 1: エクスプローラー（サイドバー）からの比較

この方法は、VS Codeのエクスプローラービューに表示されているファイル同士を比較したい場合に便利です。

VS Codeを開き、比較したいファイルを含むフォルダを開きます。
エクスプローラービュー (Ctrl+Shift+E または Cmd+Shift+E) を開きます。
比較したい最初のファイルを選択します。 ファイル名をシングルクリックします。
Ctrlキー (macOSではCmdキー) を押しながら、比較したい2番目のファイルを選択します。 これで2つのファイルが同時に選択された状態になります。
選択したファイルの一つを右クリックします。
コンテキストメニューから「Compare Selected」を選択します。

これにより、VS Codeのエディタエリアに新しいタブとして比較ビューが表示され、2つのファイルの差分が確認できます。

手順 2: エディタで開いているファイルと別のファイルを比較

現在エディタで開いているファイル（アクティブなファイル）と、エクスプローラーにある別のファイルを比較したい場合に便利な方法です。

比較したい最初のファイル（アクティブなファイル）をエディタで開きます。
エクスプローラービュー (Ctrl+Shift+E または Cmd+Shift+E) を開きます。
比較したい2番目のファイルを右クリックします。
コンテキストメニューから「Compare with Active File」を選択します。

この操作でも、比較ビューが新しいタブとして開き、2つのファイルの差分が表示されます。

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

キーボード操作を好む場合や、エクスプローラーを使わずに比較を開始したい場合に便利です。

比較したい最初のファイル（アクティブなファイル）をエディタで開きます。
コマンドパレットを開きます。 (Ctrl+Shift+P または Cmd+Shift+P)
「Compare」と入力します。
候補の中から「File: Compare Active File With…」を選択します。
ファイルピッカーが表示されます。 ここで比較したい2番目のファイルを検索して選択します。ファイル名の一部を入力して絞り込むことができます。

これで、2つのファイルの差分が表示されます。

また、現在開いているファイルと、そのファイルが最後に保存された状態（ディスク上のファイル）を比較したい場合は、コマンドパレットで「File: Compare Active File with Saved」を選択します。これは、ファイルを編集していて、保存前の状態と保存済みの状態を比較したい場合などに役立ちます。

手順 4: ドラッグ＆ドロップによる比較

直感的な操作で比較したい場合に便利です。

エクスプローラービュー (Ctrl+Shift+E または Cmd+Shift+E) を開きます。
比較したい最初のファイルを、エディタエリアの空いているスペース（または既存のタブの横）にドラッグ＆ドロップして開きます。
次に、比較したい2番目のファイルを、最初のファイルが開かれているエディタタブの上にドラッグします。
ドラッグしたファイルの上に「Compare with <ファイル名>」といったツールチップが表示されたら、ドロップします。

この操作でも比較ビューが開かれます。ただし、ドラッグ＆ドロップのターゲット位置に注意が必要です。タブの上に正確にドロップすることで比較モードになります。

2.2. 比較ビュー（Diff Editor）の詳細な説明

上記の手順で比較を実行すると、VS Codeのエディタエリアに「比較ビュー（Diff Editor）」が表示されます。このビューは、2つのファイルの内容を並べて表示し、差分を色分けしてハイライトします。

比較ビューの構成

通常、比較ビューは左右に分割されたレイアウトで表示されます。

左側のペイン: 比較元のファイル（通常は古いバージョンや変更前の状態）が表示されます。
右側のペイン: 比較先のファイル（通常は新しいバージョンや変更後の状態）が表示されます。

各ペインには、行番号が表示され、差分のある行やブロックが特別な背景色でハイライトされます。

差分の色の意味

VS Codeのデフォルト設定では、差分は以下の色分けで表示されます。

緑色の背景: 右側のファイルで追加された内容。左側のファイルには存在しない行や文字を表します。
赤色の背景: 左側のファイルから削除された内容。右側のファイルには存在しない行や文字を表します。左側のペインで赤色表示され、右側のペインの対応する位置には空白や代替の表示がされることがあります。
青色の背景: 既存の行の中で変更があった内容。行全体が青色の背景で表示され、さらにその行の中で具体的にどの文字が変更されたかは別の色（デフォルトではやや濃い青やハイライトされる文字色）で示されます。

これらの色はテーマによって異なる場合がありますが、概念は共通です。

比較ビューでのナビゲーション

比較ビューには、差分箇所を効率的に移動するためのナビゲーション要素が用意されています。

エディタ上部のナビゲーションバー: 比較ビューの上部には、次/前の差分へ移動する矢印ボタンが表示されます。
- ↑ (上矢印): 前の差分箇所へ移動します。
- ↓ (下矢印): 次の差分箇所へ移動します。
ミニマップ (Optional): VS Codeの設定でミニマップを表示している場合、ミニマップ上でも差分箇所が色付きのマーカーとして表示され、クリックして直接移動できます。
コマンドパレット: コマンドパレット (Ctrl+Shift+P または Cmd+Shift+P) で「Go to Next Difference」または「Go to Previous Difference」と入力しても移動できます。

変更の適用（サイドバイサイドビューのみ）

サイドバイサイドビューで表示している場合、右側のペイン（比較先ファイル）にある差分箇所（緑色の追加行や青色の変更行のブロック）の左側には、アイコンが表示されます。

左矢印アイコン (<-): その差分（追加または変更された内容）を左側のファイルにコピーします。例えば、右側で追加されたコードを左側にも反映させたい場合に便利です。
右矢印アイコン (->): （左側のペインに表示される削除行や変更行のブロックの右側に表示されます）その差分（左側から削除または変更された内容）を右側のファイルにコピーします。これは実質的に左側の状態に戻す操作に近いですが、差分単位で行えます。

これらのアイコンを使うことで、手動でコピー＆ペーストすることなく、選択した差分だけを他のファイルに反映させることができます。ただし、複雑な変更やマージコンフリクトには適しません。

インラインビュー

標準のサイドバイサイドビューに加え、差分を元のファイル内に組み込む形で表示する「インラインビュー」に切り替えることも可能です。

比較ビューを開いている状態で、エディタ上部のナビゲーションバーの右端にある「…」（その他のアクション）アイコンをクリックします。
ドロップダウンメニューから「Switch to Inline View」を選択します。

インラインビューでは、削除された行は元の位置に赤色で表示され、追加された行はその下の緑色で表示されます。変更された行は、元の内容（赤色）と新しい内容（緑色）がセットで表示されます。

インラインビューは、元のファイルの流れの中で変更点を確認したい場合に便利ですが、左右を並べて全体像を把握したい場合はサイドバイサイドビューの方が適しています。サイドバイサイドビューに戻すには、同様に「…」メニューから「Switch to Side by Side View」を選択します。

差分比較の設定（無視する設定など）

VS Codeは、差分比較を行う際に特定の種類の変更を無視するように設定できます。これは、例えば空白文字の変更や行末文字の違いなど、コードのロジックに影響しない変更をノイズとして扱わない場合に役立ちます。

最も一般的な設定は、空白文字（スペース、タブ）の変更を無視するかどうかです。

VS Codeの設定を開きます。（File -> Preferences -> Settings または Code -> Preferences -> Settings）
検索バーに「diff ignore」と入力します。
Diff: Ignore Trim Whitespace の設定項目が見つかります。
- この設定を有効にすると、行末の空白文字や、空行の変更などが差分としてハイライトされなくなります。コードの体裁調整による変更を無視したい場合に便利です。
- この設定は、行内の連続する空白文字の変更や、タブとスペースの混在といった変更を完全に無視するわけではありません。より厳密な空白文字の無視を行いたい場合は、.gitattributes ファイルの設定や、後述の拡張機能が必要になる場合があります。
その他の関連設定として、Diff Editor: Render Side By Side (常にサイドバイサイドで開くか)、Diff Editor: Render Indicators (差分の種類を示すアイコンを表示するか) などがあります。

これらの設定を調整することで、より見やすく、目的に合った差分表示を実現できます。

2.3. 標準機能の限界：3つ以上のファイルやフォルダの比較

VS Codeの標準機能は、基本的に「2つのファイル」の差分を比較することに特化しています。以下のシナリオには、標準機能だけでは直接対応できません。

3つ以上のファイルの同時比較: AファイルとBファイルの差分、BファイルとCファイルの差分、といった比較は可能ですが、A、B、Cの3つのファイルを一度に並べて差分を確認する機能は標準では提供されていません。
フォルダ（ディレクトリ）全体の比較: フォルダAとフォルダBの間で、どのファイルが追加・削除されたか、どのファイルが変更されたか、といったフォルダ単位での差分を確認する機能も標準では提供されていません。

これらのより高度な比較を行いたい場合は、後述するGit連携機能（特にGitを使っている場合）を利用するか、ファイル比較に特化したVS Code拡張機能をインストールする必要があります。

3. ソース管理（Git）を利用したファイル比較

VS CodeはGitとの連携が非常に強力で、多くのGit操作をVS Code上で行えます。このGit連携機能を利用することで、単なるファイル比較にとどまらず、ファイルの履歴や異なるバージョン間の差分を簡単に確認できます。

Gitを使っているプロジェクトであれば、VS Codeのソース管理ビュー（Ctrl+Shift+G または Cmd+Shift+G）は、最も頻繁にファイル比較を行う場所の一つとなるでしょう。

3.1. ソース管理ビュー（Git）での変更確認

プロジェクトがGitリポジトリとして初期化されている場合、VS Codeのソース管理ビューには、現在の作業ツリーの状態が表示されます。

「Changes」（変更）： Gitによって追跡されているファイルのうち、現在の作業ツリーで変更が加えられたファイルが表示されます。
「Staged Changes」（ステージされた変更）： git add コマンドによってステージングエリアに追加された変更が表示されます。

これらのリストに表示されているファイル名をクリックすると、自動的に比較ビューが開きます。

「Changes」リストのファイル: 現在の作業ツリーの状態と、最後にコミットされた状態（HEAD）との差分が表示されます。
「Staged Changes」リストのファイル: ステージングエリアの状態と、最後にコミットされた状態（HEAD）との差分が表示されます。

これにより、自分が加えた変更が、前回のコミットからどのように変化したのか、あるいは次にコミットされる内容（ステージされた変更）が前回のコミットからどのように変化するのかを簡単に確認できます。

3.2. Gitコマンドを使った特定の状態との比較

ソース管理ビューで表示される基本的な差分以外にも、Gitコマンドに対応する形で様々な状態との差分を確認できます。ファイルの右クリックメニューや、ファイルの横に表示されるアイコンからこれらの操作を実行できます。

ステージングエリアとの比較 (`Compare with Staged`)

作業ツリーでファイルをさらに編集した後、その変更をステージングエリアの内容と比較したい場合があります。

ソース管理ビューの「Changes」リストにあるファイルを右クリックします。
コンテキストメニューから「Compare with Staged」を選択します。

これにより、現在の作業ツリーの状態と、同じファイルのステージングエリアにある状態との差分が表示されます。

HEADとの比較 (`Compare with HEAD`)

「Changes」リストのファイルをクリックするのと同様の操作ですが、明示的にHEAD（最後にコミットされた状態）と比較したい場合に利用します。

ソース管理ビューの「Changes」リストにあるファイルを右クリックします。
コンテキストメニューから「Compare with HEAD」を選択します。

特定のコミットとの比較

過去の特定のコミット時のファイルの状態と、現在の作業ツリーの状態、またはHEADの状態を比較したい場合があります。

比較したいファイルをエディタで開くか、エクスプローラーで選択しておきます。
コマンドパレット (Ctrl+Shift+P または Cmd+Shift+P) を開きます。
「Git: Compare Active File With…」と入力します。
候補の中から「Git: Compare Active File With Specific Ref…」を選択します。
リファレンス（コミットハッシュ、ブランチ名、タグ名など）を入力または選択するプロンプトが表示されます。比較したいコミットのハッシュの一部、ブランチ名、またはタグ名を入力すると候補が表示されるので、選択します。

これにより、現在のファイルの状態と、指定したコミットにおける同じファイルの状態との差分が表示されます。

より直感的に過去のコミットと比較するには、後述のGit History拡張機能が非常に便利です。

3.3. ブランチ間の比較

開発中に他のブランチ（例：mainブランチやfeatureブランチ）と現在のブランチの状態を比較したいことはよくあります。VS Codeは、アクティブなブランチと他のブランチとの差分を確認する機能を提供します。

ソース管理ビューの最上部、リポジトリ名の横にあるGitブランチ名表示（ステータスバーにも表示されることが多い）をクリックします。
コマンドパレットにブランチ関連のコマンド候補が表示されます。
「Git: Compare Base with Branch…」を選択します。
比較したい相手のブランチを選択します。

このコマンドは、現在のブランチ（Base）が派生したブランチ（通常は親ブランチやmainブランチなど）と、指定したブランチの間の差分を表示します。具体的には、Gitの git diff <base>..<branch> コマンドに相当する内容を表示します。これは、指定したブランチに含まれていて、現在のブランチ（またはそのベース）には含まれていない変更（コミット）のリストと、その全体の差分（変更されたファイル一覧と、各ファイルの差分）を表示します。

特定のファイルについて、異なるブランチ間での差分を確認したい場合は、そのファイルをエディタで開いた状態でコマンドパレットから「Git: Compare Active File With Branch…」を選択し、比較したいブランチを選択します。これにより、現在のブランチにあるそのファイルの状態と、指定したブランチにある同じファイルの状態との差分が表示されます。

3.4. ファイル/ディレクトリの履歴比較（タイムラインビュー）

VS Codeは、各ファイルの変更履歴を時系列で表示する「タイムラインビュー」を提供しています。これはGitの履歴と連携しており、特定のファイルの過去のバージョンを簡単に確認したり、比較したりできます。

比較したいファイルをエディタで開きます。
サイドバーの「エクスプローラー」ビューの下部にある「TIMELINE」セクションを展開します。（もし表示されていなければ、サイドバーの空きスペースで右クリックし「TIMELINE」にチェックを入れて表示させます。）
タイムラインビューには、そのファイルに対する過去のコミットが新しい順にリストアップされます。
リスト内の各コミットアイテムにマウスカーソルを合わせると、複数のアイコンが表示されます。
- ファイルのアイコン（左から2番目）: 現在の作業ツリーの状態と、そのコミット時のファイルの状態を比較します。
- 左矢印アイコン（左から3番目）: そのコミット時のファイルの状態を新しいタブで開いて表示します。
タイムラインビューから特定のコミットを選択し、ファイルのアイコンをクリックすることで、現在のファイルと過去の特定のコミット時点のファイルとの差分を簡単に確認できます。

フォルダ全体の履歴を詳細に確認したり、コミット間の差分を視覚的に追いたい場合は、後述のGit History拡張機能がより強力です。

3.5. マージコンフリクトの解消

Gitでブランチをマージしたり、プルしたりした際に、同じファイルや行に対して複数の変更が行われていると「マージコンフリクト」が発生します。VS Codeは、このマージコンフリクトを解消するための専用エディタ機能を提供しています。

コンフリクトが発生したファイルを開くと、VS Codeはその箇所を特別にハイライトし、「Incoming Change」と「Current Change」というラベル付きで表示します。エディタ上部には、コンフリクトを解決するためのボタンが表示されます。

Accept Current Change: 現在のブランチ側の変更を採用します。
Accept Incoming Change: マージしようとしているブランチ側の変更を採用します。
Accept Both Changes: 両方の変更を採用し、連続してファイルに残します。
Compare Changes: コンフリクトしている両方の変更を比較ビューで並べて表示します。

また、個々のコンフリクトブロックに対しても同様の操作を行うためのリンクが表示されます。

「Compare Changes」を選択すると、VS Codeは特殊な比較ビューを開きます。左側に「Current Change」（現在のブランチ側の変更）、右側に「Incoming Change」（マージしようとしているブランチ側の変更）が表示され、それぞれの差分を確認できます。このビューは、どちらの変更を採用するか、あるいは両方の変更を組み合わせて手動で編集するかを判断するのに役立ちます。

最終的に、いずれかの変更を受け入れるか、手動でコードを編集してコンフリクトマーカー（<<<<<<<, =======, >>>>>>> など）を削除し、ファイルを保存することで、コンフリクトを解決済みとしてマークできます。Gitのステージングエリアにファイルを追加 (git add) することで、コンフリクト解消が完了したことをGitに伝えます。

VS CodeのGit連携機能は非常に強力であり、これらの比較機能やマージコンフリクト解消機能は、Gitを使った開発ワークフローにおいて不可欠なツールとなります。

4. VS Codeのおすすめファイル比較・差分確認拡張機能

VS Codeの標準機能やGit連携機能は非常に便利ですが、特定のニーズに対しては拡張機能がさらに強力な機能を提供します。ここでは、ファイル比較や差分確認をさらに効率化するためのおすすめ拡張機能をいくつか紹介します。特に人気が高く、機能が充実しているものに焦点を当てます。

4.1. なぜ拡張機能が必要なのか？

前述の通り、標準機能には以下のような限界があります。

3つ以上のファイルの同時比較ができない。
フォルダ全体の比較ができない。
Gitの履歴を視覚的に、より詳細に辿りたい。
特定のコミット間の比較をもっと簡単に行いたい。
Gitの操作と連携したファイル比較をよりスムーズに行いたい。

これらのニーズに応えるために、VS Codeには多くのファイル比較・差分確認関連の拡張機能が公開されています。

4.2. Git History

おそらくVS CodeのGit関連拡張機能の中で最も人気があり、広く利用されている拡張機能の一つです。ファイルの変更履歴を視覚的に表示し、過去の様々な状態との比較を簡単に行えるようにします。

Git Historyの主な機能:

リポジトリ全体のコミット履歴をグラフ形式で表示
特定のファイルの変更履歴を表示
任意の2つのコミット間、またはブランチ間の差分を表示（変更されたファイル一覧と各ファイルの差分）
特定のコミットでファイルがどのように変更されたか（差分）を表示
特定のコミット時点でのファイル内容を表示
コミットの検索、フィルタリング

インストール方法:

VS Codeを開きます。
アクティビティバー（通常左側）の「Extensions」（拡張機能）アイコンをクリックします (Ctrl+Shift+X または Cmd+Shift+X)。
検索バーに「Git History」と入力します。
「Git History」拡張機能が表示されたら、「Install」ボタンをクリックします。

Git Historyを使った比較手順:

Git Historyを使ったファイル比較は、主に履歴ビューから行います。

Git Historyビューを開く:
- コマンドパレット (Ctrl+Shift+P または Cmd+Shift+P) を開き、「Git History」と入力し、「Git History: View History」を選択します。
- または、VS Codeのステータスバーにある現在のブランチ名をクリックし、表示されるメニューから「View History」を選択します。
- または、ソース管理ビューの「…」（その他のアクション）メニューから「View History」を選択します。
- または、エクスプローラーでファイルやフォルダを右クリックし、コンテキストメニューから「Git History: View File History」または「Git History: View History (repo)」を選択します。
履歴ビューでの操作:
Git Historyビューが開くと、リポジトリのコミット履歴がリストまたはグラフ形式で表示されます。
- 特定のコミットの変更を確認: 履歴リストでコミットをクリックします。そのコミットで変更されたファイルの一覧が下ペインに表示されます。ファイル名をクリックすると、そのコミットでのそのファイルの差分（親コミットとの差分）が比較ビューで表示されます。
- 任意の2つのコミット間の差分を比較: Ctrlキー (macOSではCmdキー) を押しながら、比較したい2つのコミットを選択します。右クリックメニューから「Compare Commits」を選択します。変更されたファイル一覧とその差分が表示されます。
- 特定のファイルに対する過去の任意の2つのコミット間の差分を比較: 履歴ビューで特定のファイルに絞り込んでいる場合（例えば「Git History: View File History」で開いた場合）、同様に2つのコミットを選択して「Compare Commits of File」を選択します。
- ブランチ間の差分を比較: 履歴ビューで任意のブランチを右クリックし、「Compare with HEAD」または「Compare with Branch…」を選択します。

Git Historyを使うことで、コミットグラフを辿りながら視覚的に変更の流れを理解し、必要な時点間の差分を簡単に見つけ出すことができます。複雑なブランチ運用をしているプロジェクトで特にその威力を発揮します。

4.3. Compare Folders

VS Code標準機能では対応していない「フォルダ全体の比較」を実現するための拡張機能です。2つのフォルダを指定し、ファイル単位での追加、削除、変更をリストアップし、さらに変更されたファイルについてVS Codeの標準比較ビューで差分を確認できます。

Compare Foldersの主な機能:

指定した2つのフォルダの内容を比較
追加、削除、変更されたファイルをリストアップ
リストからファイルを選択してファイル単位の差分を確認
比較結果からファイルをコピーまたは削除

インストール方法:

VS Codeを開きます。
拡張機能ビューを開きます (Ctrl+Shift+X または Cmd+Shift+X)。
検索バーに「Compare Folders」と入力します。
「Compare Folders」拡張機能が表示されたら、「Install」ボタンをクリックします。

Compare Foldersを使った比較手順:

Compare Foldersは、コマンドパレットまたはエクスプローラーの右クリックメニューから起動できます。

コマンドパレットから開始:
- コマンドパレット (Ctrl+Shift+P または Cmd+Shift+P) を開き、「Compare Folders」と入力し、「Compare Folders」を選択します。
- 比較したい1つ目のフォルダを選択するためのファイルピッカーが表示されます。フォルダを選択します。
- 次に、比較したい2つ目のフォルダを選択するためのファイルピッカーが表示されます。フォルダを選択します。
エクスプローラーの右クリックメニューから開始:
- エクスプローラービューを開きます (Ctrl+Shift+E または Cmd+Shift+E)。
- 比較したいフォルダを右クリックし、コンテキストメニューから「Select for Compare」を選択します。
- 比較したい2つ目のフォルダを右クリックし、コンテキストメニューから「Compare with Selected」を選択します。
比較結果ビュー:
比較が実行されると、新しいタブに比較結果ビューが表示されます。このビューは通常、左右に比較元のフォルダと比較先のフォルダが表示され、それぞれのフォルダ内のファイルが、差分の状態を示すアイコン付きでリストアップされます。
- ファイル名の横に表示されるアイコンは、そのファイルが一方のフォルダにのみ存在するか（追加・削除）、両方のフォルダに存在するが内容が異なるか（変更なし・変更あり）を示します。
- リスト上のファイル名をクリックすると、VS Codeの標準比較ビューが開き、そのファイルの内容の差分を確認できます。
- 比較結果ビュー内でファイルを右クリックすると、ファイルをコピーしたり削除したりするなどの操作も実行できます。

Compare Foldersは、プロジェクトのバックアップフォルダと現在の作業フォルダを比較したり、異なる環境の設定フォルダを比較したりするなど、フォルダ単位での変更点を把握したい場合に非常に役立ちます。

4.4. その他の関連拡張機能

上記以外にも、特定のニーズに特化した比較関連の拡張機能が存在します。

Diff Folder: Compare Foldersと同様にフォルダ比較機能を提供します。機能やUIの好みによって使い分けることができます。
Live Share: VS Codeの共同編集機能拡張機能です。Live Shareセッション中は、他の参加者が加えた変更がリアルタイムでハイライトされるため、共同編集時の差分確認という側面も持っています。
特定のファイル形式用拡張機能: JSONやXMLなど、構造化されたデータ形式のファイル比較に特化した機能を提供する拡張機能もあります。これらの拡張機能は、通常のテキスト比較では分かりにくい構造的な違いを視覚化してくれる場合があります。

これらの拡張機能を活用することで、VS Codeでのファイル比較・差分確認をより効率的かつ柔軟に行えるようになります。

5. ファイル比較を効率化するためのヒントとテクニック

VS Codeのファイル比較機能をさらに活用し、日々の作業を効率化するためのヒントとテクニックを紹介します。

5.1. キーボードショートカットの活用

ファイル比較ビューでのナビゲーションを素早く行うために、キーボードショートカットを覚えるのがおすすめです。

次の差分へ移動: F7 または Alt+F7 (OSやキーバインド設定による)
前の差分へ移動: Shift+F7 または Alt+Shift+F7 (OSやキーバインド設定による)

これらのショートカットは、比較ビューで差分箇所を次々と確認していく際に非常に便利です。カスタムキーバインドを設定している場合は、Go to Next Difference および Go to Previous Difference コマンドに対応するショートカットを確認・設定してください。

5.2. 設定 (`settings.json`) のカスタマイズ

settings.json ファイルを編集することで、比較ビューの表示や振る舞いをより詳細にカスタマイズできます。

設定を開くには、コマンドパレット (Ctrl+Shift+P または Cmd+Shift+P) で「Open Settings (JSON)」を選択します。

以下に、ファイル比較に関連する主な設定項目をいくつか紹介します。

"diffEditor.ignoreTrimWhitespace": true
- 行末の空白文字の追加・削除や、空行の変更を差分として無視します。体裁変更によるノイズを減らしたい場合に便利です。
"diffEditor.renderSideBySide": true
- 比較ビューを常にサイドバイサイド（左右分割）で開くように設定します。false に設定するとインラインビューで開くようになりますが、通常はサイドバイサイドがデフォルトで推奨されます。
"diffEditor.renderIndicators": true
- 差分箇所の左側（サイドバイサイドビューの場合）に、変更の種類（追加、削除、変更）を示すアイコンや、変更をコピーするための矢印アイコンを表示するかどうかを設定します。デフォルトは true で、視覚的に分かりやすくなります。
"diffEditor.renderOverviewRuler": true
- スクロールバーの横に、差分箇所を示すマーカーを表示するかどうかを設定します。全体の中でどのあたりに差分があるかを把握するのに役立ちます。
"diffEditor.renderWordByWord: true`
- 変更された行全体をハイライトするだけでなく、その行の中で具体的にどの単語（空白や区切り文字で区切られた部分）が変更されたかをさらに細かくハイライトします。より詳細な変更点を確認したい場合に便利です。

これらの設定を自分の好みに合わせて調整することで、より快適な比較環境を構築できます。

5.3. `code --diff` コマンドライン引数

VS Codeはコマンドラインから様々なオプションを指定して起動できます。その一つに、直接2つのファイルを比較ビューで開くための --diff 引数があります。

ターミナルやコマンドプロンプトから以下のように実行します。

bash code --diff <ファイル1のパス> <ファイル2のパス>

例えば、デスクトップにある file1.txt と file2.txt を比較したい場合：

bash code --diff ~/Desktop/file1.txt ~/Desktop/file2.txt

このコマンドを実行すると、VS Codeが起動（または新しいウィンドウが開かれ）、指定した2つのファイルが比較ビューで開かれます。他のツールやスクリプトからVS Codeの比較機能を呼び出したい場合に非常に便利な方法です。

5.4. ワークスペース設定での比較関連設定の適用

個々のプロジェクトやワークスペースごとに、ファイル比較の設定をカスタマイズしたい場合があります。例えば、あるプロジェクトでは空白文字の差分を無視したいが、別のプロジェクトでは厳密に比較したい、といったケースです。

このような場合は、ワークスペース設定 (.vscode/settings.json) を利用します。

VS Codeで対象のプロジェクトフォルダを開きます。
.vscode フォルダが存在しない場合は作成します。
.vscode フォルダ内に settings.json ファイルを作成します。
この settings.json ファイルに、そのワークスペースにのみ適用したい設定を記述します。例えば：

json { "diffEditor.ignoreTrimWhitespace": false, // このプロジェクトでは空白を無視しない "diffEditor.renderWordByWord": true // このプロジェクトでは単語単位のハイライトを有効にする }

ワークスペース設定はグローバルなユーザー設定よりも優先されます。これにより、プロジェクトの特性に合わせて柔軟な比較設定を行えます。

6. 応用編：様々なシナリオでのファイル比較

VS Codeのファイル比較機能は、単にコードの変更点を確認する以外にも、様々なシナリオで活用できます。具体的な応用例をいくつか紹介します。

コードレビュー: プルリクエストや変更セットのコードレビューを行う際、VS CodeのGit連携機能やGitHub Pull Requests and Issues拡張機能などを活用して、変更されたファイル一覧から各ファイルの差分を詳細に確認します。差分ビュー上でのコメント追加機能なども利用できるため、効率的なレビューが可能です。
設定ファイルの変更履歴追跡: アプリケーションの設定ファイル（.config, .json, .yaml など）は、環境によって内容が異なります。これらのファイルをGitで管理しておけば、タイムラインビューやGit History拡張機能を使って、いつ、誰が、どのように設定を変更したのかを簡単に追跡できます。過去のある時点の設定ファイルと現在の設定ファイルを比較して、設定変更による影響を調査することも可能です。
本番環境と開発環境の設定比較: 本番環境からダウンロードした設定ファイルと、開発環境の設定ファイルをCompare Folders拡張機能や code --diff コマンドを使って比較し、両者の違いを特定します。これにより、環境設定ミスによるトラブルを防ぐことができます。
ライブラリやフレームワークのバージョンアップに伴う変更点の確認: ライブラリやフレームワークの新しいバージョンを導入する際に、プロジェクト内で影響を受けるファイル（設定ファイル、依存関係ファイルなど）の変更点を確認します。特に、Gitで管理している依存ライブラリのサブモジュールや、設定ファイルのテンプレートなどを更新した際に、どの部分が変わったのかを差分で確認することで、移行作業がスムーズに進みます。
データファイル（CSV, JSONなど）の変更点確認: プログラムコードだけでなく、CSV形式のデータファイルやJSON形式の設定ファイル・データファイルなども、VS Codeの比較機能で差分を確認できます。特に、JSONファイルなどは標準の比較ビューで構造的な差分（キーの追加・削除、値の変更など）もある程度把握できます。専用のJSON比較拡張機能を使えば、さらに見やすく比較できる場合もあります。
ドキュメントファイルのバージョン比較: プログラムのドキュメントや技術文書などもテキストファイル（Markdown, reStructuredTextなど）で作成していれば、VS Codeの比較機能で変更点を確認できます。共同でドキュメントを編集する場合や、過去のバージョンとの変更履歴を追いたい場合に役立ちます。

このように、VS Codeのファイル比較機能は、様々なファイル形式や作業シナリオにおいて、変更点を正確かつ効率的に把握するための強力なツールとなります。

7. よくある質問 (FAQ)

VS Codeのファイル比較機能に関してよく寄せられる質問とその回答をまとめました。

Q1: 3つ以上のファイルを同時に比較することはできますか？

A1: VS Codeの標準機能では、直接的に3つ以上のファイルを同時に比較して、それぞれの差分を一つのビューに並べて表示する機能はありません。標準機能は基本的に2つのファイル（またはバージョン）の比較に特化しています。

代替手段としては、以下の方法があります。

2ファイルずつの比較を繰り返す。
3つ以上のファイルをそれぞれ別々のタブで開き、手動で見比べる。
Gitを使っている場合は、Git History拡張機能を使って、特定のコミット間やブランチ間の差分を確認し、その中で変更されたファイルリストから個別のファイル差分を追う。これは間接的に複数ファイルや複数バージョンの関連性を確認するのに役立ちます。
外部の3者間比較ツールを別途利用する。VS Codeから外部ツールを呼び出す設定も可能です。

Q2: フォルダ（ディレクトリ）全体の比較はできますか？

A2: VS Codeの標準機能では、フォルダ全体を比較して、ファイル単位の追加・削除・変更をリストアップする機能は提供されていません。

フォルダ全体の比較を行いたい場合は、以下のいずれかの方法を利用します。

Compare Folders または Diff Folder 拡張機能を使用する: 前述の通り、これらの拡張機能はフォルダ比較機能を提供します。フォルダを選択するだけで簡単に比較でき、結果をリストで確認し、ファイル単位の差分もVS Code内で確認できます。
Gitを使っている場合: Gitのソース管理ビューで変更点を確認する、あるいはGit History拡張機能を使ってコミット間やブランチ間の差分を確認すると、変更されたファイル一覧が表示されます。これは実質的にフォルダ内の変更されたファイルを確認することに相当します。
コマンドラインツールを使用する: diff コマンド（Linux/macOS）や comp / fc コマンド（Windows）など、OS標準のコマンドラインツールを使ってフォルダ比較を実行し、その結果をVS Codeで確認する。

Q3: Gitを使わないファイル比較でも便利ですか？

A3: はい、非常に便利です。VS Codeの標準機能による2つのファイル比較は、Gitを使わない単純なテキストファイルの比較にもそのまま利用できます。

ダウンロードした新しいバージョンの設定ファイルと、既存の設定ファイルを比較する。
手動で作成したドキュメントの修正前と修正後のファイルを比較する。
Webサイトのソースコードをダウンロードして、以前ダウンロードしたものと比較する。

など、Gitで管理していないファイル同士の差分確認にも、VS Codeの標準比較機能は非常に強力なツールとして役立ちます。

Q4: 差分表示の色を変えることはできますか？

A4: はい、VS Codeのテーマ設定で差分表示の色をカスタマイズできます。

設定を開きます (File -> Preferences -> Settings または Code -> Preferences -> Settings)。
検索バーに「workbench color customizations」と入力します。
Workbench: Color Customizations の項目にある「Edit in settings.json」をクリックします。
settings.json に workbench.colorCustomizations の項目を追加（または編集）し、差分表示に関連する色設定を記述します。主な設定項目は以下の通りです。
- "diffEditor.insertedTextBackground": 追加されたテキストの背景色
- "diffEditor.removedTextBackground": 削除されたテキストの背景色
- "diffEditor.insertedLineBackground": 追加された行（またはブロック）の背景色
- "diffEditor.removedLineBackground": 削除された行（またはブロック）の背景色
- "diffEditor.border": 比較エディタの境界線の色
- "diffEditor.diagonalFill": 空白エリアの斜線模様の色
例えば、赤と緑ではなく、青と黄色で差分を表示したい場合など、好みの色を指定できます。

Q5: リモートファイルの比較はできますか？

A5: VS Codeの標準機能で、直接リモートサーバー上のファイルとローカルファイルを比較する機能はありません。しかし、以下の方法でリモートファイルを扱った比較が可能です。

SSH / Remote Development 拡張機能を使う: Remote – SSHやRemote – Containersなどの拡張機能を使ってリモート環境に接続し、リモート上のファイルシステムをローカルのように扱えるようにします。この状態でVS Codeの標準比較機能や拡張機能を使えば、リモート上のファイル同士や、リモート上のファイルと別のリモート上のファイルを比較できます。
ファイルをダウンロードして比較する: リモート上のファイルをローカルにダウンロードし、ローカルにある別のファイルや、以前ダウンロードしたファイルと比較します。
Gitを使っている場合: リモートリポジトリをローカルにクローンしておけば、そのクローン内でGitの比較機能（リモートブランチとの比較など）を利用できます。

8. まとめ

この記事では、VS Codeを使ったファイル比較・差分確認について、標準機能からGit連携、そして便利な拡張機能まで、網羅的に解説しました。

VS Codeの標準機能を使えば、エクスプローラーやコマンドパレット、ドラッグ＆ドロップといった簡単な操作で、2つのファイルの差分を直感的な比較ビューで確認できます。追加、削除、変更された箇所は色分けされ、ナビゲーション機能で差分間を効率的に移動できます。
VS Codeの強力なGit連携機能は、ソース管理ビューを通じて、作業ツリー、ステージングエリア、過去のコミット、異なるブランチ間など、Gitリポジトリ内の様々な状態間のファイル差分を簡単に確認することを可能にします。マージコンフリクトの解消もVS Code上で行え、その際の比較ビューはコンフリクト解決に役立ちます。
標準機能だけでは実現できないフォルダ全体の比較や、より詳細なGit履歴の視覚化・比較には、Git HistoryやCompare Foldersといった高品質な拡張機能が非常に有効です。これらの拡張機能を活用することで、ファイル比較のワークフローをさらに強力にできます。
キーボードショートカットの活用、settings.jsonによる表示のカスタマイズ、code --diffコマンドの使用、ワークスペース設定の利用といったヒントとテクニックを取り入れることで、ファイル比較作業をより効率的に、そして自分のニーズに合わせてカスタマイズできます。
コードレビュー、設定ファイルの管理、環境間の設定比較、バージョンアップ時の変更点確認など、様々な応用シナリオでVS Codeのファイル比較機能が役立ちます。

ファイル比較は、開発やドキュメント作成、データ管理など、多くのデジタルワークフローにおいて品質と効率を向上させるための基本的なスキルです。VS Codeは、その優れた標準機能と豊富な拡張機能エコシステムにより、ファイル比較を行う上で最高の環境の一つと言えます。

この記事で紹介した手順や機能を参考に、ぜひVS Codeでのファイル比較を日々の作業に取り入れてみてください。変更点の正確な把握、問題の早期発見、そしてスムーズな共同作業が実現できるはずです。

あなたのVS Code活用スキルがさらに向上することを願っています！