vscodeのgit差分比較をマスター！基本と応用【完全版】

日々の開発業務で、Visual Studio Code (VSCode) を使ったGit操作は今や欠かせないものとなりました。しかし、vscodeでの差分比較やgit操作で、想定通りにいかず戸惑った経験はありませんか。

VSCodeでgit diffを実行したのに差分が表示されない、特定のブランチ比較や差分を左右で表示する方法がわからない、といった経験は、実は多くの開発者が一度は通る道です。これらの基本的なつまずきは、開発の勢いを削いでしまうことも少なくありません。

また、より効率的な開発を目指す中で、強力な拡張機能であるGitLensを導入したものの、ブランチ比較の操作に迷ったり、UIの変更で以前あったはずのSEARCH & COMPAREの項目が見つからなくなったりと、新たな疑問に直面することもあるでしょう。さらに、コードレビューのために差分ファイルを出力する必要に迫られる場面も考えられます。

この記事では、これらのあらゆる疑問や課題を一つひとつ丁寧に解消し、VSCodeにおけるGitの差分比較、すなわちvscode 差分 比較 gitに関する操作全般を、基礎の基礎からプロフェッショナルな応用テクニックまで、網羅的に解説していきます。

vscodeでgit差分比較を行う基本手順

VSCodeでのgit差分(diff)の基本的な使い方

VSCodeの大きな魅力の一つは、コマンドを直接入力することなく、直感的で視覚的なGUI操作でGitの差分を確認できる点にあります。これは、ターミナルでgit diffコマンドを実行した結果を、VSCodeがリアルタイムで分かりやすく表示してくれる機能であり、CUI操作に不慣れな方でも安心して変更内容を正確に把握できます。

ソース管理タブからの差分確認

最も基本的かつ頻繁に利用するのが、画面左のアクティビティバーにある「ソース管理」タブ（木の枝が分岐したようなアイコン）です。キーボードショートカットの Ctrl+Shift+G (macOSでは ^⇧G) を押すことでも、どの画面からでも素早くアクセス可能です。このパネルには、Gitが追跡しているファイルのうち、前回のコミットから変更があったものが一覧表示されます。

このリストから内容を確認したいファイル名をクリックするだけで、エディタ画面が自動的に差分表示モード（Diff Editor）に切り替わります。これにより、ターミナルとエディタを行き来する必要なく、シームレスに変更内容の確認作業が行えます。

差分表示の色分けとガター表示

差分エディタでは、変更内容が色分けして表示され、一目で変更点を理解できます。

さらに、通常の編集画面でも、行番号の横にあるエリア（ガター）に色が付くことで、保存されていない変更をリアルタイムに知ることができます。緑は追加行、青は変更行、赤の三角は削除行を示しており、差分画面を開くまでもなく変更箇所を把握できる非常に便利な機能です。

「変更」と「ステージされた変更」の違いを理解する

ソース管理パネルは、通常「変更」と「ステージされた変更」という2つのセクションに分かれています。これはGitの「コミットの準備」という概念に直接対応しており、それぞれの差分の意味を理解することが、Gitを使いこなす上で極めて重要です。

VSCodeでは、これらのセクションにあるファイルをクリックするだけで、それぞれに対応する差分を簡単に確認できるため、コミット前に内容を精査する作業が非常に効率的になります。

差分が見やすいVSCode Git 左右表示

VSCodeの差分エディタは、表示形式を「左右に並べるビュー（Side-by-Side View）」と「インラインビュー（Inline View）」の2種類から自由に選択できます。プロジェクトのコーディング規約や個人の好み、あるいは変更内容の性質によって最適な表示形式は異なりますので、いつでもスムーズに切り替えられるよう設定方法を覚えておきましょう。

表示形式の切り替え方法

差分表示形式の切り替えは、差分エディタの右上にある「...」（その他のアクション）アイコンから直感的に行えます。クリックすると表示されるメニューから「インラインビューに切り替える」または「並べて表示ビューに切り替える」を選択するだけで、即座に表示が切り替わります。

また、常にどちらかの表示をデフォルトにしたい場合は、設定画面から変更するのがおすすめです。

表示形式	メリット	デメリット
左右表示	変更前後のコードを並べて比較でき、 全体的な構造の変更や行の移動を 把握しやすい。 最も標準的で分かりやすい表示方法です。	横幅の広いモニターでないと、 長いコードが折り返されてしまい、 かえって可読性が落ちることがあります。
インライン表示	縦長の画面スペースを有効活用でき、 リファクタリングで一行が 長くなった場合など、特定の行に対する 変更の詳細を追いやすいです。	削除された行と追加された行が 前後に並ぶため、多くの行が 変更されている場合は全体像が 掴みにくくなることがあります。

