JSON Tree Viewer

使い方

1. JSON を入力欄に貼り付けます。オブジェクト、配列、単一のスカラー値のいずれでも構いません。
2. ツリーが自動生成されます。オブジェクトは {3}、配列は [12] のように件数が表示され、リーフには値と型が表示されます。
3. オブジェクトや配列の左にある三角をクリックすると折りたたみ・展開できます。すべて展開／すべて折りたたむで一括操作も可能です。
4. パス・キーを検索に語句を入力すると、一致した行が色付きの枠で強調され、祖先ノードは自動で展開されます。
5. 任意の行をクリックすると、そのノードの値がクリップボードにコピーされます。トーストにコピーしたパスが表示されます。

パスはドットとブラケット表記です。キーが素の識別子ならドット、それ以外はブラケット、配列の添字は常にブラケットになります。3 階層の値は $.data.items[2].id と表示されます。

よくある用途

• 初見の API レスポンスを読む —— 不要な枝は折りたたみ、必要な部分だけ段階的にたどる。
• 大きなペイロードから 1 つのフィールドを探す —— スクロールではなくキー名検索で見つけ、強調行から直接コピーする。
• 型を書く前に構造を確認する —— キー数とリーフの型を見れば、そのフィールドがオブジェクト・配列・スカラーのどれかが一目で分かる。
• 設定ファイルの点検 —— 数値のつもりが文字列になっていたり、キーの綴りが想定と違ったりする箇所に気づける。

よくある質問

Q: データはアップロードされますか？ A: いいえ。解析と描画はすべてブラウザのメモリ内で完結します。トークンを含む API レスポンス、顧客データ、内部設定が端末の外に出ることはありません。

Q: キーが .my key ではなく ["my key"] になるのはなぜ？ A: キーが素の識別子でない場合（スペースやハイフンを含む、数字で始まる等）はブラケット表記になります。どちらの書き方も同じ値を指します。

Q: 行をクリックするとドキュメント全体がコピーされますか？ A: いいえ。クリックでコピーされるのはその行の値だけで、JSON として整形されます。どのパスをコピーしたかトーストに出るので、貼り付け前に確認できます。

Q: 入力はどれくらい大きくても大丈夫？ A: ブラウザのメモリが保持できる範囲までです。大きなドキュメントではノード数と深さがステータスに出るので、不要な枝を折りたたんでください。