左 JSON（元）
右 JSON（変更後）
JSON Diff チェッカーとは？
JSON Diff チェッカーは、2つのJSONオブジェクトを意味的に比較し、明確な視覚フィードバックですべての違いをハイライトする開発者ツールです。プレーンテキストのdiffとは異なり、JSON構造を理解し、すべてのネストレベルで欠落しているプロパティ、型の不一致、値の変化、配列の変更を検出します。すべてブラウザ内で100%実行され、データがデバイスの外に出ることはありません。
JSONの比較方法
1. 左パネルに元のJSONを、右パネルに変更後のJSONを貼り付けます。 2. 比較をクリックするか、入力中に自動比較が変更を検出するのを待ちます。 3. 色分けされたハイライトの並列ビューを確認します：追加は緑、削除は赤、変更された値は黄色。 4. ナビゲーション矢印または差分リストを使用して変更間を移動します。 5. サマリーバーのチェックボックスを使用して、タイプ別に差分をフィルタリングします。 6. 結果をコピーまたはエクスポートをクリックして差分サマリーをダウンロードします。
機能
- セマンティックdiff — 深い構造比較のためのjsondiffpatchによる。
- 分類された差分 — 欠落しているプロパティ、型の不一致、値の変化、追加されたキー。
- 並列ビュー — 同期スクロールと行レベルのハイライト。
- 差分ナビゲーション — prev/nextコントロールで差分を一つずつステップスルー。
- 差分リストパネル — パスと詳細を含むクリック可能な差分リスト。
- フィルターシステム — 差分カテゴリーによる可視性の切り替え。
- エクスポート — diffをHTMLまたはプレーンテキストとしてダウンロード。
- セッション永続化 — 入力はIndexedDB経由で自動保存されます。
- 完全クライアントサイド — データがブラウザの外に出ることはありません。
ユースケース
- コード変更前後のAPIレスポンスの比較。
- 設定ファイルの更新の検証（package.json、tsconfigなど）。
- 環境間のシリアライゼーションの違いのデバッグ。
- コードレビュー — 期待されるJSONと実際のJSON出力の確認。
- データベース移行の検証 — エクスポートされたレコードの比較。
- QAテスト — テスト実行間のフィクスチャデータの比較。