データと形式変換

JSON 差分ツール

2つのJSONを左右のエディターに貼り付けると、DevKitLabはgit風の並列表示または行内表示の差分と、JSON Pathで整理された構造化された変更一覧を同時に表示します。長い文字列値が変化した場合は、右側パネルで単語レベルの赤緑ハイライトを自動展開し、どの部分が変わったかを正確に示します。キー順序を無視した意味的な比較、変更部分以外の折りたたみ、前後の差分間ジャンプ、両側のインデント統一を一括で行うこともできます。すべての処理はブラウザ内で完結し、双方のpayloadが端末の外へ送信されることはありません。

  • git風の並列差分表示。行全体の赤緑ハイライトに加え、行内の文字レベル差分も表示
  • unified行内モードに切り替え可能。小さな変更は新旧フラグメントをインラインで表示
  • 右側の構造化パネルがJSON Pathで追加 / 削除 / 変更 / 移動を一覧表示し、クリックでエディターの該当箇所へジャンプ
  • 長い文字列の変更は単語レベルの赤緑差分を自動展開し、変更箇所を正確に特定
  • キー順序を無視した意味的比較で、キーの並び替えが全面変更に見えるのを防止
  • 変更のない領域を折りたたみ(既定で有効)、長いJSONでも差分付近に集中可能
  • 前 / 次の差分への素早いジャンプ、左右入れ替え、両側のフォーマット統一が可能
  • 配列要素はid / key / name / uuid / _idでヒューリスティックに対応付け、挿入による全体ずれを回避
  • 左右の入力はlocalStorageに自動保存され、リロード後も保持
  • 完全にローカル処理:双方のJSON、token、設定、ログの内容はサーバーへ送信されません
工具/JSON 差分ツール
元のJSON
変更後のJSON
両側にJSONを貼り付けて比較を開始してください
両側にJSONを貼り付けて比較を開始してください
Diff コマンド

概要

このJSON Diffは単に2つのJSONを並べるだけではありません。テキスト比較と構造比較の両方の視点を同時に提供し、文字レベルのハイライト、長い文字列の単語レベル差分、パスへのジャンプ、配列の整列を組み合わせることで、APIの変更、設定の変更、fixtureの差分のレビューがスムーズになります。

  1. 01

    並列git風差分

    左右2つのCodeMirrorエディターが同期スクロールします。変更行は行全体がハイライトされ、行内ではさらに文字レベルのアウトラインで実際の変更箇所が示されます。GitHub PRの差分表示に近い感覚で使えます。

  2. 02

    unified行内モード

    unifiedモードに切り替えると単一エディターになり、変更ブロックの上に旧テキストが読み取り専用で重ねて表示されます。小さな変更は新旧のフラグメントをインラインで並べて表示します。

  3. 03

    構造化された変更一覧

    右側パネルが$.users[2].nameのようなJSON Pathで各変更を一覧表示します。追加 / 削除 / 変更 / 移動はそれぞれ異なる色とアイコンで区別され、変更の種類が一目で分かります。

  4. 04

    長い文字列の単語レベル差分

    ある文字列フィールドが両側で長く異なる場合、パネルの該当行に単語レベルの赤緑ハイライトが自動展開され、書き換えられた部分、挿入された部分、削除された部分が具体的に分かります。

  5. 05

    キー順序を無視した意味的比較

    キー順序を無視を有効にすると、構造化差分はキー名を再帰的にソートしてから比較します。両側を整形と組み合わせれば、エディター側の表示もキーソートされた形に書き換えられます。

  6. 06

    未変更領域の折りたたみ

    既定で有効です。差分の外側の同一内容を自動で折りたたみ、各変更ブロックの上下に3行のコンテキストを残します。数千行の設定ファイルでも差分部分に集中できます。

  7. 07

    差分間のジャンプ

    前 / 次ボタンはchunk単位で差分間をジャンプします。構造化パネルのクリックと組み合わせれば、長い差分でも見落としなくレビューできます。

  8. 08

    内容ベースの配列整列

    既定では各要素のid / key / name / uuid / _idでハッシュマッチを行い、配列の中間に1つ要素を挿入したときに以降全体が変更扱いになるノイズを避けます。

  9. 09

    両側を一括整形

    左右のインデントやキー順序が揃っていない場合、ワンクリックで両側を2スペースインデントの整形版に書き換えられます(キー順序を無視が有効ならソートも同時に実施)。

  10. 10

    完全にローカル、アップロード不要

    解析、比較、文字列差分、コピー、ファイル読み込みはすべてブラウザ内で完結します。双方のJSON、本番レスポンス、token、設定はサーバーへ送信されません。

