2つのJSONの違いを一覧で確かめる手順｜並び替わった配列はidで突き合わせる

2 つの JSON の違いは、JSON比較に左右で貼って「比較する」を押すと一覧で出ます。 キーの順番や字下げが違うだけの所は、差分に数えません。

違う所は $.profile.phone のようなパスで示します。 長い JSON のどこを直せばよいかを、目で探さずに済みます。

行の比較だと JSON は差分だらけになる

JSON をふつうのテキスト比較にかけると、値が同じでも赤と緑で埋まることがあります。 キーの並び順や、字下げの幅が違うだけで「別の行」と見なされるからです。

たとえば API の改修前後でレスポンスを比べると、項目の並びが入れ替わるだけで全行に印が付きます。 そのなかから本当に変わった 1 項目を探すのは骨が折れます。

JSON比較は、行ではなく値で比べます。 並びや字下げの違いは見ないので、本当に変わった所だけが残ります。

左に変更前、右に変更後を貼る

入力欄は 2 つあります。 左の「変更前」に古い JSON、右の「変更後」に新しい JSON を貼ります。

まず試すなら「サンプルを入れる」を押してください。 違いがひととおり入った JSON が左右に入ります。

左右を逆に貼ってしまったときは「左右を入れ替える」を押します。 追加と削除の向きが、貼り直さずに正しくなります。

違いは 4 種類に分かれて出る

サンプルのまま「比較する」を押すと、上に件数、下に一覧が出ます。 この例では追加 1 件、削除 1 件、変更 2 件、型の変化 1 件です。

一覧の 1 行目は $.name の変更です。 「佐藤　花子」と「佐藤 花子」は、画面ではほとんど同じに見えます。

そこで下の行に「3 文字目が違います」と、両側の文字の番号を添えています。 左は全角スペース、右は半角スペースだと分かります。

$.age は、数値の 30 が文字列の “30” に変わった所です。 値の見た目は同じでも、プログラムでは別物なので「型の変化」として分けています。

書き方だけ違う数値は通知に回る

一覧の上に「書き方だけ違う数値」という通知があります。 $.score が、左は 80、右は 80.0 で書かれていました。

80 と 80.0 は同じ値なので、差分には数えていません。 表記が揺れていることだけを、ここで確かめられます。

キーの順番だけ違うときは「違いはありません」

同じ中身をキーの順番と字下げだけ変えて比べると、件数はすべて 0 になります。 結果の欄には、何を比べていないかも書かれます。

「違いはありません」だけで終わらせず、比べていないものを名指ししています。 並び順まで一致していることを確かめたいときは、テキスト比較を併用してください。

並び替わった配列は id で突き合わせる

配列は、最初は位置で比べます。 0 番目どうし、1 番目どうしを比べる方式です。

そのため、一覧の並びが入れ替わっただけで、要素がすべて「変更」に見えます。 3 人のユーザーの並びが変わった例では、変更が 6 件も出ました。

このとき、一覧の上に案内が出ます。 位置で比べると 6 件、id で突き合わせると 1 件と、その配列の差分の数を並べています。

案内が出るのは、突き合わせると差分が減る配列だけです。 並びが変わっていない配列には出ません。

「id で突き合わせて比べ直す」を押すと、同じ id の要素どうしで比べ直します。 変更は 1 件だけになりました。

パスは $.users[id=2].name のように、何番目かではなく id で書かれます。 どのユーザーのどの項目が変わったかが、そのまま読めます。

案内は自動では切り替えません。 並び順の違いも差として知りたい場合があるので、比べ方は自分で選ぶ形にしています。

使用例

たとえば、社内の管理画面で使う一覧 API を改修した場面です。 改修前後のレスポンスを貼り、id で突き合わせて、名前が変わった 1 件だけを確かめます。

読めない JSON は理由と位置が出る

JSON の書き方に誤りがあると、どちらの欄の何行目かが出ます。 よくある間違いは、最後の項目のあとに残ったカンマです。

この例では、右の 3 行目 12 文字目のカンマを指しています。 抜粋の中で問題の文字が囲まれるので、どこを消せばよいかが分かります。

コメント、シングルクォート、全角スペースも、それぞれ名指しで知らせます。 左右の両方が読めないときは、両方のエラーを並べて出します。

結果をコピーして残す

一覧の右上の「コピー」を押すと、件数・比べ方・全件の差分がテキストで写ります。 通知の中身も一緒に入ります。

画面に並ぶのは先頭の 500 件までです。 それより多いときも、コピーには全件が入ります。

まとめ

JSON比較は、2 つの JSON を値で比べて違う所をパスで並べるツールです。 キーの順番や字下げの違いは数えず、追加・削除・変更・型の変化に分けて出します。

並びが変わる配列は、id などのキーで突き合わせると本物の差だけが残ります。 行の比較で差分だらけになる理由は「JSONを比べると差分だらけになる原因」にまとめています。

補足: 開発者の方へ

読み取りには JSON.parse を使わず、RFC 8259 の文法どおりに自前で読んでいます。 数値の字面と、重複したキーを失わないためです。

JSON.parse は数値を倍精度で持ちます。 そのため 12345678901234567890 と 12345678901234567891 が同じ値になります。 このツールは 10 進数のまま比べ、差として残したうえで「JSON.parse で読むと同じ値になる差です」と添えます。

同じキーが 2 回ある JSON は、JSON.parse と同じく後の値で比べます。 そのうえで、重複した場所を通知に出します。