メインコンテンツへ移動

JSON差分比較

このツールは、JSONペイロードを抽象構文木にパースし、キーの順序と意味を持たない空白を完全に無視する、クライアント側で動作するセマンティック比較エンジンです。主キーによる配列マッチングの設定、型の変化を独立した種類として分類する処理、タブを固めることなく最大100 MBのJSONを扱えるWeb Worker実行、双方向のRFC 6902 JSON Patchのエクスポートと適用、そして共通の祖先に対して2つのブランチを結合し、パスごとの競合解決ができるオプトインの3-wayマージを備えています。

端末内で処理

左右を意味的に比較します。キーの順序と空白は無視します。

左側のドキュメント(元)
0 B1 行行 1、列 1
右側のドキュメント(変更後)
0 B1 行行 1、列 1
入力待ち…ショートカット: Alt+↓ 次へ, Alt+↑ 前へ

表示する差分はありません

上に2つのJSONドキュメントを貼り付けてください。比較はWeb Workerで実行され、大きなデータでもページの操作を妨げません。

JSON差分比較はどう動きますか?

標準的な行単位の差分ツール(古典的なUnix diffなど)は、意味のあるデータではなく直列化されたテキストを比較するため、JSONでは失敗します。JSONではRFC 8259により、キーの順序は明示的に任意とされています。{"a":1,"b":2}と{"b":2,"a":1}は同一のオブジェクトを表すのに、テキスト差分エンジンは矛盾する行として検出します。

ToolsByUsの差分エンジンは、分離されたWeb Workerの中でパース済みの抽象構文木(AST)を操作することで、これを解決します。オブジェクトのキーを辞書順に正規化し、3つの設定可能な配列マッチングアルゴリズムを実装しています。

  • インデックスマッチング:配列要素を順序位置で厳密に対応付けます(プリミティブのリストではデフォルト)。
  • キーマッチング:不変の識別子(idやuuidなど)でコレクションの実体を対応付けます。順序が入れ替わったリスト項目を、偽の削除と追加のノイズではなく、変更や移動として検出できます。
  • 構造類似度:二部マッチングの最大重みマッチングを使い、フィールドの対応が最も高いオブジェクト同士を対応付けます。

スカラーの型変化(文字列"42"が数値42に変わるなど)は、破壊的な置き換えではなく、独立したTYPE_CHANGEイベントとして認識されます。

左と右のサンプル

// Left:
{"id": 1, "tier": "free", "name": "Alpha"}

// Right:
{"name": "Alpha", "id": 1, "tier": "pro"}

出力例

// Semantic Diff Result:
- tier: "free" (Removed)
+ tier: "pro" (Added)
= id: 1 (Unchanged)
= name: "Alpha" (Unchanged, key order ignored)

左と右のサンプル → 出力例

左と右のサンプル

{
  "id": 42,
  "name": "Ada",
  "tags": ["math", "code"],
  "active": true
}

左と右のサンプル 2

{
  "name": "Ada Lovelace",
  "id": 42,
  "tags": ["math", "code", "analysis"],
  "active": false
}

出力例

[
  {
    "op": "replace",
    "path": "/active",
    "value": false
  },
  {
    "op": "replace",
    "path": "/name",
    "value": "Ada Lovelace"
  },
  {
    "op": "add",
    "path": "/tags/2",
    "value": "analysis"
  }
]

JSON差分比較が対応するオプションとエッジケースは?

技術リファレンスとオプション
パラメータ型デフォルト動作とエッジケース
キー順の不変性不変常に有効オブジェクトのキーは数学的な集合として比較されます。キーの順序が異なっても差分の変更は発生しません。
配列照合:インデックスモードデフォルトゼロベースのインデックスで項目を厳密に一致させます。[1, 2, 3]のような単純なスカラー配列に最適です。
配列照合:キーモード'id'ユーザー定義の主キープロパティで配列間のオブジェクト項目を一致させます。並べ替え時の誤った追加を防止します。
配列照合:類似度モードスコア > 0.4共有キーとプリミティブスカラーの等価性に基づくヒューリスティック構造マッチング。
型変更の分類カテゴリ有効型の変遷('1' -> 1)を削除+追加ではなく、独立したTYPE_CHANGE操作としてタグ付けします。
メモリ上限制限100 MBブラウザタブのメモリ不足クラッシュを防ぐため、ワーカー内のペイロードに明示的な上限を設定します。
スリーウェイマージモードオプトインベース+我々+彼らをページ内で結合(8 MB上限);競合はデフォルトで祖先値となり、パスごとにライブで再解決されます。

よくある質問

JSONの差分比較でキーの順序が問題にならないのはなぜですか?

公式のJSON仕様(RFC 8259 Section 4)によれば、JSONオブジェクトは順序を持たない0個以上の名前と値のペアのコレクションです。JSONエンコーダー(Pythonの辞書やGoのマップ反復など)はキーを非決定的な順序で直列化するため、セマンティックな差分比較では、偽の差異を排除するためにキー順序を正規化する必要があります。

キーによる配列のマッチングはどのように動作しますか?

データベースのモデルやAPIレコードの配列では、項目の順序が変わったり削除されたりします。'id'や'uuid'のような主キーを指定すると、差分エンジンは配列内の位置に関係なく、同じキー値を持つ左右のオブジェクトを対応付けます。配列全体の置き換えとして報告する代わりに、フィールドの変化を正確に強調表示します。

この差分からRFC 6902のJSON Patchを生成できますか?

はい。ToolsByUsは仕様に準拠したRFC 6902のJSON Patch配列('add'、'remove'、'replace'、'move'の操作)を生成します。ワンクリックでコピーできるうえ、ドキュメントに直接適用もできます。パッチは往復が保証されています。生成されたパッチを元のドキュメントに適用すると、正確にターゲットのドキュメントになります。

3-wayマージは競合する編集をどう扱いますか?

'Three-way merge'に切り替えて、共通の祖先をBaseとして指定し、両方のブランチのドキュメントを渡してください。片側だけが加えた変更は自動的にマージされます。両側が同じパスに触れた場合、エンジンは競合を記録し、そのパスについてOurs、Theirs、Baseのいずれかを選ぶまで、マージ結果はBaseの値を使います。選ぶたびに出力は即座に再解決され、すべてブラウザ内で完結します。

JSONペイロードはバックエンドのサーバーに送られますか?

いいえ。ToolsByUsはバックエンドを持たない静的ウェブサイトです。パース、ASTの走査、差分の生成は、ブラウザの専用Web Workerスレッドの中で100%実行されます。ドキュメントの読み込み中はネットワークリクエストが完全に無効で、厳格な自動E2Eテストで検証されています。

タブを固めずに差分を取れるJSONドキュメントのサイズはどのくらいですか?

重いパースと走査はすべてWeb Workerで動き、行は仮想化スクロールで描画されます(ビューポートに見えている要素だけがDOMに存在します)。そのためWorkerの上限である100 MBまでのドキュメントでも、インターフェースは応答性を保ちます。とはいえ50 MBのペアには、実際の処理として数十秒かかります。違いは、固まったタブを眺める代わりに、実行中でもスクロール、入力、キャンセルができることです。

JSON差分比較でできるそのほかのことは?