JSON入力

ツリービュー

JSONツリービューアとは？

本当に大きなJSONもあります。GraphQLクエリのレスポンス、NoSQLデータベースのエクスポート、ネットワーク要素の設定ダンプ — これらは配列の中にオブジェクト、そのまた中にオブジェクト、と何千行もネストしていることがあります。生のテキストとして読むのは骨が折れます。JSONツリービューアは、その波括弧の壁を、すべてのオブジェクトが展開可能な枝、すべての値が一目で確認できる葉となる、たどりやすい階層に変えます。

「ツリー」という発想はJSONのデータモデルそのものから来ています。公式JSON仕様はJSONをオブジェクト、配列、プリミティブ値のツリーとして定義しており、IETF版が RFC 8259 です。ツリービューアはその構造を可視化するだけです。ネストしたデータをJSONPathでクエリしたことがあれば（標準は RFC 9535）、ツリーに表示されるパスは、コードにそのままコピペできるJSONPath式と一対一で対応します。

JSONツリービューアの使い方

JSONを貼り付ける – 左のエディターにJSONを入れるか、「アップロード」をクリックして.jsonファイルを直接読み込みます。「サンプル」で小さな実例が得られます。
ツリーが構築される様子を見る – 右のパネルが構造をリアルタイムで描画します。各オブジェクトのキーには開閉用の三角形が表示され、各葉の値は型ごとの色付きで表示されます。
枝を展開・折りたたむ – 任意の枝をクリックして開いたり閉じたりできます。ノイズを隠して、本当に注目したい部分に集中するのに便利です。
パスを読む – 任意の葉にホバーすると、完全なJSONパス（例：$.profile.plan）が表示されます。コードやJSONPathクエリにそのままコピーできます。
配列を一目で見分ける – 配列はキーの横に長さを表示します（例：sectors [3]）。展開する前に中の要素数が分かります。

プロのヒント： 深くネストした構造がツリーでも読みづらい場合は、JSON to Table ビューに切り替えてください。似た形のオブジェクトの配列なら、テーブルのほうがツリーより速く読めます。

例

ネストした加入者レコード。左の生のJSONが、右ではたどりやすいツリーになります。すべてのオブジェクトが枝、すべての値が葉です。

JSON → ツリー Explore

subscriber.jsonJSON · ネスト

{
  "msisdn": "447700900142",
  "profile": {
    "name": "Rosalind",
    "plan": "Unlimited 5G"
  },
  "network": {
    "cellId": "AB12-3CF",
    "rsrp": -92
  },
  "roaming": true
}

ツリービュー4 枝 · 6 葉

▼ root
├── msisdn: "447700900142"
├── ▼ profile
│   ├── name: "Rosalind"
│   └── plan: "Unlimited 5G"
├── ▼ network
│   ├── cellId: "AB12-3CF"
│   └── rsrp: -92
└── roaming: true

よくあるユースケース

見慣れないAPIレスポンスを探索する

新しいAPIを初めて叩いたら、レスポンスが5階層ネストの400行のJSONの塊だった、ということがあります。波括弧をスクロールする代わりに、レスポンスをツリービューアに貼り付けましょう。最上位のキーが最初に表示され、関心のある枝だけを展開します。約30秒でレスポンスの形の頭の中のモデルができ、抽出したいフィールドへの正確なパスも分かります。

ネストした設定ファイルをデバッグする

ネットワーク要素の設定、Kubernetesマニフェスト、Terraformの状態ファイル — これらはすべて深くネストしたJSON（またはJSONの兄貴分であるYAML）です。ステージングで予期せぬ挙動をするのに本番では動く、というとき、両方をツリーとして開いて構造を並べて比較するほうが、1行ずつdiffを取るよりずっと速いです。実際の行レベルの比較には、JSON差分ツールと組み合わせてください。

教育とドキュメント

ドキュメントやコードレビューでAPIレスポンスを説明するとき、ツリー図は段落に勝ります。ここでレスポンスを開き、関連する枝を展開して、レイアウトをスクリーンショットするか文書にコピーしましょう。データモデル自体の復習が必要な読者には、MDNのJSONガイドを指し示すとよいです。

主な機能

遅延レンダリング – 展開した枝だけが描画されるので、数千キーのJSONファイルでも軽快さを保ちます。
型を意識した表示 – 文字列、数値、真偽値、nullがそれぞれ独自の色とラベルで表示されます。
配列の長さの注記 – 配列はキーの横に要素数を表示するので、何を展開しようとしているか分かります。
パスのホバー表示 – 任意のノードにホバーすると完全なJSONパスが表示され、コードやJSONPathクエリで使うためにそのままコピーできます。
ファイルアップロード対応 – 貼り付ける代わりに .json ファイルをドロップできます。クリップボードに収まらない大きなファイルに便利です。
プライバシー優先 – 解析もレンダリングもブラウザ内で行われ、何もアップロードされません。

よくある質問

ツリーはどこまで深くできますか？

固定の深さ制限はありません。JSON仕様も課しておらず、このツールも同様です。実際には、ブラウザは数百階層まで深くネストした構造を問題なく扱います。日常的にその深さに達しているなら、データに見直す価値のある設計上の問題があるかもしれません。

非常に大きなJSONファイルも扱えますか？

はい、ある程度までは。10 MB未満のファイルは瞬時に感じられます。50～100 MBあたりで、最初の解析に少し時間がかかると気づくでしょう。それを超えると、ブラウザのメモリが本当のボトルネックになります。そのサイズでは、コマンドラインの jq のようなストリーミング型のツールを検討してください。jqの公式ドキュメントがよく解説しています。

JSONに重複したキーがあります。どうなりますか？

厳密には、RFC 8259は重複キーを許可していますが、その挙動は実装定義です。ほとんどのパーサー（すべての最新ブラウザのものを含む）は最後の値を残して残りを黙って捨てるので、ツリーには最後の1つだけが表示されます。これが起きていると疑うなら、まず JSONバリデーターで検証してください。重複を警告として示すバリデーターもあります。

ツリーに表示されるJSONPathはjqのようなライブラリと互換性がありますか？

パスは RFC 9535（JSONPath）で定義された標準形式に従っており、ほとんどのJSONPathライブラリと広く互換性があります。jq は少し異なる構文を使いますが、変換は機械的です（$. を . に、[*] を [] に置き換える）。Stack Overflowのjqタグで詳しく扱われています。

データは安全ですか？

はい。JSONの解析とレンダリングは完全にブラウザ内で行われます。何もアップロード、キャッシュ、記録されません。ファイルをアップロードした場合も、ブラウザのメモリ内に留まり、タブを閉じると破棄されます。

役立つリソース

RFC 8259 – IETFのJSON仕様。ツリーが可視化するデータモデルを定義しています。
RFC 9535 — JSONPath – JSON構造をたどるための標準クエリ構文。
JSON.org – 文法図を備えたオリジナルのJSON仕様。
MDN JSON Guide – 初級から中級のJSONチュートリアル。
jq Manual – JSONをフィルタリング・変換するコマンドラインツール。スクリプトが必要な部分でこのビューアとよく組み合わせられます。
Stack Overflow JSON Tag – JSONの解析・走査・ツール関連の質問へのコミュニティの回答。

JSONツリービューア