使い方

一般的な流れは:両側のJSONを貼り付け、必要に応じてキー順序無視や両側整形を有効にし、並列ビューと右側の構造化一覧で1つずつレビューし、問題のあるフィールドのパスをコピーする、というものです。

  1. 01

    元のJSONを左に、変更後のJSONを右に貼り付けます。両側とも直接編集でき、入力は自動でlocalStorageに保存されます。

  2. 02

    既定では並列比較モードです:変更行は赤 / 緑でハイライトされ、行内では文字レベルの差分が示されます。上下視野が好まない場合は行内表示へ切り替えます。

  3. 03

    右側の構造化された差分パネルを確認します。JSON Pathで各追加 / 削除 / 変更が一覧表示され、任意の行をクリックするとエディターの該当位置へジャンプします。

  4. 04

    ある文字列フィールドが両側で長く異なる場合、パネルが単語レベルの差分を自動展開し、変更された具体的な部分を示します。

  5. 05

    左右のキー順序が違って全面変更に見えるときは、キー順序を無視を有効にして両側を整形をクリックします。差分が瞬時にすっきりします。

  6. 06

    前 / 次ボタンで長い差分を順にレビューします。既定では未変更領域が折りたたまれているので、必要に応じてオフにして全文を確認します。

  7. 07

    ドキュメントやチケットで特定のフィールドを参照したいときは、パネル行にマウスを乗せてパスをコピーをクリックし、$.data.users[0].emailのような正確なパスを取得します。

詳細

これらの機能はJSON差分でよくある問題、すなわち行単位の差分では文字レベルの細部が見えない、長い文字列の差分位置が特定できない、キー順序が異なると全面変更に見える、配列の中間挿入で全体がずれる、巨大なpayloadは最後まで読みきれない、をカバーします。

  • 並列git風の2カラム表示。行全体のハイライトと行内の文字レベルアウトラインで具体的差分を表示。
  • unified行内モード。旧テキストを読み取り専用オーバーレイとして変更ブロックの上に表示。
  • 右側の構造化パネルがJSON Pathで各変更を一覧表示し、追加 / 削除 / 変更 / 移動を別カラーで識別。
  • 長い文字列の変更は単語レベルの赤緑差分を自動展開し、具体的な書き換え部分を特定。
  • キー順序を無視スイッチで構造化比較がキー名の順序を無視し、無意味な全面変更を防止。
  • 未変更を折りたたむで差分外の同一内容を自動折りたたみ、長いJSONでも差分付近に集中可能。
  • 前 / 次ボタンでchunk単位ジャンプし、長い差分での見落としを防止。
  • id / key / name / uuid / _idによるヒューリスティックな配列整列で、挿入による全体ずれを回避。
  • ワンクリックで両側を整形、左右のインデントを統一。キー順序を無視と組み合わせると同時にソート。
  • 入れ替えで左右を瞬時に交換、クリアで両側をリセット。入力はlocalStorageに永続化。
  • テーマはシステムに追従。赤 / 緑の配色はライト / ダークモード両方でコントラストを確保。

活用シーン

このページは2つのJSONがあって、どこがどう違うのか正確に知りたいというあらゆる場面に向いています。

  1. APIレスポンス変更のレビュー

    前バージョンのレスポンスと現バージョンのレスポンスを両側に貼り付け、追加・削除・変更されたフィールドを素早く確認できます。ネストの深いフィールドや長い文字列フィールドにも有効。

  2. 設定ファイルの差分確認

    tsconfig、package.json、ESLint設定、CDNルール、feature flagsの変更レビューに。キー順序を無視を有効にすると、並び替えだけで真の意味的変更が埋もれません。

  3. fixture / シードデータの回帰チェック

    テストfixtureの旧バージョンと新バージョンを比較し、自分の変更が想定したフィールドだけに影響しているか、他のケースに意図しない変更を加えていないかを確認。

  4. JWT / token解読後の比較

    2回発行されたJWTのデコード済みpayloadを貼り付け、claimsの変化を比較。issuer、audience、scopeなどが期待通りかを確認できます。

  5. AIツール呼び出しパラメータの比較

    同一セッション内の2回のtool callパラメータや、Agent中間状態の前後差分を比較し、どのステップで予期しないフィールド変化が入ったのかを特定。

  6. Webhookリプレイの検証

    本番で取得したWebhookとリプレイ環境で生成されたpayloadを比較し、signature以外のフィールドが完全に一致するか確認。

  7. 環境間の設定差分

    dev / staging / prodの設定JSONを比較し、環境ごとに差があるキーを特定して統一ベースラインを作成。

  8. マイグレーション前後のデータ比較

    データ移行、一括リネーム、リファクタリング後に、移行前後のサンプルJSONを比較し、構造変更が想定通りで、値フィールドが意図せず上書きされていないことを確認。

  9. インシデント振り返り

    問題発生時のpayloadと正常時のpayloadを比較し、長い文字列の単語レベル差分と組み合わせて、どのエンコーディングや値が下流の異常を引き起こしたのかを特定。

