JavaScriptでテキスト差分を「扱えるデータ」にする——npmパッケージ diff 入門

文章の変更箇所を画面に表示したい。
設定ファイルの更新内容を確認したい。
そんなときに便利なのが、npmパッケージの diff（jsdiff）です。

このライブラリの面白いところは、差分を単なる見た目ではなく、JavaScriptのオブジェクト配列として受け取れる点です。
追加・削除・変更なしをデータとして扱えるため、差分ビューや変更履歴、レビュー機能へ組み込みやすくなっています。

インストール

npm install diff

ES Modulesでは、必要な関数を直接インポートできます。

import { diffLines } from 'diff';

まずは行単位で比較してみる

import { diffLines } from 'diff';

const before = `りんご
みかん
ぶどう`;

const after = `りんご
レモン
ぶどう`;

const changes = diffLines(before, after);
console.log(changes);

diffLines の結果は、差分のまとまりを表すオブジェクトの配列です。
各要素には差分本文の value が入り、追加部分には added、削除部分には removed が付きます。

• added: true：追加された部分
• removed: true：削除された部分
• どちらもない：変更されていない部分
• value：その差分に含まれる文字列
• count：その差分に含まれるトークン数

つまり、「削除された行は赤」「追加された行は緑」といった表示を、結果を走査するだけで組み立てられます。

for (const part of changes) {
  const type = part.added
    ? '追加'
    : part.removed
      ? '削除'
      : '変更なし';

  console.log(type, part.value);
}

比較単位を使い分ける

diff には、用途に応じた比較関数が用意されています。

たとえば文章の変更点を単語単位で見たいなら、diffWords を使います。

import { diffWords } from 'diff';

const changes = diffWords(
  '今日は晴れです',
  '今日はとても晴れです'
);

細かいほど常に良いわけではありません。
コードなら行単位、文章なら単語単位、短い文字列なら文字単位、というように「人が確認しやすい粒度」で選ぶのがコツです。

ブラウザで差分表示を作る

返ってきたオブジェクトを使えば、シンプルな差分ビューを作れます。

const output = document.querySelector('#diff');

for (const part of changes) {
  const span = document.createElement('span');

  span.style.color = part.added
    ? 'green'
    : part.removed
      ? 'red'
      : 'gray';

  span.textContent = part.value;
  output.appendChild(span);
}

パッチ形式も扱える

diff は表示用の差分だけでなく、unified diff形式のパッチも扱えます。

• createTwoFilesPatch：2つの内容からパッチ文字列を生成
• structuredPatch：構造化されたパッチオブジェクトを生成
• parsePatch：パッチ文字列を構造化データへ変換
• applyPatch：元の文字列へパッチを適用

import { createTwoFilesPatch, applyPatch } from 'diff';

const patch = createTwoFilesPatch(
  'before.txt',
  'after.txt',
  before,
  after
);

const result = applyPatch(before, patch);
console.log(result);

変更内容を保存したり、別の場所で再適用したりしたい場合に便利です。
ただし、適用先の内容が想定とずれているとパッチ適用に失敗することがあるため、戻り値の確認も忘れないようにしましょう。

向いている場面

• Markdownや記事本文の変更履歴
• コードレビュー風の差分表示
• 設定ファイルやJSONの更新確認
• AIが生成した文章と元原稿の比較
• 編集前後の監査ログ

まとめ

diff の強みは、差分を「追加」「削除」「変更なし」に分けたデータとして受け取れることです。
比較して終わりではなく、その結果を表示・保存・分析・再適用へつなげられます。

まずは用途に合った比較単位を選び、返ってくる配列を console.log で観察するところから始めると分かりやすいでしょう。
小さなライブラリですが、編集機能を作るときにはなかなか頼れる道具ですぞ。

参考リンク

• npm：diff
• jsdiff 公式ドキュメント
• GitHub：kpdecker/jsdiff