「このファイル、さっきと何が変わったんだろう？」と感じたとき、コードの変更点を目で探すのは大変です。そんなときに役立つのが「差分（diff）」の機能です。

この記事では、テキスト差分（diff）の仕組みと、コードレビュー・設定ファイル比較・文章校正への活用方法を解説します。

テキスト差分（diff）とは？

テキスト差分（diff）とは、2つのテキストを比較して、追加・削除・変更された箇所をハイライト表示する機能です。「diff」はdifferenceの略で、UNIXのdiffコマンドが起源です。

GitHubのプルリクエスト画面やVSCodeの変更ビューで見る「緑色の追加行・赤色の削除行」が、まさにdiffの表示です。

差分の表示方法

行単位の差分

最も一般的な差分表示は「行単位」です。変更された行全体を削除扱い（赤）と追加扱い（緑）で示します。

- 旧：const greeting = "Hello, World!";
+ 新：const greeting = "こんにちは、世界！";

-が削除された行、+が追加された行です。

文字単位の差分

より詳細な差分表示では、行の中のどの文字が変わったかまで特定します。長い行の一部だけが変更されたときに便利です。

サイドバイサイド表示

変更前と変更後を左右に並べて表示する形式です。全体の構造を保ちながら差分を確認しやすく、コードレビューでよく使われます。

具体的な活用場面

  • コードレビュー：プルリクエストでどの行が追加・変更されたか確認する
  • 設定ファイルの比較：本番とステージングの.envやnginx.confの差分を確認する
  • JSONの比較：APIのレスポンスが変わっていないか前後を比較する
  • 文章の校正：ブログ記事や仕様書の修正前後を比較する
  • SQL・クエリの変更確認：マイグレーションファイルの変更点を確認する

Gitのdiffコマンド

Gitを使っている場合、git diffコマンドでコミット前後の差分を確認できます。

# 作業ツリーとインデックスの差分
git diff

# ブランチ間の差分
git diff main feature/new-button

# 特定ファイルの差分
git diff HEAD~1 -- src/app.js

よくある質問（FAQ）

空白（スペース・タブ）の違いもdiffに表示されますか？
ツールによります。多くのdiffツールは空白の差異も検出しますが、「空白の変化を無視する」オプションが用意されているものが多いです。インデントの変換（タブ→スペースなど）で大量の差分が出るときはこのオプションを使うと本質的な変更のみが見えます。
行の順番が変わっただけでも大量のdiffが出ます
通常の行単位diffは順番の変化を「削除→追加」として表示するため、並び替えだけで大きな差分になります。意味的な差分が見たい場合は「JSON diff」のような構造を理解したツールが向いています。
バイナリファイル（画像・PDFなど）もdiffできますか？
通常のdiffツールはバイナリファイルを「変更あり/なし」の判定のみ行い、具体的な差分内容は表示できません。テキストとして比較するには、画像であればメタデータ、PDFであればテキスト抽出した内容を比較する方法があります。

まとめ

  • テキスト差分（diff）は2つのテキストの追加・削除・変更箇所を表示する機能
  • Gitのプルリクエストやコードレビューで日常的に使われている
  • 設定ファイル・JSON・文章など、あらゆるテキストデータの比較に使える
  • 行単位・文字単位・サイドバイサイドなど表示形式を用途に合わせて選べる

ブラウザ上でテキストや設定ファイルをすぐに比較したいときは以下のツールをご活用ください。