VS Codeのdiff機能でコードの変更点を比較する方法

By /

VS CodeのDiff機能をマスターする：コードの変更点を詳細に比較する方法

ソフトウェア開発において、コードの変更履歴を追跡し、その変更内容を正確に理解することは、品質の高いコードを維持し、チーム開発を円滑に進める上で不可欠です。Visual Studio Code (VS Code) は、その優れたエディタ機能に加え、強力なバージョン管理システム（特にGit）との統合機能、そして洗練されたDiff（差分表示）機能を標準で提供しています。このDiff機能は、コードの変更点を視覚的に、かつ効率的に比較するための強力なツールです。

この記事では、VS CodeのDiff機能を深く掘り下げて解説します。基本的なファイル比較から、Gitとの連携による複雑な変更履歴の追跡、さらにはDiff Editorの詳細な設定や操作方法まで、VS CodeのDiff機能を最大限に活用するための知識とテクニックを網羅的に紹介します。初心者の方でも理解できるよう、基本的な概念から丁寧に説明し、より高度な使い方やトラブルシューティングについても触れていきます。この記事を読むことで、あなたはVS CodeのDiff機能を自信を持って使いこなし、日々の開発作業の効率と精度を格段に向上させることができるでしょう。

1. はじめに：Diff機能の重要性とVS Code

1.1 Diff機能とは何か？

「Diff」とは、”difference”（違い、差分）の略語で、二つのテキストファイルやコードスナップショットの間の違いを検出して表示するプロセスおよびその結果を指します。ソフトウェア開発においては、以下のような様々な場面でDiff機能が役立ちます。

  • 変更内容の確認: 自分が書いたコードが、前回の状態からどのように変わったかを確認する。
  • コードレビュー: 他の開発者が行った変更をレビューし、意図しない副作用やバグがないかを確認する。
  • コンフリクトの解決: 複数の開発者が同じ箇所のコードを変更した場合に発生するコンフリクトを、差分を見ながら解消する。
  • バグの原因特定: バグが混入したコミットを特定し、そのコミットに含まれる変更内容を確認する。
  • 異なるバージョンの比較: ライブラリやフレームワークの異なるバージョンのコードの違いを確認する。
  • ファイル間の比較: 類似したファイルや、コピーして修正したファイルの間で、具体的にどの部分が異なるかを確認する。

Diff機能は、これらの作業を効率的かつ正確に行うための、まさに開発者の「目」となる機能です。変更箇所が色分けされ、削除・追加・変更された行が一目でわかるため、手作業でコードを比較するよりもはるかに迅速かつ確実に違いを把握できます。

1.2 VS CodeにおけるDiff機能の位置づけ

VS Codeは、モダンなコードエディタとして、Diff機能を非常に強力かつ直感的に統合しています。特に、組み込みのGit連携機能と密接に結びついており、Gitリポジトリ内の変更をシームレスにDiff表示できます。

VS CodeのDiff機能は、主に以下の場所で利用できます。

  • ソース管理ビュー (Source Control View): Gitリポジトリの変更状態（ステージングされていない変更、ステージング済みの変更など）を表示し、個々のファイルに対するDiffを開くことができます。
  • エディタ領域 (Diff Editor): 二つのファイルまたはファイルの異なるバージョンを比較する際に、専用のDiff Editorが開かれます。左右にファイルが並べられ、変更箇所が強調表示されます。
  • インラインDiff: エディタ上でコードを編集している最中に、変更された行の横にインラインで差分情報（追加、削除、変更の有無）が表示されます。
  • コマンドパレット: ファイルを手動で比較するためのコマンドなどが提供されています。

VS CodeのDiff機能は、単に変更を表示するだけでなく、変更箇所のナビゲーション、個別の変更のステージングや破棄、さらにはGitのマージコンフリクト解決までサポートしており、日々の開発ワークフローに深く根ざしています。

この記事では、これらの機能一つ一つを詳しく見ていき、VS CodeのDiff機能を最大限に活用する方法を習得することを目指します。

2. VS CodeのDiff機能の基本

VS CodeでDiffを表示する際の基本的な概念と、表示方法について説明します。

2.1 Diffの基本的な表示：Diff Editor

VS Codeで何らかのDiff操作（例: 変更されたファイルをダブルクリック、二つのファイルを手動で比較）を行うと、通常は専用のDiff Editorが開かれます。

Diff Editorは、エディタ領域を二つのペインに分割して表示します。

  • 左ペイン: 比較元のファイルまたは古いバージョンのファイルが表示されます。
  • 右ペイン: 比較対象のファイルまたは新しいバージョンのファイルが表示されます。

二つのペインはスクロールが同期されるため、対応するコード行を容易に比較できます。

2.2 色分けによる変更箇所の強調表示

