JSONツリービューアオンライン — 大規模・入れ子のJSONを探索

JSONを貼り付けるかアップロードして、テキストの塊としてではなく、操作可能な折りたたみ式ツリーとして閲覧できます。任意のノードをクリックして展開・折りたたみでき、検索ボックスを使えば大きな構造の奥深くにあるキーや値へ直接ジャンプできます。すべてブラウザ内で完結し、データがアップロードされることはありません。

このツールとは？

JSONツリービューアは、JSON文書を操作可能なアウトラインに変換します。すべてのオブジェクトと配列は展開・折りたたみ可能なノードとなり、各キーには推測された型が表示され、末端の値はインラインで表示されます。何千行ものテキストをスクロールする代わりに、本当に必要な枝だけを掘り下げられます。

これはJSONフォーマッターとは異なります。フォーマッターはJSONのテキストにインデントを付けて見やすく書き直すツールで、整形・圧縮・構文検証だけが必要な場合に適しています。ツリービューアは、特にJSONが大きい、深く入れ子になっている、または必要なデータがどこにあるかまだわからない場合に、構造そのものを探索・ナビゲートするためのものです。JSONテキストを整形または検証したいだけの場合は、代わりにJSONフォーマッターを使ってください。

なぜこれを使うのか？

深く入れ子になったAPIレスポンスや設定ファイルを、どの括弧がどの階層に属するか見失うことなくナビゲートできます。
キー名や値で検索して該当箇所へ直接ジャンプでき、そこに至るパスは自動的に展開されます。
非常に大きなJSON（数MB）でもスムーズに処理できます。子ノードは展開したときにだけ構築されるため、タブが固まることはありません。
文字列・数値・真偽値・null・オブジェクト・配列といった各値の型が、わかりやすいラベルで一目でわかります。
完全にプライベート：解析とレンダリングはすべてブラウザ内で行われ、何もアップロードや保存されません。

使い方

JSONを入力ボックスに貼り付けるか、ファイル選択でディスクからJSONファイルを読み込みます。
「ツリーを表示」をクリックしてインタラクティブなビューを構築します。
オブジェクトや配列の横にある矢印をクリックすると展開・折りたたみができます。2〜3階層より深いノードはデフォルトで自動的に折りたたまれ、大きなファイルでも軽快に動作します。
検索ボックスにキー名や値を入力すると該当箇所を検索します。ツールはその経路上のすべての親ノードを展開し、結果までスクロールしてハイライト表示します。
複数の一致がある場合は、次へ／前へボタンで順に移動できます。

例

入力

{"user":{"id":42,"name":"Ada","roles":["admin","editor"],"active":true,"manager":null}}

出力

user: { 4個のキー }
  id: 42（数値）
  name: "Ada"（文字列）
  roles: [ 2個の項目 ]
    0: "admin"
    1: "editor"
  active: true（真偽値）
  manager: null

各行にはキー、推測された型、そして末端ノードなら値、オブジェクト・配列なら展開するまでの折りたたみ件数が表示されます。

実践的なヒント

巨大なAPIレスポンスでは、ノードを一つずつ手動で展開するのではなく、まず特徴的なフィールド名（idやエラーコードなど）を検索しましょう。検索がそこへ直接移動してくれます。
最初の2〜3階層より深いノードは意図的にデフォルトで折りたたまれており、数MBのデータでも軽快に動作します。必要な枝だけを展開してください。
型バッジ（文字列、数値、真偽値、null、オブジェクト、配列）は、想定外にnullになっているフィールドや、オブジェクトを期待していた場所が配列になっている箇所を見つけるのに特に役立ちます。
構造を探索するのではなく、単にJSONの断片を整形または検証したいだけなら、JSONフォーマッターのほうが速く済みます。

実際のワークフローでの位置づけ

深く入れ子になったAPIレスポンス、データベースのエクスポート、設定ファイルは、フラットなテキストのままでは理解しづらく、どの閉じ括弧がどのキーに対応するか見失いがちです。同じデータをツリービューに読み込めば、不要な部分をすべて折りたたみ、本当に重要な枝だけに集中できます。これは整形済みのテキストの塊を1つのフィールドを探してスクロールするよりもはるかに速い方法です。

よくある流れとしては、まず大きなwebhookのペイロードをここに貼り付けて構造を理解し、必要なフィールドを見つけます。その後、バグ報告やコードレビューに貼り付けるための整形済みでインデントの付いたテキストが必要な場合は、JSONフォーマッターに切り替えます。

→ JSONフォーマッタ

よくある使用例

コードを書く前に、大規模で深く入れ子になったAPIレスポンスの中で特定のフィールドがどこにあるかを探す。
何千行もの生テキストをスクロールすることなく、大きな設定ファイルやエクスポートファイルを確認する。
自分のコードで解析する前に、見慣れないJSONペイロードの構造と型を確認する。
大きなJSON文書のどこかに埋もれている特定の値（ID、エラーメッセージ、タイムスタンプなど）を見つける。

よくある質問

JSONフォーマッターとの違いは何ですか？

JSONフォーマッターはJSONテキストにインデントを付けて書き直したり、圧縮したり、構文を検証したりします。つまりテキストそのものを扱います。JSONツリービューアは解析済みの構造を、クリックして検索できるインタラクティブな折りたたみ式ツリーとして表示します。大規模または深く入れ子になったデータの形を探索・理解するためのもので、整形済みテキストを出力するためのものではありません。

巨大なJSONファイルを読み込むとブラウザが固まりませんか？

固まりません。ツリーは遅延構築されます。初回表示時には最初の2階層程度しか構築されず、それより深い部分は展開をクリックした瞬間に初めて構築されます。まだ見ていないデータのためにDOMノードを事前に作る必要がないため、数MB規模のファイルでも初回表示が高速に保たれます。

JSONデータはどこかにアップロードされますか？

されません。解析、表示、検索はすべてブラウザ内でJavaScriptを使ってローカルに行われます。データが端末の外に出ることはありません。

検索はどのように動作しますか？

検索は画面上に現在表示されている部分だけでなく、解析済みの完全なデータ内のすべてのキー名とすべてのプリミティブ値を対象にチェックします。一致が見つかると、それが見えるようにすべての祖先ノードを自動的に展開し、その位置までスクロールして短時間ハイライト表示します。一致が複数ある場合は、次へ／前へボタンで順に確認できます。

折りたたまれたノードの中も検索できますか？

できます。検索は、ビュー上でどのノードが現在展開または折りたたまれているかに関わらず、常に元となる完全なJSONオブジェクトを走査します。ノードを折りたたむことは画面上の表示だけに影響し、検索できる内容には影響しません。

JSONツリービューア