関連情報

比較前に両側を整理したい場合は、まず JSON フォーマッター で構文の検証やスマート修復、フォーマット統一を行ってから戻ってきます。差分部分を別のフォーマット(YAML、CSVなど)に変換したい場合は、 JSON コンバーター へ渡せます。両側のJSONがログ接頭辞や他のテキストに包まれている場合は、まず テキスト置換 で外側の包装を取り除いてから、ここに戻って真のpayload差分を確認してください。

ここでの差分を理解する

JSON差分は単純に見えますが、テキスト比較と構造比較では異なる結果になります。これらの概念はレビューでよく見落とされます。

  1. テキスト差分 vs 意味的差分

    左右エディターの赤緑ハイライトはテキスト差分で、空白、キー順序、インデントの違いも変更として扱います。右側の構造化パネルは意味的差分で、フィールドと値の実際の変更だけを見ます。組み合わせて使うと精度が上がります。

  2. 厳密JSONではキー順序は意味を持たない

    {"a":1,"b":2}と{"b":2,"a":1}はJSONデータ上は同じですが、テキスト上は異なります。キー順序を無視を有効にすると構造化比較では一致扱いになります。視覚的にも一致させたい場合は両側を整形を使います。

  3. 配列の整列が差分ノイズを左右する

    配列の中間に要素を挿入すると、位置で比較する場合は以降すべての要素が変更扱いになります。ここでは既定で各オブジェクト要素のid / key / name / uuidによるヒューリスティック整列を行い、この誤差分を回避します。

  4. 長い文字列値には単語レベル差分が必要

    description、prompt、URL、HTMLフラグメントのような長い文字列フィールド全体を変更と表示するだけでは役に立ちません。ここでは単語レベルの赤緑ハイライトが自動展開され、変更箇所を特定できます。

  5. 移動 vs 変更の違い

    配列内で要素が位置を変えたものの内容が変わらない場合、jsondiffpatchは移動として識別します(削除+追加ではなく)。順序変更と内容変更を見分けるのに役立ちます。

  6. JSON Pathは単一フィールドを参照する標準的方法

    パネルの各行に表示される$.users[2].nameの形式はそのままコピーでき、ドキュメント、チケット、コードコメントで使用できます。あのユーザー名フィールドと書くより明確です。

使い方のヒント

設定差分、API変更レビュー、fixture比較は、payloadが大きくなるほど一定のチェック習慣が重要になります。これらのプラクティスは誤判定を減らします。

  • 貼り付け後はまず右側パネル上部の追加 X 件 · 削除 Y 件 · 変更 Z 件サマリーで変更規模を把握し、全件レビューか抽出レビューかを決めます。
  • 広範囲の差分を見たら、まずキー順序やインデントによる擬似差分かを確認します。キー順序を無視を有効にし両側を整形を実行してから、本当の意味的変更を判断します。
  • 配列の中間挿入や削除では既定のid / key / name / uuid整列に依存します。これらフィールドがない場合は、サンプルに一時的に安定フィールドを追加して比較すると分かりやすくなります。
  • 文字列フィールドの長い変更を見たら、まず単語レベル差分を展開してから、必要に応じて専用のテキスト差分ツールへ移行します。
  • 長いJSONレビュー時は未変更を折りたたむを有効にしたまま、前 / 次でchunk単位ジャンプし、小さな変更を見逃さないようにします。
  • チケットやドキュメントに特定の変更を記録するときは、構造化パネルのJSON Pathをコピーします。口頭の説明より正確です。
  • 本番payloadを扱う前にマスキングします。ツール自体はデータをアップロードしませんが、スクリーンショットやチケット・チャットへの貼り付けで漏洩する可能性があります。

制限事項

