JSON差分比較

2つのJSONを比較し、追加・削除・変更されたキーをキーパス単位で一目で確認できます。オブジェクト・配列を再帰的にたどり、型が異なる場合も変更として表示。データ処理はすべてブラウザ内で完結し、サーバーには送信されません。

Tips

  • キーパスは `user.address[0].city` のようなドット・ブラケット記法で表示されるため、ネストが深いJSONでもどの階層の値が変わったかすぐに特定できます。
  • 配列はインデックスで対応付けて比較します。要素の並び順が変わっただけの配列は「全要素が変更」として検出される点に注意してください。
  • 同じキーが片方では文字列、もう片方ではオブジェクトのように型自体が異なる場合も「変更」として検出され、両方の生の値がそのまま表示されます。
  • デプロイ前後のAPIレスポンスを比較する際は、タイムスタンプやリクエストIDなど毎回変化するフィールドを事前に削除しておくと、本当に見たい差分だけに集中できます。
  • 変更のない値が大量にあるJSONでも、一致したリーフの件数だけを集計して表示するため、結果が長大になりすぎず見通しよく確認できます。

よくある質問

APIのレスポンスをデプロイ前後で比較して意図しない変更が混入していないか確認したり、設定ファイル(config.json等)の環境間の差異を洗い出したりする場面でよく使われます。手動でJSONを見比べるより、変更点だけを抽出できるため確認作業が大幅に速くなります。

はい。オブジェクトのキーは名前で対応付けて比較するため、AとBでキーの記述順が異なっていても差分検出には影響しません。JSON上の見た目の順序ではなく、キーの存在と値の一致だけを見ています。

配列はインデックス(0番目、1番目…)で対応付けて比較する仕様のため、要素の中身は同じでも並び順が変わると、そのインデックスの値が「変更」として検出されます。要素の内容を無視して順序変更だけを許容する比較には対応していません。

いいえ。比較処理はすべてブラウザ内のJavaScriptで完結し、入力したJSONの内容がサーバーに送信されることはありません。APIキーや個人情報を含むレスポンスでも安心して比較できます。

JSON.parseが失敗した場合は、AとBのどちらが不正な形式かを明示したエラーメッセージが表示され、差分計算は行われません。カンマの過不足や引用符の閉じ忘れなど、よくある構文エラーの位置を確認する手がかりになります。
ツールくん

余談ですが ― CSV差分とJSON差分、キー照合の考え方の違い

当サイトのCSV差分比較ツール(dev.csv.csv_diff)は、行を識別するキー列を1つ指定して行単位・セル単位で比較する方式でした。JSONは行と列という平坦な構造を持たず、オブジェクトのネストや配列という入れ子構造を許すため、同じ「差分比較」でも比較アルゴリズムの設計が大きく異なります。本ツールはキー列という概念の代わりに、ルートから葉まで再帰的にたどる「キーパス」を照合の単位にしています。

JSONの差分検出で特に厄介なのが配列の扱いです。CSVの行はキー列の値で一意に識別できますが、JSONの配列要素には識別子が保証されていません。本ツールはシンプルにインデックス(出現順)で対応付ける方式を採用しており、これは配列の中身が追加・削除される場面よりも、オブジェクトの構造やプリミティブ値の変化を追いたい場面(設定ファイルやAPIレスポンスの比較)に向いた設計です。

実務では、REST APIのレスポンス仕様が変わっていないかを継続的インテグレーション(CI)で自動チェックする用途にも似た発想が使われます。本ツールはブラウザで完結する手軽さを重視していますが、考え方自体はスナップショットテストや契約テスト(Contract Testing)と共通しており、JSON構造の差分を機械的に検出するという課題は開発の様々な場面で繰り返し登場します。

→ すべての余談を見る