JSONの構造をツリーで確認する
JSONを貼り付けるかファイルを読み込み、必要な枝だけを展開してキー・値・パスを確認します。
JSON Tree Viewerを開く結論：警告を確認し、どちらかへ統合して一意にする
Tree Viewerは重複Pairを残して警告するため、上書き前の状態を確認できます。実運用では意味を確認して1つへ統合し、利用先Parserでも検証します。
JavaScriptのJSON.parseなどは一般に後の値を残します。Treeで見えた両方がConsumerでも保持されるとは限りません。
重複キーを含むObject
{"role":"viewer","role":"admin","enabled":true}roleが同じObject内で2回現れます。Treeでは両Pairと重複警告を確認します。
重複の発生源を切り分ける
手編集、Template展開、Object Merge、複数設定の連結を確認します。
| 確認点 | 見方 | 判断 |
|---|---|---|
| 位置 | 同じ親Objectか | 別階層の同名は重複ではない |
| 値 | 両方の型と内容 | 統合方針を決める |
| 利用先 | Parser挙動 | 上書き・拒否を確認 |
重複キーを調査する手順
- 1. JSONをTree表示して警告を確認します。
- 2. 警告されたObjectを開き、同名Pairを確認します。
- 3. どちらを採用するか仕様と生成元を確認します。
- 4. 一意へ修正し、Formatterと利用先で再検証します。
Object・Array・値の型をツリーで読む
| 表示 | JSON上の意味 | 確認する点 |
|---|---|---|
| {n} | n個のメンバーを持つObject | キー名と親子関係 |
| [n] | n個の要素を持つArray | 0から始まる添字と要素順 |
| string / number | 文字列または数値 | 引用符の有無と元の数値表記 |
| boolean / null | true・falseまたはnull | 文字列の"true"・"null"と区別 |
現行ツールはObject、Arrayだけでなく、文字列・数値・真偽値・nullをルートにしたJSONも表示できます。空の{}と[]も有効なJSONとして扱います。
検索・展開・折りたたみを使い分ける
| 操作 | 現在の対応 | 使いどころ |
|---|---|---|
| 検索対象 | すべて・キー・値・パス | 同名キーや値を候補から絞る |
| 一致方法 | 部分一致・完全一致・大文字小文字の区別 | 既知の名前を正確に探す |
| 候補移動 | 前へ・次へ、祖先と配列範囲を自動展開 | 一致位置を順番に確認する |
| 表示範囲 | 初期深度0～10、すべて展開、すべて折りたたむ | 必要な枝だけDOMへ描画する |
正規表現検索は未対応です。Arrayは100要素ごとの範囲ノードへまとめますが、画面に見える行だけを再利用する仮想スクロールではありません。
JSON Pointerと生成パスを混同しない
| 表現 | 例 | 役割 |
|---|---|---|
| JSON Pointer | /orders/0/id | RFC 6901に基づき1つの位置を指す |
| 生成JSONPath | $.orders[0].id | 選択ノードの位置を読みやすく示す |
| JSONPathクエリ | $.orders[?(@.active)] | 条件に合う複数ノードを検索する式 |
JSON Tree Viewerは選択ノードのPointerとJSONPath風の位置表現を生成・コピーします。JSONPath式を評価する検索エンジンではないため、FilterやWildcardの動作確認にはJSONPath Testerを使います。
Pointerではキー中の「~」を「~0」、「/」を「~1」へエスケープします。表示された値を手作業で省略せず、そのまま共有してください。
JSON FormatterとTree Viewerの役割を分ける
| 目的 | 使うツール | 確認内容 |
|---|---|---|
| 構文エラー位置、インデント、圧縮 | JSON Formatter（tools/converters/json-formatter.html） | テキスト表現を整える |
| 階層、型、親、ノードのPath | JSON Tree Viewer | 構造を折りたたんで追う |
| データ仕様を作る | JSON Schema Generator（tools/generators/json-schema-generator.html） | 型やrequired候補をSchema化 |
| 変更前後を確認する | テキスト差分比較（tools/comparators/diff-viewer.html） | 行・文字単位の変更を比較 |
整形とツリー表示は競合する機能ではありません。まず厳密JSONとして読める状態を確認し、次にTreeで目的の枝を調べ、必要なら選択ノードだけをコピーします。
大容量JSONと機密情報を安全に扱う
- ParseはWeb Workerで行い、深い階層は明示的なStackで処理します。検索も一定件数ごとにUIへ制御を戻します。
- 閉じた枝は子要素をDOMへ描画せず、Arrayは100要素単位でまとめます。ただし全ノードの解析結果はMemoryに保持します。
- 10MBを超えるファイルでは確認メッセージを出します。固定の完全対応上限ではなく、端末MemoryとBrowserの制約を受けます。
- 入力JSON、ファイル内容、検索語はServerへ送信・保存しません。localStorageへ保存するのはThemeや文字Sizeなどの表示設定だけです。
認証Tokenや個人情報を含むJSONは、画面共有・Clipboard・Download後のファイルから漏れる可能性があります。共有前にはJSONマスキングツールで値を置換してください。
現在のJSON Tree Viewerでできること・できないこと
| 項目 | 現在の対応 | 未対応・注意点 |
|---|---|---|
| 入力 | 貼り付け、.jsonファイル、Drag & Drop | URL取得、Clipboard自動読込はない |
| JSON | Object・Array・Primitive、空構造、重複キー警告 | JSONL、JSONC、Comment、Trailing Commaは非対応 |
| 閲覧 | 初期深度、個別展開、全展開・折りたたみ、100件単位のArray範囲 | 画面行の仮想化と編集はない |
| 検索 | すべて・キー・値・パス、部分・完全一致、大小文字区別 | 正規表現とJSONPath式評価はない |
| 詳細 | 型、親、深さ、子数、JSON Pointer、生成JSONPath | Breadcrumb形式の編集UIはない |
| 出力 | JSON全体、キー、値、Pointer、Path、選択ノードをCopyし、ノードを保存 | 独立したPretty表示Tabはない |
仕様を一次資料で確認する
- RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format
- RFC 6901: JavaScript Object Notation (JSON) Pointer
- RFC 9535: JSONPath: Query Expressions for JSON
- MDN: JSON.parse()
RFC 8259はJSONの文法、RFC 6901は位置参照、RFC 9535はJSONPathクエリを定義します。ツール固有の表示名と標準仕様を分けて判断してください。
設定Mergeでroleが二重になる例
Base設定と環境設定を文字列連結すると重複が生じます。
ObjectとしてMergeし、意図した上書き規則をTestします。
- 両値を確認する
- 生成処理を特定する
- 修正後に警告が消えることを確認する
- 確認結果をPath・型・警告と一緒に記録します。
重複キーをSyntax Errorとして拒否する実装もあります。
よくある質問
- 重複キーはJSON仕様上必ずエラーですか？
- 文法上受理される場合がありますが、RFC 8259はObject名を一意にすべきとし、挙動の相互運用性がありません。
- Tree Viewerは後の値だけ残しますか？
- 残しません。Pairを保持して表示し、警告します。