実際の API レスポンスは 5 階層も 6 階層もネストしていることが珍しくなく、インデントだけを頼りに探すのは骨が折れます。ツリー表示なら、関係のない枝を畳み、配列の要素数や目的のフィールドの深さを一目で把握でき、ノードのパスをそのままコピーしてコードに貼れます。本番の不具合を追うとき、ログの中の JSON は文字列としてもう一段ネストされ、バックスラッシュだらけになっていることが多いので、先にアンエスケープしてから解析すれば正しく展開できます。
JSON と JavaScript のオブジェクトは別物
JSON はデータ交換のための形式で、型はオブジェクト・配列・文字列・数値・真偽値・null の 6 種類だけです。キーは必ずダブルクォートで囲む必要があり、関数、日付オブジェクト、コメント、末尾のカンマはいずれも許されません。JavaScript のオブジェクトリテラルはこれよりずっと緩やかです。また JSON は数値の精度に上限を定めていない一方、多くのパーサーは倍精度浮動小数点として扱うため、2 の 53 乗を超える整数(Snowflake 方式で生成された ID など)は末尾の数桁が失われます。この種のフィールドは API の段階で文字列として渡すことをおすすめします。
よくある質問
JSON データはサーバーにアップロードされますか?
送信されません。解析、整形、ツリー表示、コピーはすべて JavaScript によってブラウザ内で処理されます。このページにはバックエンドがなく、貼り付けた内容がサーバーに送られることもありません。内部フィールドを含む API のレスポンス、ログの断片、設定ファイルの確認にも安心して使えます。「JSON の URL」で取得する場合も当サイトを経由しません。リクエストはあなたのブラウザから直接そのアドレスへ送られます。もちろん、そのサーバー自体にはアクセスが記録されるので、社内ネットワークのアドレスや、リンクに token を含む API については各自でご判断ください。
JSON の URL を直接入力できますか?
はい。上部の「JSON の URL」欄にアドレスを入力し、「取得」を押すか Enter キーを押すだけで、中身が左側に取り込まれてすぐ解析されます。 example.com/data.json のような、スキームを省いたアドレスでも構いません。自動的に https://が補われます。ただし、そのアドレスがクロスオリジンアクセスを許可していることが前提です —— ブラウザはレスポンスの中に Access-Control-Allow-Origin を見つけたときだけ、中身をページに渡します。raw.githubusercontent.com、jsDelivr、および多くの公開 API はこの条件を満たしますが、社内ネットワークの API やログインが必要な API はたいてい満たしません。
ツリー表示はノードごとに DOM 要素を作るため、ノード数が非常に多いと描画が遅くなります。このツールは巨大な文書では最初の数階層だけを展開し、残りは折りたたんだまま、展開時に描画することで引っかかりを大きく減らしています。ファイルが特に大きい場合は、必要な部分だけを切り出してから表示することをおすすめします。