Diff Editorでは、変更箇所が直感的に理解できるように色分けされています。デフォルトのテーマ（例: Dark+, Light+）では、以下のような色分けが使用されます。

  • 緑色: 右側のファイルで追加された行やコードブロック。左側には存在しない行が表示されます。
  • 赤色: 左側のファイルで削除された行やコードブロック。右側には存在しない行が表示されます。
  • 青色: 左右のファイルの両方に存在するが、内容が変更された行。行全体の背景色が青くなり、さらに変更された文字や単語はより濃い色で強調表示されます。

この色分けにより、コードのどこがどのように変化したのかを一目で把握できます。

2.3 変更箇所のナビゲーション

Diff Editorの上部には、Diff固有のツールバーが表示されます。このツールバーには、変更箇所間を簡単に移動するためのボタンがあります。

  • 「次の差分へ移動 (Go to Next Difference)」: Diff Editor内で次に現れる変更箇所（緑、赤、青の色が付いたブロック）にカーソルを移動させます。
  • 「前の差分へ移動 (Go to Previous Difference)」: Diff Editor内で前に現れる変更箇所にカーソルを移動させます。

変更が多いファイルの場合でも、これらのボタン（または対応するキーボードショートカット）を使うことで、全ての変更箇所を効率的に確認できます。

2.4 インライン表示 vs. 並べて表示 (Side-by-Side vs. Inline View)

Diff Editorはデフォルトでは左右に並べて表示されます（Side-by-Side View）。しかし、設定によっては、変更箇所をエディタ内にインラインで表示するモードに切り替えることも可能です。

  • Side-by-Side View: 左ペインに古いコード、右ペインに新しいコードが表示され、変更箇所が隣り合う行に表示されます。全体像を把握しやすいです。
  • Inline View: エディタが分割されず、一つのペイン内に古いコードと新しいコードが連続して表示されます。変更された行の下に古いコードが表示される形式や、行頭に記号や色で変更の種類を示す形式などがあります。VS CodeのDiff Editorでは、Side-by-Side Viewが基本ですが、後述するインラインDiffはこれとは異なります。

VS Codeの標準のDiff EditorはSide-by-Side Viewがメインですが、エディタのgutter（行番号が表示される領域）に表示されるインラインDiff機能と組み合わせて使うことが多いです。

2.5 ミニマップ (Minimap)

Diff Editorでも、通常のエディタと同様にミニマップが表示されます。ミニマップ上には、変更箇所（緑、赤、青の領域）が小さなブロックとして表示されるため、ファイル全体のどこにどれくらいの変更があるのかを俯瞰的に把握するのに役立ちます。ミニマップ上の色付きブロックをクリックすることで、その変更箇所に直接ジャンプすることも可能です。

3. Gitとの連携によるDiff表示

VS CodeのDiff機能の最も強力な使い方は、組み込みのGit連携機能と組み合わせて使用することです。VS Codeは、現在のワークツリーの状態、ステージングされた変更、コミット履歴、ブランチなど、Gitリポジトリ内の様々な状態をDiff表示する機能を提供しています。

3.1 ソース管理ビュー (Source Control View)

サイドバーにあるソース管理ビュー（通常はGitアイコン）は、現在のリポジトリの状態を一覧表示するハブです。ここでDiff機能が頻繁に利用されます。

3.1.1 変更されたファイルの表示

ソース管理ビューを開くと、現在変更されているファイルがリストアップされます。通常、「変更 (Changes)」、「ステージ済みの変更 (Staged Changes)」、「マージの競合 (Merge Conflicts)」などのセクションに分類されます。

  • 「変更 (Changes)」セクション: ワークツリー内で修正したが、まだステージング（インデックスに追加）していないファイルが表示されます。
  • 「ステージ済みの変更 (Staged Changes)」セクション: git addでステージングしたが、まだコミットしていないファイルが表示されます。

3.1.2 ファイルのDiffを開く

これらのセクションに表示されているファイルをダブルクリックすると、そのファイルのDiff Editorが開かれます。

  • 「変更 (Changes)」セクションのファイルをダブルクリック: 現在のワークツリーの状態と、最新のコミット（またはステージング領域）の状態とのDiffが表示されます。左ペインは最新のコミット、右ペインは現在のワークツリーの状態です。
  • 「ステージ済みの変更 (Staged Changes)」セクションのファイルをダブルクリック: 最新のコミットの状態と、ステージング領域の状態とのDiffが表示されます。左ペインは最新のコミット、右ペインはステージング領域の状態です。

この操作により、ファイルを開いて手動で変更を探す手間なく、具体的な変更箇所をDiff Editorで確認できます。

3.1.3 ファイルリスト上での操作