このツールはJSONの内容差分の表示に特化しており、スキーマ検証、変更承認フロー、本格的なバージョン管理を置き換えるものではありません。

  • どこが違うかは教えますが違っていいかどうかは判定しません。業務ルール、バージョン制約、後方互換性の判断はスキーマ、コードレビュー、回帰テストの責務です。
  • Gitではありません。コミット履歴、ブランチ、blameはなく、2つの静的payloadの比較のみです。長期的な変遷を追うにはバージョン管理システムを使ってください。
  • 長い文字列の単語レベル差分は単語境界で分割するため、空白がない言語(中国語、日本語など)には効果が限定的です。エディター内の文字レベルアウトラインと併用してください。
  • 配列整列はid / key / name / uuidヒューリスティックに依存します。要素に安定識別子がなく、かつ順序が重要な場合は、位置ベース比較にフォールバックして全体ずれが発生する可能性があります。
  • 数十MBの巨大なpayloadはブラウザを遅くする可能性があります(特に構造化差分)。関連するサブツリーを抽出するか、コマンドライン差分ツールの使用を検討してください。
  • すべての処理はローカルですが、ローカルの安全性はデバイス、ブラウザ拡張、画面共有、コピー先に依存します。

よくある質問

構造化差分、長い文字列差分、キー順序、配列整列、プライバシー、大型payloadに関するよくある質問をまとめました。

私のJSONはサーバーにアップロードされますか?

されません。解析、比較、文字列差分、コピー、ファイル読み込みはすべて現在のブラウザタブ内で完結します。DevKitLabはあなたのpayloadをサーバーへ送信しません。

エディターのハイライトと右側構造化パネルの結果が一致しないことがあるのはなぜ?

エディターのハイライトはテキスト差分で、空白、キー順序、インデントの影響を受けます。右側構造化パネルは意味的差分で、フィールドと値の実際の変更だけを見ます。キー順序を無視を有効にして両側を整形を実行すると、通常は一致します。

キー順序を無視は具体的に何をしますか?

構造化差分を計算する際に、オブジェクトのキーを再帰的にソートしてから比較します。そのため{"a":1,"b":2}と{"b":2,"a":1}は異なるとは見なされません。これは構造化パネルにのみ影響し、エディターは書き換えません。視覚的にも無視させたい場合は両側を整形をクリックしてください。

配列の中間に要素を挿入したのに、なぜ以降全部が変更扱いにならないのですか?

ツールは既定で各オブジェクト要素のid / key / name / uuid / _idでマッチングを行い、どの要素がどこからどこへ移動したかを識別します。要素にこれらのフィールドがない場合は位置ベース比較にフォールバックし、その場合は挿入で以降が変更扱いになります。

あるフィールドが長い文字列で変更だけ表示され、具体的にどこが違うか見えません。

右側の構造化パネルは長い文字列の変更の下に単語レベルの赤緑差分を自動展開し、削除された単語を赤、追加された単語を緑で表示します。文字列が非常に長い場合(2万文字以上)は、パフォーマンスのため全体赤緑にフォールバックします。

未変更を折りたたむは差分を隠してしまいませんか?

隠しません。差分外の同一内容の長い区間のみを折りたたみ、各変更ブロックの上下に3行のコンテキストを残します。折りたたみバーをクリックすれば一時的に展開できますし、オプションをオフにすれば全文表示に戻せます。

左右のフォーマットが違う場合(一方はインデント、もう一方はなし)、差分は赤緑だらけになりますか?

はい。エディターはテキスト差分を行うためです。両側を整形をクリックしてインデントを統一すると、差分が見やすくなります。構造化パネルは意味的に比較するため影響を受けません。

前 / 次ボタンはどの粒度でジャンプしますか?

差分chunk(連続する変更ブロック)単位でジャンプします。構造化パネルの行単位ではありません。1つのchunkが複数の構造化変更を含むこともあれば、1つのフィールド変更が複数のchunkにまたがることもあります。

移動タイプが表示されるのはなぜ?

配列内のあるオブジェクトが位置を変えたが内容が変わらない場合、ツールは削除+追加ではなく移動として識別します。順序変更と本当の内容変更を区別するのに役立ちます。

ページを閉じたら左右エディターの内容は残りますか?

残ります。左右の入力はlocalStorageに自動保存され、次回開いたときに自動復元されます。クリアを押すとローカルキャッシュも同時にクリアされます。

非常に大きなJSONファイルを扱えますか?

数MBのpayloadは通常問題なく動作します。数十MBの内容はブラウザを遅くする可能性があり、特に構造化差分の部分が顕著です。関連するサブツリーの抽出か、コマンドライン差分ツールの使用をお勧めします。

3-way差分(base / left / right)に対応していますか?

現時点では2-way比較のみです。3-wayマージが必要な場合は、Git自身のマージツールやIDEの内蔵差分ツールをご利用ください。

関連ツール

データツール集でJSONワークフローを続けましょう:フォーマット、他フォーマットへの変換、payload外側のテキスト包装の除去など。