私の場合、基本は「左右表示」で全体を確認し、正規表現や長いURLなど、一行の中での細かい変更を確認したい場合に「インライン表示」に切り替える、という使い方をしています。また、差分箇所への移動はショートカットキーのF7（次の差分へ）とShift+F7（前の差分へ）を使うと格段に速くなりますよ。

基本的なVSCodeでのGitのブランチ比較の方法

チームでの開発作業において、現在作業中のブランチと他のブランチ（例えば、チームの共有ブランチであるmainやdevelop）との差分を確認する場面は非常に多いです。この操作は、プルリクエスト（Merge Request）を作成する前の最終確認として、あるいは他のメンバーの変更を取り込む（マージする）際にどのような変更が行われるかを事前に把握するために不可欠なプロセスです。

コマンドパレットを利用した比較

VSCodeの標準機能だけでも、簡単かつパワフルなブランチ間差分比較が可能です。最も手軽なのは、あらゆる操作の起点となるコマンドパレットを使用する方法です。

この操作が完了すると、ソース管理パネルの「結果」セクションに、選択した2つのブランチ間で差分のあるファイルが一覧表示されます。各ファイルをクリックすれば、通常通り詳細な差分を確認できます。

ブランチ選択の順番が重要

比較するブランチを選択する順番によって、差分の表示（どちらが変更前でどちらが変更後か）が変わる点に注意してください。基本的には、「基準ブランチ（古い状態）」→「自分の作業ブランチ（新しい状態）」の順で選択すると、変更内容が直感的に理解しやすくなります。

応用的なVSCodeでのブランチ比較とは

大規模な機能開発や長期間にわたるリファクタリングを行っていると、ブランチ間の差分ファイルが数十、時には数百に及ぶこともあります。このような状況で全ての差分を一つひとつ確認するのは非常に時間がかかり、レビューの質も低下しかねません。そこで、比較する範囲を絞り込んだり、比較の「基準」を変えたりする応用的なテクニックが役立ちます。

特定のディレクトリやファイルに絞って比較する

例えば、フロントエンドの改修のみを行ったブランチで、src/components/ディレクトリ以下の差分だけを集中して確認したい、というケースを考えます。このような場合、VSCodeに統合されたターミナルで、以下のようにコマンドの末尾にパスを指定するのが有効です。

git diff main feature-branch -- src/components/

このコマンドは、mainブランチとfeature-branchの全ての差分のうち、指定したディレクトリパス配下のものだけをフィルタリングして表示します。これにより、関心のある変更だけに集中できます。

2-dot diff vs 3-dot diff

もう一つの重要な応用テクニックが、「3-dot diff」の概念を理解することです。

この3-dot diffは、GitHubなどのプルリクエストでデフォルトで表示される差分と同じものです。「このプルリクエストでレビューすべきコードはどこか」を正確に把握する際に非常に便利なため、覚えておくと良いでしょう。

拡張機能GitLensを使ったブランチ比較

VSCodeの標準機能でもブランチ比較は十分に可能ですが、拡張機能「GitLens — Git supercharged」を導入することで、その操作性、視認性、そして機能性は別次元へと進化します。GitLensは、VSCodeでのGit体験をあらゆる面で強化してくれる、現代のVSCode開発環境において事実上の標準（デファクトスタンダード）とも言える必須の拡張機能です。

ソース管理パネルからの超直感的な操作

GitLensをインストールすると、ソース管理パネルのUIが大幅に強化されます。ここから、マウス操作だけで非常に簡単かつスピーディにブランチ比較を開始できます。

この一連の流れは非常にスムーズで、一度慣れるとコマンドパレットの操作には戻れないほどの快適さです。

Working Tree（現在の作業内容）との比較も一瞬

GitLensの強力な機能の一つが、まだコミットしていない現在の変更内容（Working Tree）と、任意のブランチを直接比較できる点です。

比較アイコンをクリックする際に、Altキー（macOSではOptionキー）を押しながらクリックしてみてください。すると、「Compare Working Tree with...」モードになり、コミットする前の変更がマージ先にどのような影響を与えるかを事前に、かつ正確に確認できます。

vscodeのgit差分比較を使いこなす応用技

Git差分ファイルを出力するには

コードレビューを他の人に依頼する際や、変更履歴をドキュメントとして保存しておきたい場合、あるいは手動で他の環境に変更を適用したい場合など、差分の内容を単一のファイルとして出力したいというニーズがあります。この操作は、一般的に「パッチファイルを作成する」と呼ばれ、Gitの標準機能としてサポートされています。

ターミナルからパッチファイルを作成する