ソース管理ビューのファイルリストでは、各ファイルの右クリックメニューから様々な操作を行うことができます。

  • 「変更を破棄 (Discard Changes)」: ワークツリーでの変更を全て元に戻し、最新のコミットの状態に戻します。
  • 「変更をステージ (Stage Changes)」: ワークツリーでの変更をステージング領域に追加します（git add相当）。
  • 「選択範囲をステージ (Stage Selected Ranges)」: ファイル全体ではなく、Diff Editorで選択した特定の変更箇所のみをステージングします（後述）。
  • 「比較対象を選択 (Select For Compare)」/「比較 (Compare)」: ファイルを手動で比較する機能です（後述）。
  • 「サイドバイサイドで開く (Open Side by Side)」: ソース管理ビューからファイルを選択した際に、直接Diff Editorで開きます（デフォルトのダブルクリック動作と同じ）。

3.2 インラインDiff表示 (Editor Gutter Diff)

VS Codeは、エディタ上でファイルを開いている最中に、そのファイルに対する未ステージングの変更をインラインで表示する機能を持っています。これは、エディタの左端にある「gutter」（行番号などが表示される領域）に表示されます。

  • 緑色のバー: 新しく追加された行を示します。
  • 赤色の三角形: 削除された行があった場所を示します。この三角形をクリックすると、削除された内容をポップアップで表示できます。
  • 青色のバー: 既存の行が変更されたことを示します。

これらのバーにマウスカーソルを合わせると、変更内容の簡単なポップアップが表示されます。また、青色のバーや赤色の三角形をクリックすると、その変更箇所の詳細なDiffが小さなウィンドウで表示され、変更内容を簡単に確認したり、ステージング/破棄したりすることができます。

このインラインDiff機能は、現在編集中のファイルにどのような変更が加えられているかをリアルタイムで把握するのに非常に便利です。settings.jsonで"git.decorations.enabled": true（デフォルトで有効）などの設定によって表示を制御できます。

3.3 Diff Editorからのステージング・元に戻す操作

VS CodeのDiff Editorは、単に変更を表示するだけでなく、変更内容を操作する機能も提供します。これは特にGit連携時に便利です。

Diff Editorを開いている状態で、変更箇所（緑、赤、青のブロック）にマウスカーソルを合わせると、左ペイン（古いコード側）の変更箇所の近くにアイコンが表示されることがあります。

  • 変更を破棄 (Discard Changes Icon – 通常は矢印): その特定の変更ブロック（「ハンク」と呼ばれることもあります）で行われた変更を元に戻し、最新のコミットの状態に戻します。ワークツリー上の変更にのみ適用できます。
  • 変更をステージ (Stage Changes Icon – 通常はプラス記号): その特定の変更ブロックをステージング領域に追加します。ワークツリー上の変更にのみ適用できます。

これらのアイコンを使うことで、ファイル全体ではなく、ファイル内の特定の変更箇所だけをステージングしたり、破棄したりすることが可能です。これは、一つのファイル内で複数の論理的な変更を行った場合に、それらを個別にコミットしたい場合に非常に役立ちます。

また、Diff Editorの上部ツールバーには、ファイル全体に対するステージング/破棄のボタンも表示されます。

  • ファイルをステージ (Stage File): ファイル全体の変更をステージングします。
  • ファイル全体を破棄 (Discard File): ファイル全体の変更を破棄します。

3.4 コミット間のDiffを表示する

VS Codeは、単にワークツリーの状態と最新コミットを比較するだけでなく、Gitリポジトリの履歴に含まれる任意の二つのコミット間での変更や、特定のコミットと現在のワークツリーの状態などを比較する機能も提供します。

これらの機能は、主に以下の方法で利用できます。

3.4.1 タイムラインビュー (Timeline View)

エクスプローラービューなどでファイルを選択し、下部の「タイムライン (Timeline)」パネルを開くと、そのファイルに対するコミット履歴が時系列で表示されます。

各コミットエントリにマウスカーソルを合わせると表示されるアイコンや、右クリックメニューから、様々なDiff操作が可能です。

  • 現在のファイルと比較 (Compare with Previous/Current File): そのコミット時点のファイルの状態と、現在のワークツリーの状態を比較します。
  • 直前のコミットと比較 (Compare with Previous Commit): そのコミット時点のファイルの状態と、その直前のコミット時点のファイルの状態を比較します。

3.4.2 Gitグラフ拡張機能との連携

VS Codeに「Git Graph」などのGit履歴表示拡張機能をインストールしている場合、より視覚的にコミット履歴を辿りながらDiffを表示できます。これらの拡張機能では、コミットグラフ上で二つのコミットを選択し、右クリックメニューから「Compare (diff) Commits」のような操作を行うことで、その二つのコミット間の変更全体（すべての変更されたファイルを含む）をDiff Editorで確認できます。

3.4.3 コマンドパレット/Gitコマンド

