プログラミングやファイル編集をしていると、「あれ、このファイルとあのファイル、どこが違うんだろう？」と困ることってありませんか？
コードを修正した後に元のファイルと見比べたい時、サンプルコードと自分のコードを照合したい時、バージョン管理で変更箇所を確認したい時など、ファイルの差分を調べたいシーンは意外と多いものです。
実は、VSCode（Visual Studio Code）には、2つのファイルを簡単に比較できる機能が最初から備わっています。わざわざ別のツールをインストールする必要はありません。
この記事では、VSCodeでファイルを比較する複数の方法を、初心者の方にも分かりやすく解説していきます。
VSCodeのファイル比較機能（diff機能）とは？
VSCodeのファイル比較機能は、「diff機能」や「Compare機能」とも呼ばれ、2つのファイルの内容を並べて表示し、異なる部分を色分けして強調表示してくれる便利な機能です。
diff（ディフ） というのは「difference（違い）」の略で、ファイル間の差分を意味します。
この機能を使うと、以下のような色分けで違いが一目で分かります。
- 緑色の背景：追加された行や文字
- 赤色の背景：削除された行や文字
- 青色の背景：変更された行や文字
変更箇所が視覚的にハッキリ分かるので、手作業で見比べる手間が大幅に省けます。
【基本】コマンドパレットでファイルを比較する方法
まずは最も基本的な方法として、コマンドパレットを使った比較方法をご紹介します。
手順1：比較したいファイルを開く
最初に、比較したい2つのファイルのうち、どちらか1つをVSCodeで開いてください。このファイルを「アクティブファイル」と呼びます。
手順2：コマンドパレットを開く
次に、コマンドパレットを開きます。コマンドパレットとは、VSCodeの様々な機能を呼び出すための検索窓のようなものです。
- Windows/Linux：
Ctrl+Shift+P - Mac：
Command+Shift+P
または、メニューバーから「表示」→「コマンドパレット」を選んでもOKです。
手順3：比較コマンドを選択
コマンドパレットが開いたら、「比較」または「Compare」と入力してください。
すると、以下のような選択肢が表示されます。
- ファイル: アクティブ ファイルを比較しています… (File: Compare Active File With…)
- ファイル: クリップボードとアクティブ ファイルを比較 (File: Compare Active File with Clipboard)
- ファイル: 保存済みとアクティブ ファイルを比較 (File: Compare Active File with Saved)
今回は1番目の「ファイル: アクティブ ファイルを比較しています…」を選択しましょう。
手順4：比較対象のファイルを選ぶ
次の画面で、比較したい2つ目のファイルを選択してください。「最近開いたファイル」の一覧や、フォルダから直接選ぶこともできます。
手順5：差分を確認する
ファイルを選択すると、画面が左右に分割され、2つのファイルが並んで表示されます。
- 左側：最初に開いていたアクティブファイル
- 右側：比較対象として選んだファイル
違いがある行は色付きで強調表示され、どこが異なるのかが一目瞭然になります。
【便利】エクスプローラーから右クリックで比較する方法
マウス操作が得意な方には、こちらの方法がおすすめです。
手順1：エクスプローラーを開く
VSCodeの左側にある「エクスプローラー」アイコン（フォルダのマーク）をクリックして、ファイル一覧を表示します。
手順2：1つ目のファイルを右クリック
比較したい1つ目のファイルを右クリックして、メニューから「比較対象の選択」（Select for Compare）を選びます。
手順3：2つ目のファイルを右クリック
続いて、比較したい2つ目のファイルを右クリックして、「選択項目と比較」（Compare with Selected）を選択してください。
これで、2つのファイルの差分が自動的に表示されます。
補足：複数ファイルを選択する方法
- Windows/Linux：
Ctrlキーを押しながら2つのファイルをクリック - Mac：
Commandキーを押しながら2つのファイルをクリック
その後、右クリックして「選択項目を比較」を選ぶと、一度の操作で比較画面が開けます。
【上級者向け】コマンドラインからファイルを比較する方法
ターミナルやコマンドプロンプトに慣れている方には、コマンドライン経由での比較もおすすめです。
手順：コマンドを実行する
ターミナル（コマンドプロンプト）を開き、以下のコマンドを入力します。
code --diff ファイル1のパス ファイル2のパス実行例：
code --diff /Users/username/sample1.txt /Users/username/sample2.txtこのコマンドを実行すると、VSCodeが自動的に起動し、2つのファイルの差分が表示されます。
codeコマンドが使えない場合
もし「codeコマンドが見つかりません」というエラーが出た場合は、VSCodeのコマンドラインツールをインストールする必要があります。
- VSCodeを開く
- コマンドパレットを開く（
Ctrl+Shift+PまたはCommand+Shift+P） - 「Shell Command: Install ‘code’ command in PATH」と入力して選択
これでターミナルからcodeコマンドが使えるようになります。
クリップボードの内容と比較する方法
インターネット上で見つけたコードや、別の場所からコピーしたテキストと、今開いているファイルを比較したい場合に便利な機能です。
手順1：コピーしたい内容をクリップボードにコピー
まず、比較したいテキストやコードをコピー（Ctrl + C または Command + C）しておきます。
手順2：比較したいファイルを開く
VSCodeで比較対象のファイルを開いてアクティブにします。
手順3：コマンドパレットから比較を実行
コマンドパレットを開き、「ファイル: クリップボードとアクティブ ファイルを比較」（File: Compare Active File with Clipboard）を選択します。
すると、クリップボードにコピーした内容と、現在のファイルの差分が表示されます。
わざわざファイルとして保存しなくても比較できるので、ちょっとした確認に最適です。
保存前と保存後の内容を比較する方法
ファイルを編集中に、「最後に保存した状態と今の状態、どこが違うんだっけ？」と確認したい時に使える機能です。
手順：コマンドパレットから実行
- 編集中のファイルをアクティブにする
- コマンドパレットを開く
- 「ファイル: 保存済みとアクティブ ファイルを比較」（File: Compare Active File with Saved）を選択
これで、最後に保存した状態と現在の編集状態の差分が表示されます。
保存前に変更内容を最終確認したい時や、うっかり変更してしまった箇所を見つけたい時に便利です。
【応用】フォルダごと比較する方法
「プロジェクト全体で何が変わったか知りたい」「2つのフォルダの中身を一括で比較したい」という場合は、拡張機能を使います。
Diff Folders拡張機能をインストール
- VSCodeの左側にある「拡張機能」アイコン（四角が4つ並んだマーク）をクリック
- 検索ボックスに「Diff Folders」と入力
- 検索結果から「Diff Folders」を見つけてインストール
フォルダを比較する手順
- コマンドパレットを開く
- 「Diff Folders」と入力して選択
- 左側と右側のフォルダをそれぞれ指定
- 「Compare」ボタンをクリック
すると、2つのフォルダ内のファイルが比較され、以下のように色分けされます。
- 緑色：追加されたファイル
- 赤色：削除されたファイル
- 黄色：変更されたファイル
- 白色：変更なし
個々のファイルをクリックすれば、その差分も確認できます。
Git統合で変更履歴を確認する方法
VSCodeはGitと連携しているので、バージョン管理されたファイルの変更履歴も簡単に確認できます。
変更されたファイルの差分を見る
- 左側の「ソース管理」アイコン（分岐マークのアイコン）をクリック
- 「変更」セクションに表示されているファイルをクリック
すると、変更前（最後のコミット時点）と変更後（現在の状態）の差分が自動的に表示されます。
過去のコミットとの比較
タイムラインビューを使えば、過去の任意のバージョンとも比較できます。
- エクスプローラーでファイルを選択
- 下部の「タイムライン」パネルを開く
- 比較したいコミットを選択
Git管理しているプロジェクトなら、この方法が最もスムーズに変更履歴を追えます。
差分表示画面の便利な機能
差分表示画面には、比較作業を快適にする便利な機能がいくつか用意されています。
左右を入れ替える
画面上部にある「左側と右側を入れ替える」ボタンをクリックすると、左右のファイルの表示位置を入れ替えられます。
「どちらを基準にして見たいか」によって、見やすい配置に調整できます。
インラインビューに切り替え
差分を左右に並べるのではなく、1つの画面にまとめて表示する「インラインビュー」に切り替えることもできます。
画面上部の「インラインビュー」ボタンをクリックすると、変更箇所が上下に並んで表示され、小さい画面でも見やすくなります。
差分間を移動する
複数の変更箇所がある場合、画面上部の矢印アイコン（← →）をクリックすることで、次の差分へジャンプできます。
キーボードショートカットも用意されています。
- 次の差分へ：
Alt+F5 - 前の差分へ：
Shift+Alt+F5
長いファイルでも、変更箇所だけを効率的に確認できます。
まとめ：状況に応じて使い分けよう
VSCodeのファイル比較機能には、様々な方法が用意されています。それぞれの特徴を理解して、状況に応じて使い分けましょう。
コマンドパレットでの比較は、キーボード操作が中心で素早く実行できます。
エクスプローラーからの右クリック比較は、マウス操作が得意な方に向いています。
コマンドラインからの比較は、スクリプトや自動化に活用できます。
クリップボードとの比較は、ファイル化せずに手軽にチェックしたい時に便利です。
フォルダ比較は、プロジェクト全体の変更を把握したい時に最適です。
Git統合は、バージョン管理されたファイルの履歴確認に最も効率的です。
どの方法も、VSCodeに標準で備わっている（またはすぐに追加できる）機能なので、普段の作業に合わせて自由に使ってみてください。
ファイルの差分確認が必要になった時は、ぜひこの記事を思い出して、効率的な比較方法を活用してくださいね。
コメント