LCS アルゴリズムで JSON のキー順序を無視する diff ツールを作った

作ったもの

Diff Viewer — https://sen.ltd/portfolio/diff-viewer/

• 3 表示モード: 統合 / 横並び / インライン（単語レベル）
• JSON 対応: キー順序を正規化してから比較
• 統計: 追加・削除・変更行数
• 統合 diff 形式でコピー
• 日本語 / 英語、ダーク / ライトテーマ

vanilla JS、ゼロ依存、ビルド不要。node --test で 39 ケース。

LCS diff アルゴリズム

git diff と同じ系列の最長共通部分列（LCS）アルゴリズム。O(mn) のテーブルを構築してバックトラック。

JSON 正規化

{"a":1,"b":2} と {"b":2,"a":1} は意味的に同一。比較前にキーをソート:

export function normalizeJSON(str) {
  return JSON.stringify(JSON.parse(str), Object.keys(obj).sort(), 2);
}

インライン diff

行内の変更を単語レベルでハイライト。split(/(\s+)/) で空白を保持しつつ分割し、同じ LCS を適用。

シリーズ

100+ 公開ポートフォリオ シリーズの #39 です。

• 📦 リポジトリ: https://github.com/sen-ltd/diff-viewer
• 🌐 デモ: https://sen.ltd/portfolio/diff-viewer/
• 🏢 会社: https://sen.ltd/