コマンドパレット（Ctrl+Shift+PまたはCmd+Shift+P）から「Git: Open File… From」などのコマンドを使って、特定のコミットハッシュを指定してファイルを開き、現在のファイルと比較することも可能です。

より高度な比較（例: 特定のブランチの先端と別のブランチの先端を比較）を行いたい場合は、統合ターミナルでgit diffコマンドを実行し、その結果をVS CodeのDiff Editorで開くように設定することも可能です（後述）。

3.5 ブランチ間のDiffを表示する

現在のブランチと別のブランチの間で、どのような変更の差があるかを確認したい場合もあります。

VS Codeの標準機能でこれを簡単に行うには、ステータスバーの左端に表示されている現在のブランチ名をクリックします。すると、ブランチ切り替えや作成のメニューが表示されますが、同時に「現在のブランチと他のブランチを比較 (Compare with other Branch…)」というオプションも表示されます。

このオプションを選択すると、比較したいブランチを選択するためのドロップダウンが表示されます。比較したいブランチを選択すると、ソース管理ビューに「HEAD と [選択したブランチ名] との比較」という特別な表示がされ、その二つのブランチ間で異なるファイルがリストアップされます。これらのファイルをダブルクリックすることで、Diff Editorで具体的な変更内容を確認できます。

この機能は、フィーチャーブランチをmainやdevelopブランチにマージする前に、どのような変更が含まれているかを確認するのに非常に便利です。

3.6 Gitマージコンフリクトの解決

Gitでマージやリベースを行った際にコンフリクトが発生すると、VS Codeはそれを検出し、ソース管理ビューに「マージの競合 (Merge Conflicts)」セクションを表示します。

コンフリクトが発生したファイルをダブルクリックすると、特別な「マージエディタ (Merge Editor)」が開かれます。このエディタは、Diff Editorを拡張したような表示になっており、以下の領域が表示されます。

  • 左ペイン: 「現在の変更 (Current Change – HEAD側の変更)」
  • 右ペイン: 「取り込みの変更 (Incoming Change – マージ元ブランチの変更)」
  • 下ペイン: 「結果 (Result – 最終的に確定させるコード)」

各変更箇所（コンフリクトしている部分）には、「現在の変更を取り込む (Accept Current)」、「取り込みの変更を取り込む (Accept Incoming)」、「両方の変更を取り込む (Accept Both Changes)」といった操作を選択できるボタンが表示されます。これらのボタンを使いながら、あるいは手動で結果ペインを編集しながらコンフリクトを解消していきます。

マージエディタは、基本的なDiff表示だけでなく、コンフリクトしているそれぞれの変更内容を理解し、意図した最終的なコードを効率的に作成するための専用ツールです。Diff機能が、単なる比較だけでなく、変更を操作する場面でも中心的な役割を果たす例と言えます。

4. 手動でのファイル/フォルダ比較

バージョン管理システムに管理されていないファイルや、異なるプロジェクトパスにあるファイルなど、任意の二つのファイルを比較したい場合もあります。VS Codeは、このような手動でのファイル比較機能も提供しています。

4.1 任意の二つのファイルを比較する

任意の二つのファイルをDiff Editorで比較する最も簡単な方法は、エクスプローラービューを使用することです。

  1. エクスプローラービューで、比較したい最初のファイルを右クリックします。
  2. コンテキストメニューから「比較のため選択 (Select for Compare)」を選択します。
  3. 次に、比較したい二つ目のファイルを右クリックします。
  4. コンテキストメニューから「比較 (‘ファイル名’) (Compare with ‘ファイル名’)」を選択します（メニュー項目は選択した一つ目のファイル名を含みます）。

この操作により、選択した二つのファイルがDiff Editorで開かれ、差分が表示されます。最初のファイルが左ペイン、二つ目のファイルが右ペインに表示されます。

エクスプローラービューだけでなく、開いているエディタタブでも同様の操作が可能です。タブを右クリックし「比較のため選択」を選び、別のタブを右クリックして「比較」を選ぶことで、現在開いている二つのファイルを比較できます。

4.2 コマンドパレットからのファイル比較

コマンドパレットからもファイル比較を開始できます。

  1. コマンドパレットを開きます（Ctrl+Shift+PまたはCmd+Shift+P）。
  2. 「File: Compare Active File With...」または「File: Compare Files...」と入力し、対応するコマンドを選択します。
  3. 「Compare Active File With...」を選択した場合、現在アクティブなエディタのファイルと比較したいファイルを選択するためのファイルピッカーが表示されます。
  4. 「Compare Files...」を選択した場合、比較したい一つ目のファイルを選択し、次に二つ目のファイルを選択するためのファイルピッカーが順番に表示されます。

