JSONEditor.io

エディタはVS Codeを支えるMonacoで動き、その選択はあちこちに表れる。JSON、YAML、XMLの構文ハイライト、波線で示すリアルタイムのエラー検出、IntelliSenseと自動補完、大きなファイル向けのコード折りたたみ、正規表現対応の検索と置換が揃う。ショートカットはVS Codeと一致するので、指の記憶がそのまま移る。代償はバンドルサイズだが、Monacoはページと並行して読み込まれるため、そのコストは見えない。

同じファイルを三通りに読める。テキストモードは生のJSONを編集可能な形で見せる。ツリーモードは構造を展開できる階層として描き、ネストしたオブジェクトの枝が目で追いきれないときに効く。テーブルモードは配列を行と列に並べ、レコードの一覧を眺める作業が苦でなくなる。作業しながらモードを切り替えても、背後の文書はずっと同期している。

変換はJSON、YAML、CSV、XML、TypeScriptをカバーし、ほぼすべてで双方向に行ける。JSONからCSVの経路はネストしたオブジェクトを平坦化し、それが出力を表計算で使えるものにする。DevOpsの作業はマニフェストやComposeファイル向けのJSONからYAMLへの変換で助かる。TypeScript書き出しはサンプルデータをインターフェース定義に変え、型付きプロジェクトに貼れる。

AIアシスタントは、スクリプトを書く代わりに変更内容を普通の言葉で説明させてくれる。すべてのメールアドレスを配列に抽出して、とか、レスポンスを別の形に整えて、と頼めば、生成しながら結果を流して返す。この機能はVercel AI SDKを通じてGPT-4で動く。製品の中でデータを端末の外に送る唯一の部分で、使う前に画面がそう告げる。

512MBまでのファイルがタブを固まらせずに開く。ほとんどのブラウザエディタには言えないことだ。Monacoは見えている行だけを描くので、巨大な文書も小さなファイルと同じように動く。オフライン対応により、初回読み込み後は整形、検証、変換が接続なしで動き続ける。飛行機の中や制限の厳しい社内網にいる開発者に向く組み合わせだ。

修復ツールは壊れた文書を走査し、いつもの犯人を探す。末尾のカンマ、エスケープされていない文字、欠けた引用符、不正なエスケープシーケンス。そして修正を提案するか適用する。スキーマ検証は逆方向で、データをあらかじめ定義したJSONスキーマと照合するJSONスキーマ検証を行い、構造のずれがデータベースに届く前に捕まえる。どちらも、実際にビルドを止める不具合を覆う。

二つのJSONファイルを並べて開けば、バージョン間の追加、変更、削除が浮かび上がり、バージョン探しが素早い目視確認に変わる。ファイルをクラウドに保存して共有リンクを作れば、同僚は添付なしで同じ文書を開ける。マルチタブの作業スペースは複数のファイルをフォルダで整理して開いたままにでき、コードエディタと同じ感覚だ。