JSON Diff — 2つのJSONドキュメントを比較する
2つのJSONドキュメントを並べて比較し、追加・削除・変更されたキーをハイライトします。すべてブラウザ内で動作。アップロード不要、制限なし。
2つのJSONドキュメントを比較する作業は、聞くと単純そうに見えて実際にはそうではないタスクのひとつです。行ベースのdiff（diff コマンドやVS Codeのソースdiff）はJSONをテキストとして扱い、変更されたすべての行にフラグを付けます。つまり、minifyされたJSONであれば文書全体に、整形されたJSONであれば変更された値を含むすべての行と、兄弟要素の追加や削除によりインデントが変わったすべての行にフラグが付きます。構造的diffはJSONをデータとして理解し、実際の変更だけをフラグ付けします。このキーが追加された、あのキーが削除された、この値が変更された、という具合です。結果として、赤と緑の行の羅列ではなく、変更箇所にフォーカスしたリストが得られます。
あまり自明でない判断は、配列の順序です。JSON配列は順序付きのリストですが、その順序の意味的な重要性はドメインによって異なります。users のリストは順序に敏感です（順序はソートや作成順を反映している可能性があります）。ブログ記事の tags リストは多くの場合、順序に依存しません（重要なのはタグの集合であり、割り当てられた順序ではありません）。デフォルトのdiffは配列を順序付きとして扱います —— [1, 2, 3] と [3, 2, 1] は異なります。順序に意味的重要性がないセットのような配列に対しては、「配列順序を無視」トグルが適切な選択です。
最後に受け渡しについて：受け手がコードレビューであれば、ビジュアルdiffそのものが成果物です —— 出力やスクリーンショットをPRの説明に貼り付けてください。受け手がCIパイプラインであれば、JSON Patch（RFC 6902）が出力すべき形式です —— 変更を操作のリスト（add、remove、replace、move、copy、test）として指定し、準拠したライブラリならどれでも適用できます。受け手がデータ移行スクリプトであれば、パス単位の変更リストが入力となります —— 各パスが column-to-update 文や document-to-revise 呼び出しになります。
使い方
2つのJSONドキュメントを貼り付ける
1つ目のJSONを左パネルに、2つ目を右パネルにドロップしてください。入力に応じてdiffが自動的に実行され、追加・削除・変更がインラインでハイライトされます。
diffモードを選択する
デフォルトは構造的diff（キーを1つずつ比較し、配列の順序を考慮します）。意味的diff（`{a:1,b:2}` と `{b:2,a:1}` を等しいとみなす）や、型を厳密に比較するdeep diffに切り替えることもできます。
変更リストを読む
変更リストパネルには、すべての差分がパスとして表示されます：`users[3].email` が `[email protected]` から `[email protected]` に変更されました。パスをクリックすると、両側のソースパネルの該当箇所にジャンプします。
よくある質問
diffで配列の順序は考慮されますか?
デフォルトでは考慮されます —— `[1, 2, 3]` と `[3, 2, 1]` は異なるものとみなされます。「配列順序を無視」を切り替えると、配列をセットとして比較し、位置が異なるだけで要素が同じものは等しいとみなされます。フィールドの順序に意味的な重要性がないAPIレスポンスのdiffに便利です。
nullとundefinedはどのように扱われますか?
JSONには `undefined` はなく、`null` のみが存在します。diffは `null` と欠落したキーを異なるものとして扱います —— `{a: null}` と `{}` は同じではありません。スキーマでこれらを等価とみなしている場合は、「nullと欠落を等しいとみなす」を切り替えてください。
値の型の変更を検出しますか?
はい —— 文字列から数値への変更や、オブジェクトから配列への変更は、単純な値の変更ではなく型の変更としてフラグ付けされます。diffパネルには両側の型が表示されるため、変更の内容が明確になります。
大きなJSONファイルをdiffできますか?
はい —— diffはメモリ内で実行され、ブラウザタブの利用可能なメモリまでのファイルを扱えます。数MBのJSONの場合、解析時にUIが一時的に固まる可能性がありますが、diff自体は高速です（ドキュメントサイズに対して線形）。非常に大きなドキュメントでは、関連するサブセットに事前にフィルタリングすることをご検討ください。
diffの前にJSONをフォーマットしますか?
はい —— 両方の入力は、diffを実行する前に一貫したインデントで整形されます。フォーマット自体（2スペースか4スペースか、キーの順序）はdiff結果に影響しません。値と構造のみが考慮されます。
制限事項
- JSON Schemaの意味的な認識なしdiffは構造的であり、スキーマを認識しません。あるJSON Schemaの下で意味的に等価な2つのJSON値（例：デフォルト値を持つオプションフィールド）は、異なるものとしてフラグ付けされます。スキーマを認識したdiffが必要な場合は、JSON Schemaバリデータで後処理してください。
- オブジェクトのキー順序はdiffとして扱われないオブジェクトのキー順序は無視されます —— `{a: 1, b: 2}` と `{b: 2, a: 1}` は等しいとみなされます。diffは値の変更を表示し、並び替えは表示しません。キー順序が重要な場合（まれですが、一部のレガシーAPIではあり得ます）は、テキストdiffツールを使用してください。
- patch出力なしこのツールはdiffを視覚的に表示しますが、patchファイル（unified diff形式、JSON Patch RFC 6902）は出力しません。自動化に適したpatch出力が必要な場合は、JSON Patchを出力するコマンドラインツールを使用してください。
プラットフォーム別の注意点
- macOS
- FileMergeやKaleidoscopeは、任意のテキストファイルに対応するビジュアルdiffツールです。ブラウザツールはJSONに特化して適しており、構造を認識する（キー単位、配列の順序）ことで、行ベースのdiffよりも明確な結果を得られます。
- Windows
- WinMergeはWindowsの標準的なビジュアルdiffツールです。ブラウザツールはJSONに特化して適しており、構造的diffは変更された値を含むすべての行ではなく、変更された値そのものだけをハイライトします。
- Linux
- コマンドライン作業では、`diff -u` は任意のテキストファイルに動作しますが、行ベースであり構造を認識しません。`jd`（JSON diff）や `jsondiff` が最も近いCLIの代替です。ブラウザツールは、チャットやメールから貼り付けたJSONを対話的にdiffする場合に適しています。
- Web
- 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。コマンドラインツールが利用できない制限された環境でのアドホックなdiffや、ブラウザタブでキャプチャしたAPIレスポンスのクイック比較に便利です。