これらのコマンドを使うことで、エクスプローラービューを使わずにファイル比較を開始できます。特に、ファイルパスが分かっている場合や、最近開いたファイルから選択したい場合に便利です。

4.3 フォルダ比較について

VS Codeには、二つのフォルダの内容（ファイルリストやサブフォルダ構造）を比較し、どのファイルが存在してどのファイルが存在しないか、そして存在するファイル間でどのような差があるかを確認するための標準機能は内蔵されていません。

ただし、以下の代替手段があります。

  • コマンドラインツール: diff -r (Linux/macOS) や comp / fc (Windows) といったコマンドラインツールを使ってフォルダ比較を実行し、その結果をターミナルで確認することができます。
  • VS Code拡張機能: VS Code Marketplaceには、フォルダ比較機能を提供する多くの拡張機能が存在します。「Diff Folders」、「Folder Compare」、「Compare Folders」などが人気のある拡張機能です。これらの拡張機能をインストールすることで、VS CodeのUI上でフォルダを選択し、内容の差分を確認できるようになります。多くの場合、拡張機能が提供するビューで差のあるファイルリストを確認し、個別のファイルをダブルクリックするとVS CodeのDiff Editorでファイル間の差分が開かれる、というワークフローになります。

したがって、VS Code単体でフォルダ比較を行うことはできませんが、拡張機能を活用することでその機能を追加することが可能です。

5. Diff Editorの詳細機能と操作

VS CodeのDiff Editorは、単に二つのバージョンを並べて表示するだけでなく、比較をより効率的かつ正確に行うための様々な機能や設定オプションを提供しています。

5.1 Diff EditorのUI要素

Diff Editorが開くと、エディタ領域は以下のような主要な要素で構成されます。

  • 左右のペイン: 左側に比較元、右側に比較対象のファイル内容が表示されます。
  • Diff Editorツールバー: エディタのタブバーの下に表示され、次の差分へ/前の差分へ移動するボタン、差分表示設定のトグルボタンなどが配置されます。
  • ミニマップ: ファイル全体の変更箇所の概要が表示されます。
  • スクロールバー: 左右のペインで同期されたスクロールバーと、ミニマップのスクロールバーがあります。
  • Gutter (ガター): 行番号などが表示される領域。Git連携時は、変更箇所の種類を示すインラインDiffマーカー（緑、赤、青のバー/三角形）が表示されます。

5.2 変更箇所のナビゲーションと概要

前述したツールバーのボタン（< と >）を使って、次の差分または前の差分にジャンプできます。これらの操作には便利なキーボードショートカットが割り当てられています。

  • 次の差分へ移動: F7 または Alt+F7 (プラットフォームによる)
  • 前の差分へ移動: Shift+F7 または Alt+Shift+F7 (プラットフォームによる)

これらのショートカットを覚えることで、マウスを使わずにキーボードだけで変更箇所を素早く移動できます。

また、Diff Editorの左端にあるGutterに表示される色付きのバーをクリックすると、その変更箇所の詳細がポップアップで表示されます。このポップアップには、元のコードと変更後のコードが表示され、変更をステージングしたり破棄したりするボタンが含まれます（Git連携時）。

5.3 差分表示の設定オプション

Diff Editorには、比較をより目的に合わせて調整するための表示設定がいくつかあります。これらの設定は、Diff Editorツールバーの右端にある歯車アイコンや、コマンドパレットからアクセスできる設定項目（diffEditor.*）で変更できます。

主要な設定オプションには以下のようなものがあります。

  • 空白文字を無視 (Ignore White Space): このオプションを有効にすると、行頭・行末の空白や、単語間の連続した空白など、空白文字のみの違いをDiffで無視します。これにより、インデントの変更など、コードの機能に影響しない書式設定の変更をノイズとして除外し、実質的なコードの変更のみに注目できます。ツールバーのアイコン（¶ または <=> のようなアイコン）でトグルできます。
  • 空行を無視 (Ignore Empty Lines): 空行の追加や削除をDiffで無視します。これも、コードのレイアウト変更をノイズとして除外したい場合に役立ちます。
  • インラインで単語の差分を表示 (Show Word Differences): 行全体が変更された場合（青色の行）、行内の具体的にどの単語や文字が変更されたかをインラインで強調表示するかどうかを設定します。デフォルトでは有効になっており、変更内容をより細かく確認できます。
  • 折り返し設定: Diff Editor内でも、通常のエディタと同様に行の折り返しを設定できます。長い行の差分を確認する際に便利です。
  • ミニマップ表示: ミニマップの表示/非表示を切り替えることができます。

これらの設定を適切に利用することで、自分が本当に確認したい種類の変更点に焦点を当て、ノイズを減らすことができます。特に「空白文字を無視」は、多くの開発者にとって非常に便利なオプションです。

5.4 Diff Editor上での変更の適用 (マージ)

