JSON フォーマッター
JSONを整形・圧縮・バリデーションします。インデントを選択して読みやすく整形、または1行に圧縮できます。構文エラーもその場で確認できます。
JSONフォーマッターとは
JSONフォーマッターは、1行に詰まった読みにくいJSONを字下げつきの形に整え直したり、逆に空白を取り除いて1行へ圧縮したりするツールです。入力を解析した時点で構文が正しいかどうかも判定するため、APIのレスポンスや設定ファイルを貼り付けるだけで、整形・圧縮・検証の3つをまとめて行えます。字下げはスペース2つ・スペース4つ・タブから選べます。
判定にはブラウザ自身のJSONパーサーを使っているため、「このツールでは通るのに実行環境では落ちる」という食い違いが起きません。処理はすべてお使いの端末の中で完結し、貼り付けたJSONがサーバーへ送信されることはありません。認証トークンや個人情報を含むAPIレスポンスでも、内容を外へ出さずに整形できます。
JSONフォーマッターの使い方
- JSONを貼り付ける 左側の入力欄にJSONを貼り付けます。手元に試すデータがなければ「サンプル」ボタンで例を読み込めます。
- 字下げの幅を選ぶ スペース2つ・スペース4つ・タブから選びます。プロジェクトの整形規則に合わせておくと、そのまま貼り戻せます。
- 有効・無効の表示を確かめる 入力と同時に「有効なJSON」「無効なJSON」のバッジが切り替わります。無効な場合はパーサーが返したエラーメッセージがそのまま表示されるため、何行目のどの文字で行き詰まったかを追えます。
- 整形済みか圧縮済みかを選んでコピーする 「整形済みをコピー」は字下げつきの結果を、「圧縮済みをコピー」は空白を取り除いた1行の結果をクリップボードへ入れます。
- 行数とバイト数を確認する 行数は整形後の結果を、バイト数は圧縮後の結果をUTF-8で数えた値です。転送量を見積もるときは後者を見てください。
使いこなすためのヒント
- JSON（JavaScript Object Notation）のキーは必ずダブルクォートで囲む必要があります。シングルクォートは無効です。
- 末尾のカンマ（
{"a":1,}）は JSON 仕様では無効です。JavaScript の配列・オブジェクトとは異なる点に注意してください。 - 数値は
1.5e3（指数表記）も有効な JSON です。ただしNaN・Infinityは無効です。 - 文字列中のダブルクォートは
\"にエスケープが必要です。改行は\n、タブは\tを使います。 - 圧縮（Minify）した JSON はファイルサイズを小さくできますが、可読性がゼロになります。API レスポンスやデータ転送には圧縮版、設定ファイルには整形版が適しています。
JSONフォーマッターの活用シーン
APIレスポンスの中身を読む
1行で返ってきたレスポンスを整形すれば、入れ子の深さや配列の要素数が目で追えるようになります。開発中の動作確認やバグ調査でいちばん多い使い方です。
設定ファイルの構文エラーを突き止める
アプリが設定ファイルを読み込めないとき、貼り付けて検証すれば、末尾カンマやクォートの閉じ忘れといった原因をその場で特定できます。
転送量を減らすために圧縮する
整形されたJSONをそのままAPIレスポンスや埋め込みデータとして返すと、字下げの空白ぶんだけ無駄に転送量が増えます。配信用には圧縮版を使ってください。
ドキュメントやIssueに貼るコード例を整える
仕様書やバグ報告に載せるリクエスト例・レスポンス例を、字下げの揃った読みやすい形に直せます。
他の形式へ変換する前の下ごしらえ
構文が正しいことを先に確かめておけば、JSONからTypeScript型定義やJSONからXMLといった変換ツールへ渡したときに、変換側で原因の分かりにくいエラーに悩まされずに済みます。
JSONに関する用語集
- JSON
- JavaScript Object Notationの略で、RFC 8259が定めるデータ交換形式です。オブジェクト・配列・文字列・数値・真偽値・nullの6種類だけで構成され、言語を問わず読み書きできる点から、Web APIの標準的な形式になっています。
- 整形（プリティプリント）
- 入れ子の深さに応じて字下げと改行を入れ、人が読める形に組み直すことです。データの中身は変わらず、見た目だけが変わります。
- 圧縮（ミニファイ）
- 意味に関わらない空白・改行をすべて取り除き、1行にまとめることです。バイト数が減るため転送量を抑えられますが、人が読むには向きません。
- バリデーション（構文検証）
- 入力がJSONの文法に沿っているかを確かめることです。このツールはブラウザのパーサーに解析させ、失敗したときのエラーメッセージをそのまま表示します。
- エスケープシーケンス
- 文字列の中でそのままでは書けない文字を、バックスラッシュを使って表す書き方です。ダブルクォートは
\"、改行は\n、タブは\tと書きます。 - キーの順序
- JSON自体はオブジェクトのキーに順序を定めていません。このツールはJavaScriptのオブジェクトを経由するため、
"1"や"2"のように整数として読める形のキーだけが昇順へ並べ替えられます。それ以外のキーは書いた順のまま保たれます。 - UTF-8
- RFC 8259がJSONに用いるよう定めている文字符号化方式です。日本語などASCII以外の文字は1文字あたり複数バイトを占めるため、文字数とバイト数は一致しません。
よくある質問
undefined・関数・NaN・Infinity は使えない、の3点です。Number.MAX_SAFE_INTEGER を超える値）は精度が失われる可能性があります。
余談ですが ― JSON が XML に勝った理由
2000年代初頭、Web API のデータ形式は XML が主流 でした。しかし 2001 年に Douglas Crockford が JSON を提唱し、2010 年代以降は JSON が事実上の標準となっています。理由は単純で、JSON の方が軽く、JavaScript で扱いやすく、人が読みやすいからです。
同じデータを XML と JSON で表すと、JSON はバイト数が約 30〜50% 少なくなるケースが多いです。モバイル通信が細かった時代には、この差がアプリの応答速度に直結していました。
RFC 8259 では JSON のキーの重複について「SHOULD NOT（すべきでない）」と述べるにとどまり、明確な禁止ではありません。そのため {"a":1,"a":2} は「構文上は有効だが動作は未定義」という扱いです。実際にはほとんどのパーサーが後勝ちで処理しますが、同一キーが重複している場合は意図しないバグの原因になります。