完全無料

JSON ツリー ビューアー

JSONデータをインタラクティブな折りたたみツリーで表示・整形・探索。無料・安全・アップロード不要。

JSONファイルをドラッグ&ドロップ

または下にJSONテキストを貼り付け

または

このツールについて

JSON ツリー ビューアは、JSON データをプレーン テキストではなく、ナビゲート可能な階層ツリーとして表示します。各オブジェクトは折りたたみ可能なブランチになります。配列は項目を個別に表示します。プリミティブ値は葉として表示されます。構造ビューを使用すると、深くネストされたデータ内の特定のフィールドを簡単に見つけたり、無関係なサブツリーを折りたたんだり、フラット テキストとして管理できない大きな JSON ドキュメントをナビゲートしたりすることができます。

フォーマットされた JSON テキストと比較して、ツリー ビューは大規模なデータのナビゲーションに優れています。 10MB の API 応答をテキストとしてスクロールするのは現実的ではありませんが、気にしないトップレベルのキーを折りたたんで、関心のある部分だけを展開するツリーとして扱うことは可能です。

このビューアは、ブラウザの構造化ツリーに JSON をレンダリングします。検索では、キーまたは値で分岐をフィルターします。型を認識した表示では、文字列、数値、ブール値、null、オブジェクト、配列が区別されます。

JSON ツリー ビューアを使用する理由

深くネストされたデータはテキストとしてナビゲートするのが困難です。構成ファイル、API 応答、およびシリアル化された状態には、多くの場合、5 レベル以上のネストがあります。ツリー ビューを使用すると、無関係なレベルを折りたたんで、重要なことに集中できます。テキストビューでは、慎重にスクロールして括弧を数える必要があります。

検索とフィルターの機能も重要です。検索対応ビューアを使用すると、複雑なドキュメント全体で「user_id」という名前のすべてのキーを高速に検索できます。プレーンテキストでは確実に実行することは不可能です。

使い方

JSON を貼り付け、ツリー内を移動します。

  1. JSON を貼り付けます: JSON を入力領域にドロップします。ビューアは構造化ツリーを解析してレンダリングします。
  2. 展開と折りたたみ: ブランチをクリックして展開または折りたたむことができます。大規模なデータの特定のサブツリーに焦点を当てるのに役立ちます。
  3. 検索: キーまたは値でフィルターします。一致するブランチは表示されたままになります。一致しないものは非表示になります。
  4. 特定の値を検査する: リーフをクリックして完全な値を表示し (長い文字列の場合に便利)、コードで使用するためにパス (users.0.profile.email など) をコピーします。

一般的な使用例

技術的な詳細

JSON 解析では JSON.parse が使用されますが、無効な入力では失敗し、問題の場所を示す解析エラーが発生します。有効な JSON は JavaScript オブジェクトにレンダリングされ、ビューアはそれを再帰的に実行してツリーを生成します。

レンダリング: ネストの各レベルはインデントされたブランチになります。オブジェクトキーはラベルです。値はタイプに基づいてレンダリングされます。引用符で囲まれた文字列、引用符のない数値、true/false としてのブール値、明示的な null、折りたたみ可能な分岐としてのオブジェクトと配列です。

パフォーマンス: 非常に大きい JSON (10MB 以上) はレンダリングを遅くする可能性があります。遅延拡張 (現在表示されているブランチのみをレンダリング) が役に立ちます。大きなドキュメントにわたる検索にはかなりの時間がかかる場合があります。最初の解析時にツリーにインデックスを付けると役立ちます。

ベストプラクティス

よくある質問

JSON ツリーはどこまで深くまで進むことができますか?
人為的な深さの制限はありません。このツールは、JSON 構造と同じ深さのツリーをレンダリングします。ただし、非常に深いネスト (100 以上のレベル) を使用すると、ブラウザでのレンダリングが遅くなる可能性があります。
JSON ツリー内で検索できますか?
Ctrl/Cmd+F を使用してキーまたは値を検索します。一致するノードが強調表示され、その親ノードが自動的に展開されてパスが表示されます。
どのような JSON パス形式が使用されますか?
このツールは、JSONPath ドット表記 ($.key.nested.array[0].value) を使用します。この形式は、JavaScript プロパティ アクセスおよびほとんどの JSONPath ライブラリと互換性があります。
ツリー内の値を編集できますか?
これは探索用の読み取り専用ビューアです。 JSON を編集するには、検証機能を備えた編集可能なインターフェイスを提供する JSON Formatter ツールを使用します。
私のデータはアップロードされていますか?
いいえ。解析とレンダリングはブラウザーで行われます。
ツリーの一部をエクスポートするにはどうすればよいですか?
ほとんどのビューアは、選択したブランチに対して copy-as-JSON を提供します。エクスポートされた値は、選択したキーのみを含む同じ構造です。
データが大きいとツリーが遅くなるのはなぜですか?
多くのノードの DOM レンダリングはコストがかかります。遅延拡張 (表示されるブランチのみをレンダリング) が役に立ちます。非常に大きなデータの場合は、専用ツール (jq、code) の方が効率的です。
URL から JSON を表示できますか?
一部のビューアは URL を直接取得します。その他は貼り付けが必要です。 CORS により、一部の URL からのクロスオリジンフェッチが妨げられる場合があります。