Git連携時、Diff Editorは単なる表示ツールにとどまらず、変更を操作するインターフェースとしても機能します。前述したように、Gitの「変更 (Changes)」セクションのファイルDiffを開くと、左ペインはHEAD（最新コミット）、右ペインはワークツリーの状態を示します。

このDiff Editor上で、個別の変更ブロック（ハンク）に対して以下のような操作が可能です。

  • ワークツリーの変更をステージ: 右ペインの変更ブロックのGutterに表示されるプラスアイコンをクリックすると、その変更ブロックのみをステージング領域に追加できます。
  • ワークツリーの変更を破棄: 左ペインの変更ブロックのGutterに表示される矢印アイコンをクリックすると、右ペイン（ワークツリー）のその変更ブロックを破棄し、左ペイン（HEAD）の内容に戻すことができます。

これらの操作により、一つのファイル内の複数の変更を、ステージングするかどうか、破棄するかどうかを個別に判断しながら作業を進めることができます。これは、コミットを論理的なまとまりに分割する「インデックスの概念」をDiff Editor上で視覚的に操作できることを意味します。

手動でのファイル比較の場合、Diff Editor上で直接的に変更を「適用」する機能はありません。Diff Editorはあくまで比較表示ツールとして機能します。変更を反映させたい場合は、Diff Editorを見ながら、通常のエディタで手動でコードをコピー＆ペーストするなどして編集する必要があります。ただし、Git連携時は、Diff Editorがよりリッチな操作インターフェースとなる点が重要です。

5.5 Diff Editorのカスタマイズ

Diff Editorの外観や振る舞いは、VS Codeの他のエディタと同様に、settings.jsonを通じて様々なカスタマイズが可能です。

主な設定項目はdiffEditor.*のプレフィックスを持ちます。例：

  • "diffEditor.ignoreTrimWhitespace": true: 行頭・行末の空白を無視する。
  • "diffEditor.renderSideBySide": true: Diffを並べて表示するかどうか（デフォルト）。
  • "diffEditor.wordWrap": "on": 行の折り返し設定。
  • "diffEditor.hideUnchangedRegions.enabled": "enabled": 変更されていない長大なコードブロックを折りたたんで表示し、変更箇所だけを際立たせる機能。（比較的新しい機能）
  • "diffEditor.hideUnchangedRegions.contextLineCount": 3: 折りたたまれた変更なし領域の、変更箇所の前後に表示する行数。
  • "diffEditor.maxComputationTimeout": 5000: Diff計算の最大タイムアウト時間（ミリ秒）。非常に大きなファイルでDiff計算に時間がかかりすぎる場合に調整。

これらの設定を調整することで、Diff Editorを自分の作業スタイルや好みに合わせて最適化できます。

6. Diff機能の高度な使い方と連携

VS CodeのDiff機能は、単体で使用するだけでなく、他のツールや機能と連携させることで、さらに強力なワークフローを構築できます。

6.1 Gitコマンドとの連携

VS Codeの組み込みGit機能は非常に便利ですが、時にはコマンドラインでのgit diffコマンドを使いたい場合もあるでしょう。VS Codeは、外部のDiffツールとして自身を設定することをサポートしています。

git configコマンドを使って、GitがDiffを表示する際にVS CodeのDiff Editorを使用するように設定できます。

まず、VS CodeをGitのDiffツールとして設定するスクリプトを準備します。VS Codeの公式ドキュメントや多くの情報源で推奨されている設定方法は、以下のGit設定を追加することです。

bash
git config --global diff.tool vscode
git config --global difftool.vscode.cmd "code --wait --diff \"$LOCAL\" \"$REMOTE\""
git config --global difftool.prompt false

これらのコマンドを実行すると、以降git difftoolコマンドを実行した際に、DiffがVS CodeのDiff Editorで開かれるようになります。

  • git config --global diff.tool vscode: GitのデフォルトのDiffツールをvscodeという名前に設定します。
  • git config --global difftool.vscode.cmd "code --wait --diff \"$LOCAL\" \"$REMOTE\"": vscodeツールが実行されたときに呼び出すコマンドを指定します。code --waitはVS Codeを起動し、VS Codeが閉じるまでコマンドの実行を待機させます。--diff "$LOCAL" "$REMOTE"はVS Codeに二つのファイルパス（Gitが渡す比較対象ファイル）を渡してDiff Editorを開くよう指示します。
  • git config --global difftool.prompt false: 各ファイルのDiffを開く前に確認プロンプトを表示しないようにします。

この設定をしておくと、コマンドラインでgit difftool <commit1> <commit2> <file>のように実行した際に、指定した二つのコミット間での指定したファイルのDiffがVS Codeで開かれるようになり、VS CodeのリッチなDiff Editorを使って確認できます。

同様に、マージツールとしてもVS Codeを設定できます。

