{ }

整形

JSON フォーマッタ

JSON データの整形 (インデント付き) / 圧縮 / キーソートを行います。構文エラーは位置と原因を表示。インデント幅は 2 / 4 スペースまたはタブから選択できます。

サンプル

入力

出力

インデント

よく使う組み合わせ

JWT デコーダ → JWT → JSON 整形元へ

Base64 エンコード/デコード → Base64 → JSON 整形元へ

→ Base64 エンコード/デコード JSON → Base64 次へ

→ URL エンコード/デコード JSON → URL エンコード次へ

タイムスタンプ変換 → タイムスタンプ → JSON 元へ

こんなときに使う

API レスポンスをデバッグする

curl や fetch で叩いた API レスポンスは 1 行に圧縮されていることが多く、人間には読みにくいです。整形すれば構造が一目で分かり、想定外のフィールドや型の違いを発見しやすくなります。

curl -s https://api.example.com/v1/users/42

ログから JSON 部分だけ抜き出して読む

サーバーログに 1 行で含まれた JSON ペイロードを切り取って整形します。複数階層のネストでも構造が分かりやすくなります。

{"level":"error","msg":"db timeout","req":{"id":"abc","path":"/users","params":{"q":"john","limit":20}}}

設定ファイルをコミット前に整える

package.json や tsconfig.json などをエディタで雑に編集した後、整形してインデントとキー順を揃えてからコミットすると差分が読みやすくなります。

{"name":"my-app","version":"1.0.0","dependencies":{"react":"^18.0.0"}}

キーをソートして 2 環境の設定を比較する

「キーをソート」を有効にすると、書いた順序に依存しないテキスト diff が取れます。staging / production の設定差分を確認するときに有効です。

{"b":2,"a":1,"c":3} → {"a":1,"b":2,"c":3}

本番投入用の圧縮版を作る

「圧縮」を選ぶと改行・空白なしの最小サイズに変換できます。HTTP ボディに埋め込む、リクエストのサイズを抑える、URL に渡す等で使います。

{
  "a": 1,
  "b": 2
}
→ {"a":1,"b":2}

JWT のペイロードを整形する

JWT デコーダの出力を「次のツールに送る」で受け取り、JSON として整形・キーソートします。標準クレーム（iss / sub / exp など）の確認に便利です。

{"sub":"1234567890","name":"John Doe","iat":1516239022}

よくあるエラーと対処

ERR Unexpected token } in JSON at position N

原因: オブジェクトや配列の最後の要素にカンマが残っています（trailing comma）。標準 JSON は trailing comma を許可しません。
対処: 末尾の余分なカンマを削除してください。JSON5 や JSONC を使いたい場合はそちら専用のパーサが必要です。

ERR Unexpected end of JSON input

原因: 波カッコ } や角カッコ ] の対応が取れていません。コピペ時に末尾を切り落としているケースが多いです。
対処: 開いたカッコの数だけ閉じカッコがあるか確認してください。エディタの構文ハイライトを使うと把握しやすいです。

ERR Unexpected token ' in JSON at position N

原因: JavaScript オブジェクトリテラルではシングルクォートが使えますが、JSON では文字列とキーを必ずダブルクォートで囲む必要があります。
対処: シングルクォートをダブルクォートに置換してください。文字列内のダブルクォートはバックスラッシュでエスケープします。

ERR Unexpected token N in JSON at position M

原因: JSON のキーがクォートで囲まれていません。{ name: "x" } のような JS オブジェクト記法は JSON では無効です。
対処: すべてのキーをダブルクォートで囲んでください: { "name": "x" }。

CLI / 他言語でやる方法

jq '.' input.json

デフォルトで 2 スペースインデントの整形。圧縮なら -c、ソートは --sort-keys。

python (標準ライブラリ)

python -m json.tool input.json

Python 同梱。--indent と --sort-keys が指定可能。

Node.js

node -e "console.log(JSON.stringify(require('./input.json'), null, 2))"

Node 1 行で整形。出力は標準出力。

よくある質問

▶ 「整形」と「圧縮」はどう違いますか？

整形は人間が読むための改行とインデントを追加します。圧縮はそれらをすべて取り除き、ファイルサイズを最小にします。値そのものは変わりません。

▶ 入力したデータはサーバーに送信されますか？

送信されません。整形・圧縮・ソートはすべてブラウザ内の JavaScript で完結します。ネットワーク通信は発生しません。

▶ キーをソートすると配列の順序も変わりますか？

配列の要素順は保持されます。並び替えはオブジェクトのキー順序のみが対象です。配列内のオブジェクトについては、各オブジェクト内のキーがソートされます。

▶ JSON5 や JSONC（コメント付き JSON）には対応していますか？

対応していません。標準 JSON 仕様（RFC 8259）に準拠します。JSONC を整形したい場合は事前にコメントを除去してください。

▶ とても大きな JSON でも動きますか？

数 MB 程度であれば問題なく動作します。10MB を超えるような巨大ファイルはブラウザが一時的にフリーズすることがあります。サーバーサイドツール（jq など）の利用を推奨します。

▶ インデントは Tab を指定できますか？

はい、選択肢から「Tab」を選べます。tsconfig.json など Tab で書かれた設定ファイルの整形に便利です。

▶ 数値の精度は保持されますか？

JavaScript の Number 型（IEEE 754 倍精度浮動小数点）に変換されます。Number.MAX_SAFE_INTEGER（2^53-1）を超える整数は精度が失われる可能性があります。

▶ Unicode 文字はどう扱われますか？

整形では UTF-8 のまま出力します。圧縮でも同様です。\uXXXX のエスケープを保持したい場合は別途文字列処理ツールが必要です。

もっと深く知る

書籍