JSONはどこにでもある。生のままで読むのはつらい。
エンドポイントを叩いたら、ターミナルにJSONの壁が出現。目的のフィールドは6階層の奥深く。あるいは誰かが変更したpackage.jsonを開いて、どこが違うか目視で探そうとする。生のJSONはマシン向けだ。人間の目には厳しすぎる。
そこを解決するのがFileCrankのJSONビューア。インストール不要、サインアップ不要、すべてブラウザで完結する。
できること
貼り付けてすぐ探索
入力パネルにJSONを貼り付けると、カラーコードの折りたたみ可能なツリービューが即座に表示される:
- 文字列はグリーン
- 数値はブルー
- 真偽値はパープル
- nullはグレー
data配列を折りたたんでmetaブロックに集中する。必要なオブジェクトだけ展開する。大きなAPIレスポンスを読むとき、これだけで数分が変わる。
JSONCサポート——コメントも処理
設定ファイルを扱っているなら、VS CodeやTypeScriptの設定ファイルがJSONCフォーマット(コメント付きJSON)を使うことは珍しくない。標準のJSON.parseは//や/* */に出会った途端にエラーになる。このJSONフォーマッターはパース前にコメントを自動で除去するので、コメントが含まれた設定ファイルをそのまま貼り付けられる。
ブラウザを離れずにインライン編集
誤った値を直すためにエディタを開く必要はない。ツリービュー内の任意の値をクリックするとインライン編集できる。型は自動検出される:trueと入力するとブーリアン、42と入力すると数値になる。キー名をダブルクリックすると名前を変更できる。
具体例: Webhookペイロードで"active": "true"が文字列になっている。クリックしてtrue(クォートなし)と入力してEnter。修正完了。
ノードの追加と削除
新しいキーを追加したいなら、オブジェクトや配列の横の+ボタンを押す。削除したいなら×を押す。ツリービューは即時更新される。
リアルタイムの生成JSONパネル
編集しながら、画面下の「生成されたJSON」パネルがリアルタイムで更新され続ける。修正済みのJSONがすぐコピーできる状態で表示される。別途「適用」ボタンを押す手間はない——ツリービューで見たものがそのまま出力になる。
コピー・リセット・変更の追跡
「コピー」を1クリックするとJSONがクリップボードに入る。「リセット」で最初に貼り付けた状態に戻る。作業中のJSONが入力と異なる場合、変更済みのアンバー色バッジが表示されるので、どの状態にいるか一目でわかる。
実際の使用例
REST APIのレスポンスをデバッグしているとしよう:
- ネットワークタブやAPIクライアントからレスポンスボディをコピー
- JSONビューアに貼り付け
results配列を折りたたむ——200件あるが、見たいのはエンベロープだけpagination.totalが"500"(文字列)になっていて、500(数値)であるべきと気づく- 値をクリックして
500と入力してEnter - 修正済みJSONを出力パネルからコピー
- テストフィクスチャやバグレポートに貼り付け
所要時間:30秒以内。ローカルツール不要。
今すぐ試す
JSONフォーマッターオンラインを開いて、気になっていたAPIレスポンスを貼り付けてみてほしい。ミニファイされたJSONを睨むより、ツリービューでどれだけ速く構造を把握できるか実感できる。
JSONの先の作業にはJSONをCSVに変換、CSVをJSONに変換、Base64エンコード・デコードも活用できる。