JSON フォーマッタ

JSONフォーマッターとは？

JSONフォーマッター（JSON美化ツール、pretty-printerとも呼ばれます）は、圧縮されていたり書式の崩れたJSONを、インデント付きの読みやすい形に整えるツールです。APIレスポンスの確認、設定ファイルの読み解き、ログのデバッグ、テストフィクスチャの比較、フロントエンドとバックエンドのデータ受け渡しなど、開発の現場でもっとも頻繁に使われるツールのひとつです。

JSONは仕様が厳格です。キーは必ずダブルクォートで囲む、文字列もダブルクォートで囲む、カンマの位置は正確に、開いた { や [ は必ず閉じる、というルールがあります。フォーマッターはこの構造を見える化してくれますし、組み込みのバリデーターが構文の壊れている箇所を正確に教えてくれます。

JSONは「JavaScript Object Notation」の略です。もともとはJavaScriptから派生した記法ですが、いまではほぼすべてのプログラミング言語にJSONの読み書き機能が標準で備わっており、Webで構造化データをやり取りするときの事実上の標準フォーマットになっています。

使いながら身につくこと

• オブジェクトは {} で名前付きフィールドを表し、配列は [] で順序付きリストを表します。両者は何階層でも入れ子にできます。
• 整形済みJSONとミニファイ済みJSONは*まったく同じデータ*で、空白が変わるだけで意味は変わりません。サーバーは通信量を減らすためにミニファイ済みJSONを返すのが普通です。
• JSONの値は string、number、boolean、null、object、array の6種類だけ。undefined も関数もコメントも存在しません。

JSON整形の手順

1. 1

   入力欄にJSONを貼り付ける

   APIレスポンス、ログファイル、設定ファイルなどからJSONをコピーして、左側に貼り付けます。ミニファイ済みでも、中途半端に整形されたものでも入力できます。

2. 2

   インデント幅を選ぶ

   もっとも一般的なのはスペース2つ、次いで4つもよく使われます。プロジェクトの既存スタイルに合わせて選ぶのがおすすめです。

3. 3

   検証結果を確認する

   JSONが正しければ、整形済みの結果が右側に表示されます。エラーがある場合は、構文解析が失敗した行と文字位置がエラーメッセージで示されます。

4. 4

   ツリービューで構造を眺める

   折りたたみ可能なツリービューを使えば、深くネストしたオブジェクトや配列を畳んで見渡せます。見慣れないAPIレスポンスの「形」を把握するには、これがいちばん早いです。

5. 5

   コピーまたはミニファイする

   整形版をそのままコードやドキュメントに貼り付けてもよし、保存・通信用に1行のミニファイ形式に戻してもよし、です。

JSON構文クイックリファレンス

JSONを構成する要素はこれですべてです。ここに載っていないものはJSONとして無効です。仕様: RFC 8259 と ECMA-404。

試してみたいJSONサンプル

{"user":{"id":7,"name":"Maya"},"skills":["HTML","JavaScript"]}

{  "user": {    "id": 7,    "name": "Maya"  },  "skills": ["HTML", "JavaScript"]}

{  "name": "Coddy",  "active": true,}

{  "count": 3,  "countText": "3",  "enabled": true}

{  "data": {    "orders": [      { "id": 101, "items": [{ "sku": "A", "qty": 2 }] },      { "id": 102, "items": [] }    ]  }}

JSONでよくあるミス

• キーや文字列をシングルクォートで囲んでしまう — JSONで使えるのはダブルクォートだけです。
• JSONをJavaScriptオブジェクトと同じ感覚で書いてしまう。コメント、関数、undefined はJSONでは無効ですし、末尾カンマもパースエラーになります。
• 数値の先頭に + を付けたり、先頭に 0 を付けたり（0 単体は除く）、数値型として扱いたいのにクォートで囲んだりしてしまうこと。

JSONフォーマッターのFAQ