JSON ビューア
JSON ドキュメントを整形・検証し、キーの並べ替えや折りたたみ/展開を切り替えられます。
JSON ドキュメントを整形・検証し、キーの並べ替えや折りたたみ/展開を切り替えられます。 JSON ドキュメントを整形・検証し、キーの並べ替えや折りたたみ/展開を切り替えられます。
Array
背景
JSON とは何か、なぜ別表示が便利か
JSON（JavaScript Object Notation）は Web 上で構造化データを交換するための最も一般的なテキスト形式で、設定ファイル、API レスポンス、ログ、ドキュメントストアなど至るところで使われています。サイズが小さく、人間にも読みやすく、機械でも容易に解析できるため、ほぼすべての近代サービスが対応しています。
生の JSON ドキュメントをそのまま読むのはほぼ不可能です。API やツールは最小表現である 1 行の長いテキストを出力することが多いからです。そのようなドキュメントをエディタで開いても走査しにくく、括弧の対応ミスに気づきにくく、波括弧の数で迷子になりやすいです。JSON ビューアは一定のインデントで再出力することで、構造を一目で把握できるようにします。
知っておきたい機能
整形ではインデント幅（よく使われるのは 2 または 4 スペース）を選び、ドキュメントを即座に再描画します。ビューアによってはキーをアルファベット順に並べ替えることができ、同じサービスの 2 つのペイロードを比較するときに絶大な威力を発揮します。キーが列で揃うと、位置で対応させずに値の差異を走査できます。バイト数とノード数を表示する統計行は、1 MB 制限のフォームに貼り付ける直前にターミナルを開かずにサイズを知るのに便利です。
ビューアはバリデータでもあります。JSON.parse で解析すれば、無効な最初のトークンの行と列を正確指す説明的な例外が投げられ、ドキュメントが読み込めない理由がすぐに分かります。ほとんどの本番ツールも同じ箇所で失敗するため、ここで表示されるメッセージはバックエンド、フロントエンドフレームワーク、ビルドパイプラインのそれと一致します。
使いこなしのヒント
深くネストしたドキュメントでは、折りたたみ/展開コントロールでトップレベルにフォーカスを当て、関心のあるセクションまで掘り下げて必要なブランチをコピーします。API レスポンスをデバッグするときは比較前にキーを並べ替え、異なる位置での挿入/削除が視界を惑わさないようにします。迷ったら、新しいタブにドキュメントを貼り、書式を整えて、出力をドキュメントやコミットメッセージの正規版として使ってください。
よくある質問
ビューアは JSON ドキュメント内のコメントを保持しますか？
標準 JSON はコメントを許可しません。入力に // や /* */ が含まれていればパーサは拒否します。まず削除するか、専用ツールで JSON5/JSONC に変換してください。
バイト数が API からコピーした値と一致しません
バイト数はレンダリング後の出力サイズです。2 スペースで美化すると出力は長くなります。回線上のサイズが必要ならインデントなしモードを使ってください。
ビューアは非常に大きな JSON ドキュメントを扱えますか？
はい。ビューアはドキュメント全体をメモリに読み込んで再出力するため、実際の上限はブラウザの利用可能ヒープ（現代のノートパソコンでは数百 MB まで快適）です。GB 級の場合はストリーミング方式を検討してください。
キーを並べ替えるとドキュメントの意味は変わりますか？
いいえ。JSON オブジェクトは名前と値のペアの順序なし集合です。並べ替えは出力テキストのみを変え、セマンティクスは変わりません。多くのパーサはキー順とは無関係にハッシュマップへ格納します。
パーサが特定の列で Unexpected token と表示するのはなぜですか？
JSON.parse は解釈できない最初のトークンを報告します。表示される行/列はそのトークンの開始位置で、実際の誤りは 1 文字前にあることが多いです（エスケープされていない引用符、抜けているカンマ、オブジェクト末尾の余計なカンマ）。
ドキュメントはサーバに送信されますか？
いいえ。解析・並べ替え・整形はすべてブラウザ内の標準 JavaScript API で行われ、アップロード処理はありません。