JSONツリービューワー - JSONデータ可視化 オンライン
JSONをインタラクティブなツリー構造で可視化。展開、折りたたみ、ノード検索、JSONパスコピー — 100%クライアント、サーバー送信なし。
よくある質問
JSONツリービューアとは何ですか？
JSONツリービューアは、JSONデータを解析し、インタラクティブな階層ツリー構造として表示するオンラインツールです。括弧や中括弧を含む生テキストを読む代わりに、ノードの展開・折りたたみによりネストされたオブジェクトや配列を視覚的に探索できます。
このJSONツリービューアの使い方は？
左側の入力エリアにJSONデータを貼り付けるか、.jsonファイルをアップロードします。ツリービューが右側に自動的にレンダリングされます。三角アイコンをクリックしてノードを展開・折りたたみ、深さボタン（1, 2, 3, すべて）でツリーの深さを制御し、検索バーで特定のキーや値を検索できます。
データは安全ですか？サーバーに送信されますか？
すべてのJSON解析とツリー表示は、ブラウザのネイティブJSON.parse()を使用して100%クライアントサイドで実行されます。データはサーバーに送信されず、データベースに保存されず、どこにもログが記録されません。機密データにも安全に使用できます。
JSONPathとは何ですか？パスコピーはどのように機能しますか？
JSONPathはJSONのクエリ言語で、XMLのXPathに似ています。JSON構造内の特定の要素を参照する方法を提供します（例：$.data.users[0].name）。ツリー内の任意のノードをクリックすると、完全なJSONPathがパンくずバーに表示され、ワンクリックでコピーできます。
処理できるJSONの最大サイズは？
このツールは最大5MBのJSONファイルを処理できます。1MB未満のファイルの場合、解析はほぼ瞬時です。深さボタンを使用して折りたたんだビューから始め、必要なセクションだけを展開してください。
JSON Formatterツールとの違いは？
JSON Formatterはテキスト操作に焦点 — JSONテキストのフォーマット、整形、圧縮。JSON Tree Viewerは視覚的探索に焦点 — 展開/折りたたみ、検索、パスコピーを備えたインタラクティブツリーとしてレンダリング。両ツールは補完的です。
特定のキーや値を検索できますか？
はい。検索バーはキーと値を同時に検索します。一致するノードがハイライトされ、親ノードが自動展開されて一致を表示し、マッチカウンターが結果を表示します。前へ/次へボタンでマッチ間を移動できます。
どのJSONデータ型がサポートされていますか？
すべての標準JSONデータ型：文字列（緑）、数値（オレンジ）、ブール値（紫）、null（グレーイタリック）、オブジェクト（キー数付きで展開可能）、配列（アイテム数付きで展開可能）。各タイプに固有の色分けがあります。
コード例
// Build a tree from JSON and search it
function buildJsonTree(data, key = '$', path = '$', depth = 0) {
const node = { key, path, depth, type: getType(data) };
if (data === null) { node.value = null; return node; }
if (Array.isArray(data)) {
node.children = data.map((item, i) =>
buildJsonTree(item, `[${i}]`, `${path}[${i}]`, depth + 1));
return node;
}
if (typeof data === 'object') {
node.children = Object.entries(data).map(([k, v]) =>
buildJsonTree(v, k, `${path}.${k}`, depth + 1));
return node;
}
node.value = data;
return node;
}
function getType(v) {
if (v === null) return 'null';
if (Array.isArray(v)) return 'array';
return typeof v;
}
const json = { name: 'John', tags: ['dev', 'js'] };
const tree = buildJsonTree(json);
console.log(JSON.stringify(tree, null, 2));