JSONツリービューア - 構造表示＆パス取得

JSONツリービューアとは？

JSONツリービューアは、JSONデータをノードの展開・折りたたみが可能なツリー形式で視覚化するツールです。データ型（文字列・数値・真偽値・配列・オブジェクト・null）を色分けで区別し、統計情報（総キー数・最大深度・型別カウント）も確認できます。ノードをクリックするとそのJSONPath（例: $.users[0].name）をクリップボードにコピーできます。深くネストされたJSONの構造把握に特に有効です。

関連: JSON整形 · JSON差分比較 · JSON → コード変換

使い方

1. テキストエリアにJSONを貼り付けます
2. 「ツリー表示」ボタンをクリックします
3. ノードをクリックして展開/折りたたみができます

使用例

入力例:
{"users":[{"id":1,"name":"田中"},{"id":2,"name":"鈴木"}]}

ツリー表示:
▾ users (配列: 2件)
  ▾ [0] (オブジェクト)
    id: 1 (数値)
    name: "田中" (文字列)
  ▾ [1] (オブジェクト)
    id: 2 (数値)
    name: "鈴木" (文字列)

実務での利用例: 深くネストされたAPIレスポンスのJSONの構造を把握し、目的のフィールドのJSONPathをコピーしてコードに貼り付ける

よくある質問

大きなJSONも表示できますか？

はい。デフォルトでは深さ2まで展開されます。大きなJSONでもスムーズに操作できます。

JSONPathはどのような形式でコピーされますか？

$.key.subkeyや$.array[0].fieldのようなJSONPath形式でコピーされます。jQueryやJayWayなど主要なJSONPathライブラリで使用できます。

展開・折りたたみはどのように操作しますか？

ノードをクリックすると展開・折りたたみが切り替わります。初期状態は深さ2まで展開されます。

配列の要素数はどこで確認できますか？

配列ノードのラベルに要素数が表示されます。統計情報パネルにも型別の集計が表示されます。

データはサーバーに送信されますか？

いいえ。すべての表示処理はブラウザ内で完結します。機密データも安全にご利用いただけます。

関連ツール