本文へスキップ
SPCXTools

JSON 比較

2つのJSONオブジェクト間の差分を、パスごとの詳細な比較で素早く検出します。

ローカルで動作 — ファイルは端末から出ません

ツールを読み込み中…

JSON 比較の使い方

  1. 1左側のパネルに元のJSONを、右側のパネルに変更後のJSONを貼り付けます。
  2. 2ツールが即座にデータを解析し、追加・削除・変更されたフィールドの概要を表示します。
  3. 3配列の順序を問わずに内容を比較したい場合は、「配列の順序を無視」にチェックを入れます。
  4. 4正確なJSONパスと変更前・変更後の値を示す、詳細な変更リストを確認します。
  5. 5「コピー」ボタンを使用して、差分のプレーンテキストレポートをクリップボードにコピーします。

高速・安全なJSON差分チェッカー

複雑なデータ構造を扱う際、値の変更やキーの抜けを1つ1つ見つけ出すのは非常に手間がかかります。このJSON比較ツールは、2つのJSONデータ間の差分を瞬時に分析し、正確にハイライトします。何千行ものコードを目視で確認する代わりに、変更箇所が整理された見やすいレポートで確認できます。

このツールはすべてブラウザ上で処理されるため、オンラインでも完全にプライバシーが保護された状態でJSONの差分チェックを行えます。データがサーバーにアップロードされたり、データベースに保存されたりすることは一切ありません。独自のAPIレスポンス、顧客データ、機密性の高い環境設定なども、データ漏洩のリスクなく安全に貼り付けて確認できます。

JSONのディープ比較の仕組み

2つのJSONファイルを比較する際、通常のテキスト用Diffチェッカーを使用すると、差分として誤検知されがちです。テキスト比較ツールはデータを行単位で比較するため、インデントが異なる場合や、オブジェクトのキーの順序が違うだけでも、ブロック全体が変更されたと判定してしまいます。

このツールは仕組みが異なります。テキストを実際のJavaScriptオブジェクトとしてパースし、データ構造そのものを再帰的にディープ比較します。空白やインデント、キーの順序は無視されるため、{"status": "ok", "code": 200} が {"code": 200, "status": "ok"} になっても、完全に同一であると認識します。

差分が見つかった場合は、標準的なドット記法とブラケット記法を使用して、変更箇所への正確なパスを生成します。たとえば、配列内の3番目のタグが変更された場合、巨大なファイル内の適当な行をハイライトするのではなく、直接 tags[2] のようにピンポイントで変更箇所を特定します。

配列の扱い：厳密な比較と順序を問わない比較

JSON差分チェッカーでよくある課題の一つが、配列の扱いです。配列内の要素の順序が厳密に意味を持つ場合もあれば、単なる順不同のリストであり、内容が一致しているかどうかだけを確認したい場合もあります。

デフォルトでは、このツールはインデックスに基づいて厳密に配列を比較します。変更前の最初の要素と変更後の最初の要素が一致するかどうかを順番に確認します。

配列の順序を無視 オプションにチェックを入れると、比較方法が変わります。両方の配列の内容をシリアライズし、アルファベット順にソートしてから比較します。つまり、変更前の配列が ["apple", "banana"] で、変更後の配列が ["banana", "apple"] の場合、差分は検出されません。この機能は、特定のソート順を保証しないデータベースからのAPIレスポンスを比較する際に非常に役立ちます。

主な利用シーン

APIレスポンスのデバッグ: APIが突然エラーになった際、正常時のレスポンスとエラー時のレスポンスを比較するのが原因究明の最短ルートです。2つのペイロードを貼り付けるだけで、キー名の変更、文字列から数値へのデータ型変更、ネストされたオブジェクトの削除などを瞬時に特定できます。

設定ファイルの確認: 現代のアプリ開発では、package.jsonやtsconfig.json、クラウドのデプロイテンプレートなど、JSON形式の設定ファイルが多用されます。コミット前にこのツールを使えば、どの依存関係や設定値が変更されたかを正確にチェックできます。

