JSON 差分比較

JSON

2 つの JSON ドキュメントを比較し、構造の差分を強調表示します。

100% クライアントサイドバックエンドなし

左（オリジナル）

右（変更）

出力

このページの内容

JSON 差分比較とは？#

JSON 差分（diff）は 2 つの JSON ドキュメントを比較し、それらの間で何が変化したかを正確に教えます——どのフィールドが現れ、どのフィールドが消え、どのフィールドが同じパスを保ちつつ値が変わったか。これはテキスト diff の構造版ですが、行を照合する代わりにオブジェクトや配列のツリーを歩くため、値が 1 から 2 に変わったことは、テキストブロックの書き換えではなく、特定のパスにおける正確な編集として現れます。

これは、JSON が進化する何かの通信フォーマットであるすべての場面で重要です——デプロイ間の API レスポンス、改訂間の設定ファイル、テストスイートのフィクスチャ、日ごとのエクスポートデータ。整形された 2 つの塊を並べて睨むのは、小さなドキュメントでしか通用しません。入れ子が深くなった瞬間、差分を列挙してもらう必要があります。

注意点が一つ。JSON 差分は配列に対して順序 sensitiveです。2 つの配列が等しいのは、要素が位置ごとに一致するときだけです。それが JSON 自身の等価性の定義だからです。だから [a, b] と [b, a] は異なり、diff はそれを報告します——順序に意味がある場面（一連のステップ）では有用、そうでない場面（配列のふりをしたセット）では意外に思えるかもしれません。

使い方#

元のドキュメントを**左（オリジナル）ペインに、改訂版を右（変更）**ペインに貼り付けます。
比較は入力に合わせてリアルタイムで走ります。比較をクリックして強制的に更新することもできます。
出力領域は各差分を独自の行にリストします:
- 追加 — そのパスは右側にだけ存在し、新しい値を示します。
- 削除 — そのパスは左側にだけ存在し、古い値を示します。
- 変更 — そのパスは両側に存在するが値が異なり、古い → 新しい を示します。各行には $.version や $.tags[2] のような JSONPath 形式のパスが前置されるため、どちらのドキュメントでも位置を特定できます。
両ドキュメントが完全に等しければ、ステータス行は「差分なし——入力は同一です。」と明示的に通知します。空のペインを解釈させるようなことはしません。
サンプルは現実的な変更前/変更後のペアを読み込みます。クリアは両ペインと結果をリセットします。

主な特徴#

テキストではなく構造ベース。 解析された値のツリーを比較するため、再インデントやオブジェクトキーの並べ替え、空白の変更が誤った差分を生むことはありません。
正確なパス。 すべての変更が JSONPath 記法で位置を持ちます——ルートは $、オブジェクトのフィールドは .key、配列の添字は [i]——そのため、すぐに正しい場所へ跳べます。
3 種類の変更。 追加・削除・変更が個別に、色分けされて報告されるため、追加と削除、編集がひと目で区別できます。
ペインごとのエラー報告。 一方の入力が有効な JSON でない場合、ステータス行はどちらが失敗したかを名指しします（「左の入力は有効な JSON ではありません。」）。不透明に失敗することはありません。
リアルタイム比較。 どちらのペインを編集しても diff が更新されるため、フィクスチャやレスポンスの反復が即座に行えます。

実例#

サンプルを読み込むと、2 つのペインに、改訂前後の小さな設定ドキュメントが入ります:

{
  "name": "ArpGate",
  "version": 1,
  "tags": ["json", "encoding"],
  "features": { "static": true, "backend": null }
}

が左、対して:

{
  "name": "ArpGate",
  "version": 2,
  "tags": ["json", "encoding", "crypto"],
  "features": { "static": true, "backend": false, "offline": true }
}

が右です。diff は何が動いたかを正確に列挙します:

changed  $.version           1 → 2
added    $.tags[2]           "crypto"
changed  $.features.backend  null → false
added    $.features.offline  true

ここで現れないものに注目してください: $.name（変更なし）、$.tags[0] と $.tags[1]（変更なし）、$.features.static（変更なし）。等しいブランチは出力を生まないため、両ドキュメントがいくつかフィールドを持っていても、4 行の diff がすべてです。その後、両ペインを同じドキュメントにすれば、ステータス行は「差分なし——入力は同一です。」に切り替わります。

よくある質問#

並べ替えた配列が完全に変更済みと表示されるのはなぜですか？#

JSON の配列は順序付きで、等価性は位置ベースです。[1, 2] と [2, 1] は添字 0 と添字 1 で異なるため、diff は 2 つの変更を報告します。これは、順序に意味があるシーケンスにおいては正しい動作です。配列がセットを表している場合は、比較前に両ドキュメントでソート（または正規化）してください——さもないと、移動が編集のように見えてしまいます。

オブジェクトキーがリネームされたことに気付きますか？#

JSON には「このキーがあのキーになった」と表現する手段がないため、削除と追加の組として報告します。enabled を active にリネームすると、removed $.enabled と added $.active として現れます——「リネーム」1 行ではなく 2 行です。それが、データで何が変化したかの正直な表現です。

型の変更はどう見えますか？#

単一の changed 行として報告されます。値が文字列の "36" から数値の 36 に変わると、diff はそのパスで "36" → 36 を示します——異なるシリアライズにより、型の反転が視覚化されます。null が false になる場合や、数値がオブジェクトになる場合も同様です。

変更されていないフィールドを教えてくれますか？#

いいえ、意図的にそうです。変更されていないすべてのフィールドをリストすれば、現実のドキュメントでは実際の変更がノイズに埋もれてしまいます。diff は差分（デルタ）だけを示し、等しいブランチは沈黙します。一方のドキュメントの完全な形が必要なら、ツリービューアーで描画してください。