JSON をツリー表示する方法
- JSON を貼り付けるか、ファイルをドロップ、または URL から読み込みます。テキストの横にツリーが表示されます。
- 行をクリックすると展開・折りたたみができます。すべて展開やすべて折りたたむも使えます。キーボードでは ↑ と ↓ で移動し、← と → でノードを閉じたり開いたりします。
- 検索ボックスに入力すると、一致するキーと値だけが表示されます。ノードを選択すると、その JSONPath、JavaScript のパス、値をコピーできます。
JSON ツリーの見方
- オブジェクトにはキーの数（例：
{5}）、配列には要素の数（例：[12]）が表示されます。 - 色と小さなバッジで、各値の型（文字列、数値、真偽値、null、オブジェクト、配列）がわかります。
- 長い配列は 200 件ずつ表示されるため、数十万個の値を含むファイルでも快適に操作できます。
- 数値は書かれたとおりに表示され、長い ID が丸められることはありません。キーも元の順序のまま表示されます。
JSONPath とは？
JSONPath は、ファイルパスのように、JSON ドキュメント内のどこに値があるかを表す記法です。2024 年に RFC 9535 として標準化されました。$ はルート、.name はプロパティ、[0] は配列の要素、['first name'] は名前にスペースや特殊文字を含むプロパティを選択します。
| パス | 選択対象 |
|---|---|
$.store | ルートオブジェクトの store プロパティ |
$.products[0] | products 配列の最初の要素 |
$.products[0].price | その最初の商品の価格 |
$.address.geo.lat | 3 階層下にネストした値 |
$['shipping address'].city | 名前にスペースを含むキー |
JavaScript では、同じ値は data.products[0].price と書きます。この形式を取得するには JS パスをコピーを使います。
よくある質問
大きな JSON ファイルも開けますか？
はい。ツリーは展開した部分だけが描画され、長い配列は 200 件ずつ表示されるため、デスクトップのブラウザなら数十 MB のファイルも開けます。
値のパスをコピーするには？
ノードをクリックし、JSONPath（$.users[0].email）ならパスをコピー、JavaScript（data.users[0].email）ならJS パスをコピーを使います。
ビューアで JSON を編集できますか？
ビューアは読み取り専用なので、誤って内容が変わることはありません。値の変更、キー名の変更、要素の追加を行うには、JSON エディタを開いてください。
JSON が無効な場合はどうなりますか？
エラーボックスに問題の行・列・原因が表示され、エラーが修正されるまで、ツリーには最後に有効だったバージョンが表示され続けます。