← 記事一覧
更新日: May 29, 20266 min read

JSON ツリービューワー: JSON を折りたためる木として探索

JSON をインタラクティブで折りたためる木として表示。大きくネストしたペイロードを、ブラウザ内でアップロード不要に探索できるよう、任意のオブジェクト/配列を展開・折りたたみ。

5,000 行の API レスポンスは生テキストでは読めません。折りたたみ可能な JSON ツリー はその波括弧の壁を、枝ごとに展開・折りたたみできるインタラクティブな構造に変えてくれます —— 他のすべてをスクロールせずに、目当てのフィールドを見つけられる。本ガイドでは JSON tree viewer とは何か、大きい・深く入れ子のデータに対してなぜ生テキストより優れるか、formatter や validator ではなくツリーを選ぶべきタイミングを解説します。

折りたたみ可能な JSON ツリーとは？

JSON tree viewer は JSON をパースし、平坦なテキストブロックではなく展開可能ノードの階層としてレンダリング。各オブジェクト {} と配列 [] は、一行に畳めるか展開して子を見せられるノードになります。これは JSON を 読む のと ナビゲートする の違い。

// 折りたたみ —— 形が一目で分かる
{
  "user": {…},        ▶ 6 keys
  "orders": […],      ▶ 24 items
  "meta": {…}         ▶ 3 keys
}

ノードをクリックすると展開、もう一度クリックすると一行サマリーに戻ります。隠れたキーやアイテム数の表示が付くことが多い。データ自体は変わらず、見ている量だけが変わる。

なぜツリーがテキストの壁に勝つか

フォーマット（pretty-print）は JSON を読みやすくしますが、大きな整形済み文書は依然としてスクロールが必要な数千行。ツリーは あなたがコントロールできる構造 を加えます：

  • 深く入れ子のデータ —— 設定ファイル、Kubernetes マニフェスト、GraphQL レスポンスは何層も入れ子になります。気にしない枝を畳むと、関連セクションが上に浮き上がる。
  • 大きな API レスポンス —— 500 要素の配列を一行に畳み、デバッグ中の一要素だけ展開。
  • 見覚えのない payload —— すべてをトップレベルに畳めば、パースコードを一行書く前に API の形の地図が一瞬で手に入る。
  • 構造の比較 —— 折りたたまれたノードで、二つの payload が共有するセクションがすぐ分かる。

展開・折りたたみ・ナビゲート

良い JSON tree viewer はクリック切替だけでなく多くを提供：

  • ノード単位の展開・折りたたみ —— 調べている枝だけ開く。
  • 全折りたたみ・全展開 —— ノードを一つずつ閉じるのではなく即座にビューをリセット。
  • アイテム・キー数 —— 折りたたんだノードに ▶ 24 items または ▶ 6 keys が表示され、方向感覚を保てる。
  • 構文ハイライト —— キー、文字列、数値、真偽値、null それぞれに別の色が付き、型が一目瞭然。
  • キーナビゲーション —— 数千行をスクロールせずに目的フィールドへジャンプ。

パスで検索：JSONPath と JMESPath

ツリーが開いた次の質問はたいてい 「このキーはどこ？」。二つの小さなクエリ言語が、クリックではなくパスで値を指せます：

  • JSONPath —— XPath にインスパイアされ、 RFC 9535 として標準化。 $.user.orders[*].id は「user.orders の中のすべての id」と読みます。ワイルドカード、スライス、フィルタ（?(@.price > 10)）、再帰下降（..price）に対応。
  • JMESPath —— AWS CLI の --query や多くのクラウドツールで使用。見た目は似ているが、一級のプロジェクションと関数： users[?active].name。

tree viewer は探索用、JSONPath／JMESPath は再現可能な抽出用。組み合わせる：まずツリーでパスを 見つけ、それを JSONPath 式としてスクリプトや jq で記録。

Tree viewer vs Formatter vs Validator —— どれを使うか

やりたいこと使うもの
大きな／入れ子の JSON をナビゲート・探索Tree viewer
コピーやコミット用のきれいなインデント付きテキストを得るFormatter / pretty-printer
JSON が構文的に妥当か確認しエラーを見つけるValidator
二つの文書で何が変わったか見るDiff ツール

これらは重なります —— 多くのモダンツールはフォーマット と ツリー描画の両方を行う —— が、どれに手を伸ばすかを決める質問は、コピーする出力（formatter）か 探索する構造（viewer）かのどちらが必要か。全比較は JSON Viewer vs JSON Formatter。

見る前に壊れた JSON を直す

tree viewer はツリーを組むのに妥当な JSON が必要 —— パースできない構造は描けません。入力に末尾カンマ、一重引用符、引用符なしキー（手書き設定や LLM 出力でよくある）があれば、まず修復。良い viewer は描画前に一般的なミスを自動修復します。そうでなければ JSON Fix で整えるか validator で正確なエラーを確認。基礎ルールは JSON とは？

よくある質問

折りたたみ可能な JSON ツリーとは？

JSON を平坦なテキストではなく展開可能ノードの階層としてレンダリングするビュー。各オブジェクトと配列を一行サマリーに畳んだり、展開して子を見せたりでき、大きな文書を全部スクロールせずにナビゲートできる。

JSON tree viewer は formatter とどう違う？

formatter はコピーするきれいでインデント付きの テキスト を出力、tree viewer はクリックでたどるインタラクティブな 構造 を描画。出力には formatter、探索には viewer。全比較 を参照。

個々のノードを折りたたみ・展開できますか？

はい —— 任意のオブジェクトや配列をクリックして切替、「collapse all」/「expand all」でビュー全体を一気にリセット。畳まれたノードは隠れたキーやアイテム数を表示。

JSON が無効ならどうする？

ツリーはパース可能な JSON からしか組めません。まず JSON Fix で一般的なエラーを修復するか、JSON validator で正確な問題を見つけ、整えた結果を見る。

JSON をツリーとして探索

任意の JSON を fixjson の JSON Viewer に貼ると即座に折りたたみ可能なツリーを描画 —— 任意のノードを展開・折りたたみ、アイテム数を確認、大きい入れ子 payload をナビゲート。描画前に壊れた JSON を修復し、すべてブラウザ内で動くのでアップロードはなし。