devtools-hub

JSON Diff

2つのJSONを比較して追加・削除・変更をカラーハイライトで表示

JSON開発ツールデバッグ

左右のペインに Before / After の JSON を貼り付けるだけで、追加・削除・変更された項目をリアルタイムに検出してハイライト表示。APIレスポンスの差分確認や設定ファイルの変更点チェックに。

広告

JSON Diff

Before
After

Features

  • 追加(緑)・削除(赤)・変更(黄)をカラーで識別
  • ネストしたオブジェクト・配列の差分も検出
  • 差分サマリー(追加N件・削除N件・変更N件)を表示
  • 不正なJSON入力時にパースエラーを表示
  • サンプルデータで即動作確認


JSONの差分比較 — 変更点を素早く特定するテクニック

APIのレスポンス変更確認、設定ファイルの更新内容チェック、データ移行の検証など、JSONの差分比較は開発・運用の様々な場面で必要になります。手動での比較は見落としが多く非効率です。構造化されたJSONの差分を自動的に検出する方法を理解することで、作業精度と速度が向上します。

JSONのディープイコール比較

JSONの同一性チェックはJSON.stringify()での文字列比較が手軽ですが、キーの順序が異なる場合に誤った結果になります。確実に比較するにはキーをソートしてシリアライズする(JSON.stringify(obj, Object.keys(obj).sort()))か、再帰的に全プロパティを比較する関数を使います。配列は順序も含めて比較されるため、順序不問の場合は別途ソートが必要です。

JSON Patch(RFC 6902)の仕様

JSON Patchは2つのJSONの差分を標準フォーマットで表現する仕様です。add・remove・replace・move・copy・testの6操作を配列で記述します。例:[{"op":"replace","path":"/name","value":"Bob"},{"op":"add","path":"/email","value":"bob@example.com"}]。APIで差分更新を送信する際や、変更履歴を保存する際に活用できます。fast-json-patchライブラリで生成・適用が可能です。

深いネストへのアクセスにJSONPointerを使う

JSON Pointer(RFC 6901)はJSONの特定の値を指すパス表記で、/users/0/nameのようにスラッシュ区切りで記述します。キーに/や~が含まれる場合はそれぞれ~1・~0にエスケープします。jqコマンドはJSON Pointerに似た構文で.users[0].nameのようにアクセスでき、複雑なJSONから特定フィールドを抽出・変換するのに便利です。

スキーマバリデーションで差分を防ぐ

JSONの構造変化を検知するには差分比較だけでなく、JSON Schemaによるバリデーションが有効です。APIレスポンスの型をJSON Schemaで定義し、ajv等のバリデーターでチェックすることで、フィールドの追加・削除・型変更を自動検出できます。TypeScriptユーザーはzodでスキーマ定義とバリデーションを一元管理でき、JSON to ZodツールでJSON例からスキーマを自動生成できます。

広告

Related Tools

JSON Studio

JSON フォーマッター & バリデーター

JSON開発者向けフォーマッター

使ってみる →

BOOTH

JSON Path Tester

JSONPath 式をリアルタイムでテスト・結果を即確認

開発者向けユーティリティJSON

使ってみる →

BOOTH

JSON to TypeScript

JSONからTypeScriptのinterface型定義を自動生成

開発者向けTypeScriptJSON

使ってみる →

BOOTH

このツールを共有する