JSON差分比較

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

JSON差分比較とは

JSON差分比較は、2つのJSONデータを構造ごと突き合わせて、どのキーが追加され、どのキーが削除され、どの値が変更されたかを一目で分かるようにする作業です。APIレスポンスの仕様変更や設定ファイルの環境差分など、テキストとして丸ごと見比べるには情報量が多すぎる場面で威力を発揮します。本ツールはオブジェクト・配列を再帰的にたどりながらキーパス単位で差分を抽出するため、ネストが深いJSONでも変更箇所をピンポイントで特定できます。

比較の前提として、JSONの構造そのものが崩れていると差分計算は行えません。カンマの過不足や引用符の閉じ忘れなどの構文エラーがあると、その旨をAとBのどちらの入力かを明示したうえでエラーとして表示します。また、オブジェクトのキーは名前で対応付け、配列の要素はインデックス(出現順)で対応付けるという2つの異なる比較ルールを採用しています。この前提を理解しておくと、なぜ特定のキーが「変更」として検出されるのかを正しく解釈できます。

JSON差分比較の使い方

  1. 比較元JSON(A)を入力する 入力欄にJSONテキストを貼り付けるか、直接入力します。既存の設定ファイルやAPIレスポンスをそのままコピーして構いません。
  2. 比較先JSON(B)を入力する 変更後・別環境のJSONをもう一方の入力欄に貼り付けます。AとBの入力順序は結果の「削除」「追加」の向きに反映されます。
  3. サンプルで挙動を確認する(任意) 「サンプルを読み込む」ボタンを押すと、追加・削除・変更を含む例が両方の欄に入り、表示形式をすぐに把握できます。
  4. 差分結果を確認する 削除・追加・変更のキーがキーパスとともに一覧表示されます。変更されたキーは変更前後の値が並んで表示されるため、差分の内容をその場で読み取れます。
  5. 必要に応じて入力をクリアする 「クリア」ボタンで両方の入力欄を空にし、別のJSONペアの比較を始められます。

使いこなすためのヒント

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

活用シーン

APIレスポンスの仕様変更チェック

バックエンドのデプロイ前後でAPIレスポンスを保存しておき、本ツールで比較すれば、意図しないフィールドの追加・削除・型変更を早期に検知できます。

環境間の設定ファイル比較

ステージングと本番のconfig.jsonやpackage.jsonの内容を比較し、環境変数の設定漏れやバージョンのズレを洗い出す場面で使えます。

コードレビュー時の差分説明

JSON形式のマイグレーションデータやスキーマ定義をレビューする際、変更点を口頭やコメントで説明する代わりに、差分一覧をそのまま共有できます。

テストのスナップショット比較

自動テストが出力するJSONスナップショットと期待値を見比べ、テスト失敗の原因がどのフィールドにあるかを素早く特定できます。

外部連携データの受け渡し確認

Webhookで受信したペイロードが仕様書どおりの構造になっているか、サンプルJSONと実データを比較して検証する用途にも使えます。

用語集

キーパス
JSONのルートから特定の値までの経路を `user.address[0].city` のようなドット・ブラケット記法で表した文字列。差分結果はこの単位で表示されます。
ネスト(入れ子構造)
オブジェクトや配列の中にさらにオブジェクトや配列が含まれている状態。深いネストほど手動での見比べが難しくなります。
リーフ
JSONの木構造において、それ以上分岐しない末端の値(文字列・数値・真偽値・null)のこと。差分比較は最終的にリーフの値どうしを照合します。
型不一致
同じキーパスの値が、片方では文字列、もう片方ではオブジェクトのように異なるデータ型になっている状態。本ツールはこれも「変更」として検出します。
構文エラー
JSON.parseに失敗する不正な記述のこと。カンマの過不足や引用符の閉じ忘れなどが典型例です。
JSONPath
JSON内の値を問い合わせるためのクエリ言語規格。本ツールのキーパス表記はJSONPathの一部記法を簡略化したものに近い考え方です。

よくある質問

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

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

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

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

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

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

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

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

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