データベースレコードの監査: MongoDBなどのドキュメントデータベースは、JSONライクな構造でデータを保存します。特定のユーザー情報やドキュメントの変更履歴を追跡したい場合、過去のJSONエクスポートと現在のデータを比較することで、フィールドの追加・削除・変更といった監査証跡を明確に確認できます。

出力結果の見方

両方のパネルに有効なJSONを貼り付けると、変更内容の概要と詳細なリストが表示されます。

  • 追加 (+): 変更後のJSONにのみ存在するキーや配列の要素です。緑色でハイライトされます。
  • 削除 (−): 元のJSONにのみ存在し、変更後にはないキーや配列の要素です。赤色でハイライトされます。
  • 変更 (~): 両方に存在するが、値が異なるキーです（例：文字列の更新や、真偽値の true から false への変更など）。黄色でハイライトされ、変更前と変更後の値が表示されます。

比較結果をチームメンバーと共有したり、バグレポートに貼り付けたりする場合は、コピーボタンをご利用ください。変更されたすべてのパスと値の概要が、プレーンテキストとしてコピーされます。

さらにデータを処理する場合、まずはJSON Formatterを使用してデータを整形したり、JSONの構造が確定した後にJSON to TypeScript変換ツールを使って型定義を生成したりすることができます。

よくある質問

JSON差分チェッカーは配列をどのように処理しますか？
デフォルトでは、配列はインデックス順に厳密に比較されます。「配列の順序を無視」にチェックを入れると、比較前に配列の内容をソートします。これは、項目の順序は問わず、データ自体が一致しているかを確認したい場合に便利です。
JSONデータはサーバーに送信されますか？
いいえ。すべての解析と比較はJavaScriptを使用してブラウザ上でローカルに行われます。データがアップロードされることは一切ないため、機密性の高いAPIレスポンス、データベースのエクスポート、プライベートな設定ファイルなどでも完全に安全に使用できます。
JSONが無効な場合はどうなりますか？
解析に失敗した箇所を示すエラーメッセージがテキストボックスの下に表示されます。比較を実行するには、両方のパネルに有効なJSONを入力する必要があります。
元のJSONと変更後のJSONを入れ替えることはできますか？
はい。「入れ替え」ボタンをクリックすると、左右のパネルが瞬時に切り替わります。これにより、「追加」または「削除」と見なされる基準が逆転します。
ネストされたオブジェクトはどのように比較されますか？
ツールはネストされたオブジェクトや配列を再帰的にたどり、検出したすべての差分に対して正確なパス（"user.address.city" や "items[2].id" など）を生成します。
標準のテキスト差分ツールではなく、このツールを使用する理由は何ですか？
標準のテキスト差分ツールはテキストの行を比較します。同じJSONオブジェクトでもキーの順序が異なる場合、テキスト差分では大規模な変更として表示されてしまいます。JSON比較ツールは実際のデータ構造を解析するため、{"a":1, "b":2} と {"b":2, "a":1} が完全に同一であることを認識できます。

関連ツール

差分比較ツール2つのバージョンのテキストを貼り付けるだけで、追加、削除、変更された箇所がすぐにわかります。JSONフォーマッター＆検証ツールJSONの整形、軽量化、検証を瞬時に。エラー箇所も分かりやすく表示します。JSON to TypeScript 変換JSONデータをTypeScriptのインターフェースや型に瞬時に変換。ルート名のカスタマイズやexportオプションの切り替えも可能です。Base64エンコード＆デコードテキストとファイルをBase64に双方向変換。UTF-8とBase64URLに完全対応。Base64 画像変換Base64文字列やデータURIをデコードし、ブラウザ上で即座に表示・ダウンロード可能な画像に復元します。Chmod 計算ツールチェックボックス、8進数（755など）、記号表記（rwxr-xr-xなど）間でパーミッションを相互変換します。