JSON整形ツールでできること
JSON(JavaScript Object Notation)は、プログラム間でデータをやり取りするときに最もよく使われる形式です。API は通常、スペースのない1行の長い文字列として JSON を返します。空白はデータ量を増やすだけで、コンピューターには必要ないからです。でも、人間には必要です。JSON整形ツールは改行とインデントを加えて、どの値がどのオブジェクトに属しているか、各配列がどこで始まりどこで終わるかといった構造を見えるようにします。
このツールでできることは3つです。
- 整形:詰まった JSON を、インデント付きの読みやすい JSON にします。
- 圧縮:文字列の中にあるものを除き、スペースと改行をすべて取り除きます。
- 検証:JSON が標準に沿っているかを確認し、最初に見つかった問題を報告します。
使い方
- 左のボックスに JSON を貼り付けます。貼り付けた時点で整形されます。ファイルを開く で
.jsonファイルを読み込んだり、サンプル で例を試したりすることもできます。 - インデント を選びます:スペース2つ、スペース4つ、タブのいずれかです。
- 整形、圧縮、検証 のいずれかを押します。Ctrl+Enter を押すと、最後に使った操作をキーボードから実行できます。
- キーをアルファベット順にしたい場合は、キーを並べ替え をオンにします。
- コピー を押すか、ダウンロード で結果を
.jsonファイルとして保存します。
一度実行すると、その後は入力に合わせて結果が更新されるので、問題を直しながらエラーが消えるのを確認できます。
整形前と整形後
空白のない、よくある API レスポンスです。
{"id":42,"name":"Ada Lovelace","active":true,"roles":["admin","editor"],"address":{"city":"London","zip":"NW1"},"score":98.50,"manager":null}
スペース2つで 整形 した結果です。
{
"id": 42,
"name": "Ada Lovelace",
"active": true,
"roles": [
"admin",
"editor"
],
"address": {
"city": "London",
"zip": "NW1"
},
"score": 98.50,
"manager": null
}
98.50 が 98.50 のまま残っている点に注目してください。このツールは独自のパーサーでテキストを読み込み、数値を1文字ずつそのままコピーします。12345678901234567890 のような大きな ID も正確に残りますが、JSON.parse を使ったツールでは 12345678901234567000 と出力されてしまいます。キーや値に日本語が含まれていても、\u 形式にエスケープされることはなく、書いたままの文字で出力されます。
キーを並べ替え をオンにしてスペース4つで整形すると、{"name":"Ada","age":36,"address":{"zip":"NW1","city":"London"}} は次のようになります。
{
"address": {
"city": "London",
"zip": "NW1"
},
"age": 36,
"name": "Ada"
}
検証 は、正しい入力に対して短い概要を表示します。最初の例では「正しい JSON です。ルートはオブジェクトで、値は合計12個、ネストは3階層です。」と報告されます。
表示されるエラーメッセージ
JSON に誤りがあると、ボックスの下のメッセージに行と列が表示され、入力欄で表示 を押すとその場所へカーソルが移動します。以下はツールが実際に表示するメッセージです。
| よくあるミス | メッセージ |
|---|---|
| 最後の要素の後のカンマ | 4行目、1列目:“}” の前の末尾のカンマは使えません |
| シングルクォート | 1行目、2列目:ダブルクォートで囲んだプロパティ名が必要ですが、シングルクォート(JSON の文字列にはダブルクォートが必要です)があります |
| 要素の間のカンマ抜け | 3行目、3列目:値の後に “,” か “}” が必要ですが、「“」があります |
| クォートなしのキー | 1行目、2列目:ダブルクォートで囲んだプロパティ名が必要ですが、「n」があります |
// のコメント |
2行目、3列目:JSON ではコメントは使えません |
これらのルールは JSON の標準で決まっています。JavaScript のオブジェクトリテラルではシングルクォート、クォートなしのキー、末尾のカンマが使えるため、.js ファイルからコピーしたコードはここでエラーになることがよくあります。データが実際には JavaScript なら、JavaScript整形ツール の方が適しています。
ヒントと制限事項
- 厳密な JSON だけに対応しています。
undefined、NaN、コメント、末尾のカンマは、ほかのプログラムでも受け付けられないため、エラーとして報告します。 - 重複したキーは書いたとおりに残ります。統合も削除もしません。
- 圧縮しても、文字列の中身はスペースも含めて一切変わりません。
- ファイル全体をチェックしたいときは ファイルを開く を使ってください。データはすべて端末内にとどまります。
JSONを整形するほかの方法
VS Code:.json ファイルを開き、コマンドパレットから「ドキュメントのフォーマット」を実行します。VS Code に組み込みの JSON フォーマッターが使われます。
コマンドラインで jq を使う:jq . data.json で整形した JSON を、jq -c . data.json で詰めた JSON を出力します。jq ではデータの絞り込みや形の変換もできます。
コマンドラインで Python を使う:python -m json.tool data.json で、スペース4つで整形できます。標準ライブラリに含まれているので、Python が入っていればどこでも使えます。
JavaScript の中で:JSON.stringify(JSON.parse(text), null, 2) で文字列を整形できますが、JavaScript の数値を経由するため、長い ID は桁が失われることがあります。
関連ツール
JSON を設定ファイルに変換するには JSON YAML 変換ツール を、JSON を別の JSON 文字列の中に埋め込むには JSON 文字列化ツール を使ってください。スプレッドシートから書き出したデータで JSON を作るなら、CSV JSON 変換ツール をお試しください。