bash
git config --global merge.tool vscode
git config --global mergetool.vscode.cmd "code --wait --merge \"$REMOTE\" \"$LOCAL\" \"$BASE\" \"$MERGED\""
git config --global mergetool.vscode.trustExitCode false
git config --global mergetool.prompt false

この設定をしておくと、git mergetoolを実行した際に、コンフリクトしたファイルがVS Codeのマージエディタで開かれるようになります。

6.2 拡張機能による機能強化

VS CodeのDiff機能は標準でも強力ですが、拡張機能をインストールすることでさらに機能を強化したり、関連する機能を利用したりできます。

  • GitLens: 最も人気のあるGit拡張機能の一つです。エディタの行ごとに誰がいつその行を変更したか（Git Blame）を表示したり、Git履歴をより詳細に表示・検索したり、コミット間やブランチ間などの高度なDiff比較をUIから簡単に行える機能を提供します。Diff Editor上で、変更された行にカーソルを合わせると、その変更がどのコミットで導入されたかなどの情報が表示される機能もあります。Diff機能を日常的に多用する開発者にとって、GitLensは必須とも言える拡張機能です。
  • Compare Folders: 前述したように、フォルダ比較機能を提供します。二つのフォルダを選択し、ファイルやサブフォルダの差分を一覧で表示し、個別のファイルDiffをVS Codeで開くことができます。
  • Partial Diff: エディタ内の選択したテキスト範囲同士をDiff表示する拡張機能です。ファイル全体ではなく、コードスニペットや関数単位での細かい比較を行いたい場合に便利です。
  • Diff: VS Code標準のDiff機能とは別に、独自のDiffビューを提供したり、異なる形式のDiff（例: Unified Diff形式）を扱う拡張機能もあります。

これらの拡張機能を活用することで、VS CodeのDiff機能をさらに自分のニーズに合わせてカスタマイズし、開発ワークフローを効率化できます。

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

Diff機能を素早く効率的に使うためには、関連するキーボードショートカットを覚えることが非常に重要です。主要なショートカットをいくつか紹介します。

  • Diff Editorでの移動:
    • F7: 次の差分へ移動
    • Shift+F7: 前の差分へ移動
    • 多くのプラットフォームでAlt+F7 / Alt+Shift+F7も同様の機能に割り当てられています。
  • ソース管理ビュー関連:
    • Ctrl+Shift+G (or Cmd+Shift+G): ソース管理ビューを開く/閉じる
  • ファイル比較関連:
    • コマンドパレットから「File: Compare Active File With…」などを呼び出すショートカット（デフォルトでは設定されていませんが、キーボードショートカット設定から自分で割り当てることができます）。
  • Diff Editor設定のトグル:
    • Diff Editorツールバーの設定アイコンに対応するショートカットも、キーボードショートカット設定から確認・変更できます。例えば、「空白文字を無視」のトグルなど、よく使う設定にはショートカットを割り当てると便利です。

キーボードショートカットの設定は、Ctrl+K Ctrl+S (or Cmd+K Cmd+S) でキーボードショートカットエディタを開き、「diff」や「git」などのキーワードで検索して確認・変更できます。自分の手に馴染むようにカスタマイズすることで、Diff作業の速度が劇的に向上します。

7. トラブルシューティング

VS CodeのDiff機能を使用する上で、意図したように表示されない、または予期しない表示になる場合があります。ここでは、一般的なトラブルシューティングのヒントをいくつか紹介します。

7.1 Diffが表示されない場合

  • Gitリポジトリか確認: 比較しようとしているファイルが含まれているフォルダが、有効なGitリポジトリとして初期化されているか確認してください（.gitフォルダが存在するか）。Git連携のDiff機能は、Gitリポジトリ内でしか機能しません。
  • 変更があるか確認: ソース管理ビューでファイルが表示されない場合、そのファイルにはGitが検出する変更がない可能性があります。実際にコードを変更してみて、ソース管理ビューに表示されるか確認してください。
  • ステージング状態を確認: 変更が「変更 (Changes)」セクションではなく、「ステージ済みの変更 (Staged Changes)」セクションに表示されていないか確認してください。
  • ファイルパスを確認: 手動比較の場合、正しいファイルパスを指定しているか確認してください。ファイル名が同じでも、場所が異なれば別のファイルと見なされます。
  • VS Codeの再起動: 一時的な問題の場合、VS Codeを一度終了して再起動すると解消することがあります。
  • Gitの状態を確認: ターミナルでgit statusを実行し、Gitがファイルをどのように認識しているか（変更されているか、追跡されているかなど）を確認してください。

