コンテンツへスキップ

JSONツリービューア

折りたたみ・検索可能なツリー形式でJSONを探索でき、タイプ別に色分け表示されます。キーをクリックするとドット記法のパスをコピーできます。

 

使い方

このツールはJSONを解析し、タイプ別（文字列、数値、真偽値、null）に色分けされた折りたたみ可能なツリーとして表示します。一致するキーと値に絞り込める検索ボックスや、各キーのクリックでaddress.cityやtags[0]のような完全なドット記法パスをコピーできるボタンも備えています。

  1. JSON貼り付け

    有効なJSONオブジェクト、配列、または値です。

  2. 展開・折りたたみ・検索

    矢印をクリックしてブランチを折りたたむか、テキストを入力して絞り込んでください。

  3. キーをクリックするとパスがコピーされます

    パスをコードにそのまま貼り付けて使用できます。

ツリーの読み方

各行にはキー、または配列項目の場合は角括弧内のインデックスが表示され、その後に値が続きます。オブジェクトと配列には子要素の数が表示され、1行に折りたたむことも可能です。キーをコピーした際に表示されるパスは通常のJavaScriptプロパティアクセスに従います。ネストされたオブジェクトフィールドはドットで結合され（address.city）、配列インデックスは角括弧で結合されます（tags[0]）。

ブラウザ上で動作し、サイズ制限はありません

解析とレンダリングはこのページのJavaScript内でのみ行われます。個人情報、APIキー、内部構造を含む可能性のあるJSONデータが外部に送信されることはありません。深度やサイズのハードコードされた制限はありませんが、数千以上のノードを持つJSONドキュメントの場合、すべてのノードがDOM要素となるため、ページのレンダリングが遅くなる可能性があります。非常に大きなファイルの場合は、不要な最上位ブランチを折りたたむか、検索ボックスを使用して目的のキーに直接移動してください。

よくある質問

複雑にネストされたJSONオブジェクトを視覚的に探索するにはどうすればよいですか?

入力エリアにJSONを貼り付け、「ツリー解析」をクリックしてください。各ブランチを個別に展開または折りたたみできるツリーが表示されます。文字列は緑、数値は青、ブール値は琥珀色、null値は灰色のイタリック体で表示されます。「すべて展開」または「すべて折りたたみ」を使用すると大きな構造体をすばやく操作でき、検索ボックスに入力すると一致するキーと値に絞り込めます。

ネストされたJSONキーへのパスをコピーするにはどうすればよいですか?

レンダリングされたツリービュー内の任意のキーまたは配列インデックスをクリックしてください。address.cityやtags[0]などの完全なドット記法パスがクリップボードにコピーされます。これは、深くネストされた値にアクセスするコードを記述する際に、配列インデックスを手動で数えたりプロパティ名を連結したりすることなく正確なパスを取得したい場合に特に便利です。

JSONツリービューアーの使用時にJSONデータはサーバーに送信されますか?

いいえ。解析と描画はすべてブラウザ内のJavaScriptで完結します。個人情報、APIキー、内部データ構造を含む可能性のあるJSONデータが外部にアップロードや送信されることはありません。あらゆるJSONペイロードで安全にご利用いただけます。

このツリービューアで処理できるJSONの最大深度やサイズはどのくらいですか?

ツリーレンダラーにハードコードされた深度制限はありませんが、数百レベルや数千ノードなど非常に大規模または深くネストされたJSONは、各ノードがDOM要素を生成するためページの描画が遅くなる可能性があります。非常に大きなJSONファイルの場合は、トップレベルのノードを折りたたんで必要なセクションのみを展開するか、検索ボックスを使用して目的のキーを直接絞り込んでください。

JSONツリービューアが認識して色分けする型は何ですか?

このツールは4つのプリミティブ型を認識し、色分けして表示します。string(緑)、number(青)、boolean(琥珀色)、null(灰色イタリック)です。配列とオブジェクトは折りたたみ可能なブランチとして表示され、子要素の数が示されます。これにより型の不一致を簡単に発見でき、例えば数値であるべきフィールドが実際には引用符付き文字列であることなどに気づけます。