ツール
ガイド

JSON ツリービューアー

JSON

JSON を折りたたみ可能なツリーとして表示します。

100% クライアントサイド バックエンドなし
入力
出力
このページの内容

JSON ツリービューアーとは？#

JSON ツリービューアーは、JSON ドキュメントを解析し、ファイルエクスプローラーがディレクトリツリーを表示するのと同じように、折りたたみ可能なアウトラインとして描画します。インデントされた長いテキストを読み、何がどこに入れ子になっているかを把握するために波括弧を数える必要はありません。構造がひと目で分かります——オブジェクトと配列はクリックして開閉できるブランチ、文字列・数値・真偽値・null といったリーフ値はその先端に置かれます。

これが最も役立つのは、ドキュメントが深い場合や初見の場合です。1 つの API レスポンスが軽く数百行に及ぶこともあります。設定ファイルでは、似た名前の下に 4〜5 階層も入れ子になった設定が存在し得ます。フラットなフォーマッターではスクロールして位置を見失います。ツリーなら、関心のあるブランチ以外をすべて折りたためるため、残りのノイズに注意を奪われません。

このページはブラウザ内で JSON を解析し、ノードごとに折りたたみ可能なツリーを描画します。入力を HTML として解釈するのではなく、プレーンテキストとして描画するため、<script> タグや HTML のように見える文字列を含むドキュメントであっても、実行されずに無害な文字列として表示されます。

使い方#

  1. 左側の入力ペインに JSON を貼り付けます。入力に従って解析が行われます。
  2. ツリーが右側に表示されます。各オブジェクトや配列は ▼ の切り替えボタン、開き括弧（{ または [）、内側のエントリ数、閉じ括弧を示します。切り替えボタン、あるいは括弧そのものをクリックして、そのブランチを折りたたみ・展開します。
  3. すべて展開で全ブランチをリーフまで開き、すべて折りたたむでドキュメント全体をルートだけに縮めます。折りたたみは、巨大なペイロードの全体像を 1 行でつかんでから掘り下げるための手段です。
  4. 右側のヘッダーにはルートの最上位エントリ数（例えば 5 件）が表示されるため、ドキュメントの規模がひと目で分かります。
  5. サンプルは入れ子構造のデモドキュメントを読み込みます。クリアは両ペインを空にします。

主な特徴#

  • ブランチごとに独立して折りたたみ可能。 それぞれのコンテナが独自に開閉するため、あるサブオブジェクトだけを参照用に展開したまま、残りを折りたたんでおけます。
  • 階層のガイド線。 子要素は縦のガイド線に沿ってインデントされるため、密集したドキュメントでも、各エントリがどの波括弧に属するかが明確です。
  • XSS セーフな描画。 すべてのラベルと値はプレーンテキストとして書き込まれ、入力が HTML として解析されることはありません。悪意のある文字列は単なるテキストとして表示されます。
  • 忠実なリーフ値。 文字列は前後のクォートを保ち、数値は JSON.stringify が書くのと同じ形で描画されるため、true（真偽値）と "true"（文字列）が視覚的に区別できます。
  • リアルタイムカウント。 ヘッダーがルートのエントリ数を報告し、編集に合わせて更新されます。

実例#

サンプルを読み込むと、解析されたツリーは 5 つの最上位エントリを持つルートオブジェクトを示します:

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

これらのエントリのうち 2 つは、それ自体がコンテナです。tags を展開すると 3 要素の配列（"json"、"encoding"、"crypto"）が現れ、features を展開すると static が true、backend が null であることが分かります——これは、フラットなダンプから推測するしかなかった違いをツリーが明示的に描画するということです。

features サブオブジェクトだけに関心があるなら、最上位の他の ▼ をすべてクリックして折りたたんでください。ルートのカウント 5 は正確なまま保たれ、ガイド線により static と backend がルートではなく features に属することが明確に分かります。

よくある質問#

JSON を変更したり再整形したりしますか？#

いいえ。ツリーは解析された値の読み取り専用ビューです。入力テキストが書き換えられたり、再インデントされたり、出力されたりすることはありません。ドキュメントをテキストとして整形したい場合は、フォーマッターを使ってください。このツールは正規化ではなく、ナビゲーションのためのものです。

ツリー内の文字列にまだクォートがついているのはなぜですか？#

それが JSON 自身の、文字列と裸のキーワードを区別する方法だからです。クォートがなければ、true と "true" は同じに見え、null と文字列の "null" も同じに見えてしまいます。クォートを保つ（JSON.stringify が生成する形と正確に一致させる）ことで、その違いをひと目で保持できます。

非常に大きなドキュメントは扱えますか？#

解析と描画はすべてブラウザ内で行われるため、アップロードもサーバー往復もありません。典型的な設定ファイルや API レスポンスなら瞬時です。数メガバイトのドキュメントでは、ツリーがすべての値に対してノードを作成しなければならないため、もたつくことがあります——不要なブランチを折りたたんで、表示ノード数を抑えてください。

HTML を含む文字列は HTML として描画されますか？#

決してありません。このツールはすべての値をテキストコンテンツとして書き込み、ブラウザはそれを無害な文字として扱います。たまたま <script> や <img onerror=...> を含む文字列は、マークアップとして解析されず、実行もされず、そのままテキストとして表示されます。