7.2 意図しないDiffが表示される場合

  • 改行コードの違い: Windows (CRLF) と Unix/macOS (LF) では改行コードが異なります。.gitattributesファイルで改行コードの自動変換を設定していない場合、共同作業者との間で改行コードの違いがDiffとして表示されることがあります。VS Codeの右下ステータスバーで現在のファイルの改行コードを確認できます。Diff Editorの設定で改行コードの違いを無視するオプションは標準では提供されていませんが、.gitattributesでの設定が推奨されます。
  • 空白文字の違い: 行頭・行末の空白や、タブとスペースの混在などがDiffとして表示されることがあります。Diff Editorの設定で「空白文字を無視 (Ignore White Space)」オプションを有効にすると、これらの違いを無視できます。エディタの設定で、保存時に自動的に空白を整理するオプション（例: "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true）を有効にすることも、将来的な不要なDiffを防ぐのに役立ちます。
  • エンコーディングの違い: ファイルのエンコーディング（UTF-8、Shift-JISなど）が異なると、ファイル内容が同じに見えてもDiffが発生することがあります。VS Codeの右下ステータスバーでファイルのエンコーディングを確認・変更できます。プロジェクトで扱うファイルのエンコーディングを統一することが重要です。Git設定でエンコーディングに関する設定を行うことも可能です。
  • ファイルの末尾の改行: ファイルの末尾に改行があるかないかだけでもDiffとして検出されます。多くの規約ではファイルの末尾には改行を入れることが推奨されています。VS Codeの設定"files.insertFinalNewline": trueで、保存時に自動的に末尾に改行を追加できます。

7.3 大容量ファイルのDiffに関するパフォーマンス問題

非常に大きなファイルをDiff表示しようとすると、VS Codeの動作が重くなったり、Diff計算に時間がかかったりすることがあります。

  • settings.jsonで"diffEditor.maxComputationTimeout"の値を調整することができますが、値を大きくしすぎるとVS Codeがフリーズする可能性もあります。
  • 巨大なファイルの変更をレビューする場合は、ファイルを分割したり、特定の変更箇所に絞ってDiffを確認したり、あるいはコマンドラインのgit diffでUnified Diff形式の出力を見て確認するなどの代替手段を検討してください。

これらのトラブルシューティングのヒントを参考に、Diff表示に関する問題を解決してください。多くの場合、ファイルエンコーディング、改行コード、空白文字といった細かい設定や規約の不一致が原因であることが多いです。

8. まとめ

この記事では、VS Codeの強力なDiff機能について、基本的な使い方からGit連携、手動比較、Diff Editorの詳細な設定と操作、さらには高度な使い方やトラブルシューティングまで、幅広く解説しました。

VS CodeのDiff機能は、コードの変更点を視覚的に、かつ効率的に確認するための開発者にとって不可欠なツールです。

  • Git連携: ソース管理ビューを通じて、ワークツリー、ステージング領域、コミット履歴、ブランチ間など、様々なGitの状態における変更点を簡単にDiff表示できます。
  • Diff Editor: 左右にコードを並べ、色分けと強調表示で変更箇所を明確に示します。変更箇所のナビゲーションや、個別の変更ブロックに対するステージング・破棄といった操作も可能です。
  • インラインDiff: エディタ上で編集中のファイルの変更箇所をリアルタイムで表示し、簡単な確認や操作をサポートします。
  • 手動比較: Git管理下にないファイルでも、エクスプローラービューやコマンドパレットから簡単に二つのファイルを比較できます。フォルダ比較は標準では提供されませんが、拡張機能で補うことができます。
  • 詳細設定: 空白文字の無視など、Diff表示の振る舞いを細かく設定することで、ノイズを減らし、本当に重要な変更点に集中できます。
  • 高度な連携: git difftoolとしてVS Codeを設定したり、GitLensなどの拡張機能と組み合わせることで、さらに強力なDiff/履歴確認ワークフローを構築できます。

これらの機能をマスターすることで、コードレビュー、バグの特定、マージコンフリクトの解決、そして日々のコード修正といった様々な開発タスクを、より正確に、より迅速に行えるようになります。

Diff機能は、単に「違いを見つける」ツールではなく、「変更の意図を理解し、コードの進化を追跡する」ための重要なインターフェースです。VS Codeの洗練されたDiff機能を日々の開発に積極的に取り入れ、あなたのコーディングライフをさらに豊かにしてください。

さらなる学習としては、Git自体の概念やコマンド（diff, log, reflog, rebaseなど）を深く理解することが、VS CodeのDiff機能をより効果的に活用するための土台となります。また、チーム内で一貫したGit運用ルールやコーディング規約（特に改行コード、空白文字、エンコーディングに関するもの）を定めることは、不要なDiffを減らし、コードレビューを円滑に進める上で非常に重要です。

この記事が、あなたがVS CodeのDiff機能を最大限に引き出し、より生産的な開発者となるための一助となれば幸いです。

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール