JSON スタジオ：整形・検証・差分を一つの画面に

きっかけ

JSON を扱う頻度は思っていたより高い。API の応答、設定ファイル、ログの断片。そのたびに端末で一時的なコマンドを打ち、使い捨てにしていました。困るのは三点です。長い文書では構造が読みにくい。エラー位置は勘に頼るしかない。二つの文書の違いは目視で比べるしかない。

このツールは、その三点だけを片付けるためにあります。

四つの動作

整形と圧縮は基本の二方向です。ソートはキーを再帰的に並べますが、目的は見た目ではありません。並べないと、構造が同じでキーの順序だけ違う二つの文書が「完全に別物」と判定されます。比較の前に正規化する工程にはボタンがあるべきです。

検証には予定より手をかけました。「正しい / 正しくない」だけでは役に立ちません。JSON.parse が投げるメッセージは、数千行の文書ではほぼ位置を特定できません。解析に失敗したときは、位置を行と列へ換算して指し示します。

差分を遅延読み込みする理由

構造比較は毎回使う機能ではなく、コード量も小さくありません。そこで差分のロジックは実行時の import() を通します。比較モードを開いたときだけ chunk が降ってきます。このサイトの三段階の非同期読み込み、すなわちルート単位の分割、ハイドレーションの遅延、実行時のオンデマンドのうちの三段目です。

代償は初回に一瞬の待ちが出ることですが、読み込み状態で受け止めます。この場面では割に合う交換です。

すべてローカルで動く

バックエンドは無く、解析はすべてブラウザ内で行われます。ツールページではこれは加点要素ではなく下限です。設定に含まれる鍵やトークン、内部のアドレスを、見知らぬサーバーへ貼り付けたがる人はいません。

学んだこと

ツールの初版は、機能は揃っていて順序が間違っているものです。最終的に残った順序は「まず構造、次にエラー、最後に比較」で、それは自分が実際に使う順序でした。機能の一覧は簡単に書けますが、順序は使ってみて初めて分かります。