JSONツリービューア
JSONデータを下に貼り付けて、色付きの値を持つインタラクティブで折りたたみ可能なツリーとして視覚化します。
仕組み
- JSONを貼り付け: 任意のJSON文字列, オブジェクト、配列、ネストされた構造, を入力フィールドにドロップします。
- ツリーを探索: JSONはインタラクティブで折りたたみ可能なツリーとして表示されます。ノードをクリックして子を展開または折りたたみます。
- ナビゲートして検査: ブランチを展開して特定のキーや値を見つけます。深くネストされたデータが一目で読みやすくなります。
なぜJSONツリービューアを使うのか?
API、設定ファイル、データベースからの生のJSONは、深くネストされた構造を含む場合に読みにくいことで有名です。JSONツリービューアは、フラットなテキストを階層的なビジュアルマップに変換し、データの形状を瞬時に確認、欠落したキーを発見、ネストされたパスを追跡し、括弧やコンマを精神的に解析せずに構造を理解できます。これは、APIデバッグ、データ探索、スキーマ理解に不可欠なツールです。
機能
- インタラクティブツリー: 興味のあるデータの部分に集中するために、任意のブランチを展開および折りたたみます。
- シンタックスハイライト: キー、文字列、数値、ブール、null値は、素早い識別のために色付けされています。
- 深いネストのサポート: サイズに関係なく、任意にネストされたオブジェクトと配列を処理します。
- エラー検出: 無効なJSONはレンダリング前に明確なエラーメッセージで報告されます。
- ブラウザベース: サーバーアップロードなし, JSONデータは完全にブラウザに残ります。
よくある質問
JSON入力のサイズ制限はありますか?
ツールは厳密な制限を課しません。パフォーマンスはブラウザとデバイスに依存します。非常に大きなJSONファイル(複数MB)は表示が遅くなる可能性がありますが、通常のAPIレスポンスと設定ファイルは瞬時に動作します。
ツリービューでJSONを編集できますか?
このツールはJSON構造の視覚化と探索に焦点を当てています。JSONを編集するには、フォーマットされた出力の隣に完全なエディターを提供するJSONフォーマッターツールを使用してください。
コメント付きJSON(JSONC)をサポートしていますか?
標準のJSONはコメントを許可せず、ほとんどのパーサー(このツールを含む)はそれらをエラーとしてフラグ付けします。貼り付ける前にコメントを削除するか、コメント付きJSONにはJSONC対応エディターを使用してください。
JSON、勝ち残ったデータフォーマット
Douglas Crockford は、JavaScript のオブジェクトリテラルから構文を直接取り入れ、XML の軽量な代替として 2001 年に json.org で JSON を公開しました。フォーマットは最初に RFC 4627(2006 年 7 月)で IETF インターネット・ドラフトとして標準化され、RFC 7159(2014 年 3 月)として改訂され、最終的に RFC 8259(2017 年 12 月)で確定しました。これが現在の標準であり、ECMA-404(第 1 版 2013 年 10 月、第 2 版 2017 年 12 月)と整合性が保たれています。RFC 8259 は重要な要件を 1 つ追加しました:ネットワーク層エンコーディングは UTF-8 でなければなりません。2 つの補完仕様がエコシステムを完成させます:RFC 6901「JSON Pointer」(2013 年 4 月)は、ドキュメント内のノードをアドレス指定するための /store/book/0/title 構文を定義し、RFC 6902「JSON Patch」は、別の JSON ドキュメントに適用する変更を記述する JSON ドキュメントを定義します。JSON Schema(現在の IETF ドラフト 2020-12)は検証を追加します。それ以外のすべてはその上に構築されました。設定ファイルコメント用の JSONC、緩やかな構文用の JSON5、ストリーミング用の NDJSON は、後から来ました。
JSON の 6 つの値型(と欠けているもの)
RFC 8259 §3 は、正確に 6 つの値型を定義しています。他に何もありません。
- オブジェクト: 中括弧で区切られた名前-値ペアの順序なしセット。キーは常に文字列です。
- 配列: 角括弧で区切られた値の順序付きリスト。混合型を含むことができます。
- 文字列: 二重引用符内の Unicode 文字。一重引用符は正当な JSON ではありません。
- 数値: IEEE 754 倍精度浮動小数点。仕様は任意精度を保証しません。
Number.MAX_SAFE_INTEGER= 2⁵³ − 1 = 9 007 199 254 740 991 を超える数値は、パース時に精度を失います。 true/false: ブール値リテラル、小文字、引用符なし。null: null リテラル、小文字、引用符なし。値がnullのキーは、存在しないキーとは異なります。
JSON にないもの:日付型(慣例ではタイムゾーン付き ISO 8601 文字列)、コメント(別のメタデータフィールドを使用)、末尾のカンマ、シングルクォート文字列、16 進数、undefined、NaN、Infinity。これらのいずれかは、JSON.parse に SyntaxError をスローさせます。
厳格な JSON、JSONC、JSON5:どれがどれ
厳格な JSON(RFC 8259)はこのビューアが受け入れるものです:コメントなし、末尾のカンマなし、二重引用符のキー、二重引用符の文字列。JSONC は VS Code に同梱された Microsoft の慣例で、他のすべてを厳格に保ちながら、// 行コメントと /* ... */ ブロックコメントを許可します。tsconfig.json、.vscode/settings.json、jsonc-parser npm パッケージで見られます。JSON5(2017、https://json5.org)は、シングルクォート文字列、引用符なしのキー、末尾のカンマ、16 進数、IEEE 754 特殊値(NaN、Infinity)、行とブロックの両方のコメントを追加するスーパーセットです。json5 npm パッケージは週に約 1,000 万ダウンロードされています。NDJSON / JSON Lines(https://jsonlines.org)は、各行が独立した JSON ドキュメントであるストリーミングバリアントで、ログ送信者やビッグデータ取り込みパイプラインで使用されます。ソースが JSONC または JSON5 の場合、貼り付ける前にコメントと末尾のカンマを削除してください。
ツリービューアが本当に給料に値するところ
- API レスポンス検査。Stripe、GitHub、Slack、Twilio:あらゆる現代の API はネストされた JSON を返します。ツリービューアに貼り付けると形が明らかになります。
- 設定ファイル。
package.json、tsconfig.json、composer.json、kubeconfig、およびクラウドプロバイダー JSON 設定の長いテールがすべてツリーとして監査しやすくなります。 - データベースエクスポート検査。MongoDB
find()出力、PostgreSQLrow_to_json行、ElasticSearch ヒットリスト。 - スキーマ発見。API にドキュメントがない場合、ツリービューアがドキュメントです。
- diff の準備。2 つのファイル間で
json-diffまたはjqを実行する前に、ビューアでそれぞれを検査して、明らかな違いを手動で見つけます。 - Webhook ペイロード検査。Stripe、GitHub、SendGrid、および類似のサービスはすべて JSON webhook を送信します。ペイロードをビューアに貼り付けるのは、エンドポイントが受け取るものを確認する最速の方法です。
- サンプルデータ作成。JSON を入力してテストフィクスチャを構築し、ツリーが増分的に更新されるのを見守ります。ファイルを保存する前に欠落した括弧をキャッチします。
JSON を扱う際のよくある間違い
- 末尾のカンマ。
{"a": 1,}は正当な JavaScript ですが、不正な JSON です。JSON.parseはSyntaxError: Unexpected token '}'をスローします。それらを削除するか、JSON5 に切り替えてください。 - コメント。
// このようにまたは/* このように */は JavaScript と JSONC では有効ですが、厳格な JSON ではありません。 - ビッグ整数の精度損失。Twitter と Stripe の ID は 2⁵³ を超える可能性があります。
JSON.parse("9007199254740993")は9007199254740992を返します。精度が重要な場合は、文字列として受け取ってください。 nullと存在しないものを混同。{"foo": null}はfooが null として定義されています。{}はfooが未定義です。この区別は、API 契約とデータベースの NULL 処理にとって重要です。- 重複キー。RFC 8259 は動作が未定義であると述べています。実際には、すべての JS エンジンが最後の値を保持します。
{"a": 1, "a": 2}は{a: 2}としてパースされます。 - 循環参照。
JSON.stringifyはTypeError: Converting circular structure to JSONをスローします。サイクルをフラット化するか、リプレーサーを使用するか、flattedのようなライブラリを使用してください。 - タイムゾーンのない日付文字列。
"2026-05-12"は曖昧です。"2026-05-12T18:30:00Z"は UTC で明確な ISO 8601 です。常にオフセットを含めてください。
その他のよくある質問
このビューアはどのくらい大きな JSON ファイルを処理できますか?
V8 で JSON.parse を使用して 1 MB をパースするのに約 10 ミリ秒かかります。100,000 個の折りたたまれた DOM ノードをレンダリングすると、ブラウザが数秒間フリーズすることがあります。実際には、このビューアは 約 5 MB まで快適です。それを超えると、レンダリング中に顕著な遅延が予想されます。より大きなドキュメントの場合は、Web Worker で stream-json のようなストリーミングパーサーを使用するか、入力をチャンクにページ化してください。
なぜ私のビッグ整数が間違って返ってくるのですか?
JavaScript の数値は IEEE 754 倍精度浮動小数点です。2⁵³ − 1 = 9 007 199 254 740 991 までの整数はラウンドトリップを正確に生き延びます。それを超えると、精度が失われます。Twitter snowflake ID(64-bit)、Stripe 顧客 ID、ブロックチェーントランザクション ID、および多くのデータベース代理キーがこの制限を超えます。JSON.parse は静かに切り捨てます。修正は、ID を文字列として受け取る(ほとんどの現代の API がそうしています)か、BigInt をサポートするライブラリでパースすることです。
JSON Pointer とは何ですか、そして私はどこでそれを使うでしょうか?
RFC 6901(2013 年 4 月)は、JSON ドキュメント内のノードをアドレス指定するためのパス構文を定義しています:/store/book/0/title は store 配列の最初の本のタイトルを選びます。JSON Pointer は JSON Patch(RFC 6902)の基礎であり、ドキュメントデルタをポインタと操作のペアの配列として表現します。Kubernetes API サーバーは増分更新に JSON Patch を使用します。GitHub の REST API や他の多くのシステムも同様です。
このビューアで NDJSON / JSON Lines は動作しますか?
いいえ。NDJSON は行ごとに 1 つの独立した JSON 値で、囲む配列はありません。ファイル全体に対する JSON.parse は、2 行目が最初のオブジェクトが終わるところから始まるため、スローします。コンテンツ全体を [ と ] でラップし、オブジェクト間の各改行をカンマに置き換えるか、1 行ずつ貼り付けるか、専用の NDJSON ビューアを使用してください。
私の JSON はどこかに送信されますか?
いいえ。JSON.parse はブラウザの JavaScript エンジンで実行され、ツリーはローカルで DOM ノードとしてレンダリングされ、データのコピーはネットワーク上で送信されません。これは、シークレット、顧客データ、または PII を含む API レスポンスに対して安全です。DevTools のネットワークタブを開いてサンプルを貼り付けてください:パースとレンダリング中にゼロの送信リクエストが表示されます。