最も確実で柔軟性が高い方法は、VSCodeに統合されたターミナルからgit diffコマンドの「リダイレクト」という標準機能を利用することです。これにより、コマンドの出力結果を画面に表示する代わりに、ファイルに書き出すことができます。

こうして作成された.patchファイルは、中身はただのテキストファイルですが、git applyというコマンドで他のリポジトリに同じ変更を再現（適用）させることが可能です。

差分エディタから必要な部分だけをコピーする

もっと手軽な方法として、VSCodeの差分エディタから直接内容をコピー＆ペーストする方法もあります。これは、パッチファイルのような厳密さは不要で、単にSlackやメールなどで「ここの変更どう思う？」とスニペットを共有したい場合に特に便利です。

差分エディタで必要な範囲をマウスで選択し、Ctrl+Cでコピーするだけです。変更前後の両方のコードが必要な場合でも、VSCodeがよしなに整形してクリップボードにコピーしてくれるため、非常に手軽です。

Git差分が表示されない時の原因

「ファイルを確かに変更したはずなのに、VSCodeのソース管理に差分が全く表示されない…」という問題は、特にGitを使い始めたばかりの方が遭遇しやすい代表的なトラブルです。この現象のほとんどは、バグや故障ではなく、Gitの3つのエリア（作業ディレクトリ、ステージングエリア、リポジトリ）の関係性を正しく理解していないことから生じます。

考えられる原因と具体的な対処法

差分が表示されなくて困ったときは、慌てずに以下の点を一つずつ確認してみてください。ほとんどの場合、いずれかのケースに該当するはずです。

原因	詳細な解説	対処法
ファイルがステージされている	git addコマンドでステージングされたファイルは、「次のコミットに含める」と予約された状態です。 通常のgit diff（VSCodeの「変更」セクション）は、作業ディレクトリとステージングエリアの差分を見るため、両者に差がないステージ済みのファイルは表示されません。	VSCodeのソース管理パネルにある「ステージされた変更」セクションを確認します。 もしくは、ターミナルでgit diff --stagedを実行することで差分を確認できます。
ファイルが既にコミット済み	変更が既にコミットされ、リポジトリの歴史の一部として記録されている場合、当然ながら「未コミットの差分」としては表示されません。	直前のコミットとの差分を見たい場合は、ターミナルでgit diff HEAD~1を実行します。 GitLensなどの拡張機能を使えば、GUIで任意の2つのコミットを選択して比較することも可能です。
ファイルが.gitignoreで無視されている	プロジェクトのルートにある.gitignoreファイルに記載されたファイルやディレクトリのパターンは、Gitの追跡対象から意図的に外されています。 ログファイルやビルド成果物などがこれに該当します。	プロジェクトの.gitignoreファイルを開き、変更したファイルが意図せず無視対象になっていないかを確認します。
バイナリファイルの変更	画像ファイル（.png, .jpg）やPDF、コンパイル後の実行ファイル（.exe）などのバイナリファイルは、テキストベースではないため、行単位での差分を表示することができません。	VSCode上では変更があったこと自体は検知されますが、「バイナリファイルです」と表示され、詳細な差分は確認できません。 これはGitおよびVSCodeの仕様です。

SEARCH & COMPAREがない場合

GitLensの便利な機能として多くのブログで紹介されていた「SEARCH & COMPARE」ビューが、ある日VSCodeをアップデートしたら見当たらなくなって戸惑った経験はありませんか。これはバグではなく、GitLensのバージョンアップに伴う正常なUI（ユーザーインターフェース）の変更である可能性が非常に高いです。

人気の拡張機能は、ユーザーからのフィードバックを受けて日々改善されており、その過程でUIの配置や名称がより分かりやすいものへと変更されることは珍しくありません。

現在のUIでの場所と操作方法

結論から言うと、現在のGitLensのバージョンでは、「SEARCH & COMPARE」という独立したビューは廃止され、その機能はソース管理パネル内の各セクションに、より文脈に沿った形で自然に統合されています。

もしブランチ比較やコミット検索を行いたい場合は、以下の手順を試してください。

大前提：GitLensはインストールされていますか？

そもそもですが、「SEARCH & COMPARE」をはじめとする高度な比較機能は、GitLens拡張機能によって提供されるものです。もしGitLens由来のUIが全く表示されない場合は、まず拡張機能パネルを開き、GitLensが正しくインストールされ、有効になっているかを第一に確認してください。

vscodeでの差分比較git活用の総まとめ

最後に、この記事で解説したvscodeでの差分比較とgit活用の要点を、明日からすぐ使えるチェックリストとしてまとめます。

PC・家電の記事一覧へ