この記事に関連するツール
ブラウザ上ですぐに試せます。記事の内容を確認しながら使うと、作業の流れをつかみやすくなります。
「修正前」と「修正後」を見比べて、変わった箇所だけを浮かび上がらせる――それがDiff(差分)です。Gitのコードレビュー、設定ファイルのバックアップ比較、APIレスポンスの突き合わせなど、開発のあらゆる場面で使います。

この記事では、Diffの読み方の基本と、行単位・単語単位の違い、現場で役立つ使い方を具体例で解説します。
Diffの基本:+ と - の意味
最も一般的なunified形式のDiffは、行頭の記号で変更内容を表します。
function greet(name) {
- return "Hello " + name;
+ return `Hello ${name}`;
}
-(赤)で始まる行は削除された行+(緑)で始まる行は追加された行- 記号なしの行は変更されていない行(文脈として表示)
つまり「ある行を変更した」場合、Diffでは「古い行を削除し、新しい行を追加した」という2行で表現されます。
行単位 vs 単語単位
Diffには大きく2つの粒度があります。
行単位(line diff)
行ごとに「同じか違うか」を判定します。コードや設定ファイルの比較に向いています。ただし、1行の中の一文字だけ変えた場合でも「行まるごと変更」と表示されるため、どの単語が変わったかまではわかりません。
単語・文字単位(word/char diff)
行の中のどの部分が変わったかまでハイライトします。文章の校正や、長い1行(圧縮されたJSONなど)の比較で威力を発揮します。
例えば次の変更を考えます。
変更前: 価格は税抜1000円です
変更後: 価格は税込1100円です
行単位だと「この行が変わった」としかわかりませんが、単語単位なら「税抜→税込」「1000→1100」の2か所だけがハイライトされ、変更箇所が一目瞭然です。
空白・改行コードの落とし穴
Diffで「全部の行が変わった」と表示されて驚くことがあります。原因の多くは見えない違いです。
- 改行コード: Windowsの
CRLFとUnixのLFが混在すると、全行が差分扱いになります。 - インデント: タブとスペースの違い、行末の余分なスペース。
- 全角・半角スペース: 見た目はほぼ同じでも別の文字です。
意味のある変更だけを見たいときは、Diffツールの「空白を無視」オプションを有効にすると、本質的な違いだけを抽出できます。逆に、設定ファイルなどで空白そのものが重要な場合はオフのままにします。
実務での使い方
- コードレビュー前のセルフチェック: コミット前に変更点を見直し、消し忘れたデバッグコードや意図しない変更を発見する。
- 設定ファイルの比較: 動く環境と動かない環境の
.envや設定ファイルを並べ、差分から原因を切り分ける。 - APIレスポンスの突き合わせ: 期待するJSONと実際のレスポンスを比較し、欠けているフィールドを探す(1行JSONは整形してから比較すると見やすい)。
- 文章の校正: 編集前後の原稿を単語単位で比較し、修正箇所を確認する。
機密データはローカルで比較する
設定ファイルやログにはAPIキーや個人情報が含まれることがあります。こうしたデータを外部のオンラインサービスに貼り付けるのは避けたいところです。テキスト差分比較ツールはブラウザ内で処理が完結し、入力データをサーバーへ送信しません。Networkタブを開いた状態で比較してもリクエストが飛ばないことを確認できます。
よくある質問
1行だけ変えたのに2行分の差分が出るのはなぜ?
Diffは「変更」を「削除+追加」として表現するためです。元の行が - として、新しい行が + として表示されるので、1行の修正でも2行に見えます。単語単位の比較に切り替えると、実際に変わった部分だけがハイライトされます。
差分が全行に出てしまいます
改行コード(CRLF / LF)の違いや、行末の空白、インデントのタブ・スペース混在が原因のことが多いです。「空白を無視」オプションを試すか、事前に改行コードを統一してください。
大きなファイルでも比較できますか?
ブラウザ内で処理するツールは、極端に巨大なファイルだと動作が重くなることがあります。その場合は比較したい範囲だけを抜き出す、あるいはコマンドラインの diff や git diff を併用すると快適です。日常的なコードや設定ファイルの比較であれば、ブラウザ上のツールで十分実用的です。
おすすめリソース
このセクションにはアフィリエイトリンクが含まれる場合があります。リンク経由で購入すると、追加費用なしでDevToolKits.appが紹介料を受け取ることがあります。