JSONフォーマッター：オンラインで無料のJSONを整形＆検証

Q: JSON.parse()とJSON.stringify()の違いは何ですか？

JSON.parse()はJSON文字列をJavaScriptの値に変換します。JSON.stringify()はその逆に、JavaScriptの値をJSON文字列に変換し、プリティプリント用のインデント引数を受け取ります。このツールは内部でどちらの関数も使わないため、大きな整数を正確に保持できます。

JSONフォーマッターとは？

JSONフォーマッターは、JSON（JavaScript Object Notation）のテキストを、データ自体を変えずにインデントと改行を加えて書き直すツールです。JSONは、構造化データを保存・送信するためのプレーンテキスト形式で、名前と値の組やリストから構成されます。プログラムは通常、余分な空白をすべて取り除いて容量を節約するため、人間には読みにくい1行の密な文字列になります。フォーマッターは、ビューティファイアやプリティプリンターとも呼ばれ、その空白を一定の規則で書き戻して構造を見えるようにします。このツールは、入力または貼り付けと同時にJSONを自動的に整形し、押すボタンはありません。

JSONの構文規則

JSONは、RFC 8259という仕様で定義されています。コンテナ型は2種類あります。

オブジェクトは、波かっこの内側に名前と値の組を格納します。

1{"name": "John", "age": 30, "city": "New York"}
2

配列は、角かっこの内側に順序付きリストを格納します。

1["apple", "banana", "cherry"]
2

JSONの値は、6種類のいずれかでなければなりません。文字列、数値、真偽値（trueまたはfalse）、null、オブジェクト、配列です。

いくつかの規則が、エラーの大半の原因になります。

プロパティ名は二重引用符で囲む必要があります。{name: "John"}は無効で、{"name": "John"}でなければなりません。
文字列には単一引用符ではなく、二重引用符を使う必要があります。
オブジェクトまたは配列の最後の項目の後にカンマを置くことはできません（末尾のカンマは不可）。
JSONにはコメント構文がありません。波かっこや角かっこを使う見た目はJavaScriptに由来しますが、コメントは使用できません。
JSONにはundefinedがありません。値がない場合はnullを使います。

よくある間違いは、JSONではなくJavaScriptのオブジェクトリテラルを貼り付けることです。{name: 'John', age: undefined}は有効なJavaScriptですが、有効なJSONではありません。JSONでは{"name": "John", "age": null}となります。

このJSONフォーマッターの仕組み

多くのJSONフォーマッターは、テキストをJSON.parse()に通してJavaScriptオブジェクトを作り、次にJSON.stringify()を実行して、空白を付けたテキストに戻します。この往復には副作用があります。JavaScriptの数値はIEEE 754の倍精度浮動小数点数であり、2^53 − 1（9,007,199,254,740,991）を超えると、すべての整数を正確に表せなくなります。9007199254740993のようなIDは、この往復の後に9007199254740992になることがあります。

このツールはその処理を避けます。小さな手書きパーサーで入力を1文字ずつ読み取り、各数値や文字列をJavaScriptの値に変換する代わりに、その部分のテキストを記述どおり正確にコピーし、正しいインデントレベルに配置します。数値を浮動小数点数に変換しないため、どのような桁数の整数でも数字が正確に保持されます。オブジェクト内に同じキーが2回書かれている場合も、最後のキーだけにまとめるのではなく、両方を元の位置に保持します。JavaScriptオブジェクトを構築すると、このような重複は最後のキーにまとめられます。

処理の手順は次のとおりです。

次のトークン（オブジェクト、配列、文字列、数値、true、false、またはnull）を読み取ります。
JSONの文法に照らして確認します。引用符のないキーや末尾のカンマなど、規則に違反していれば拒否します。
トークンのテキストを変更せずに出力へコピーします。
オブジェクトまたは配列の入れ子の階層ごとに、改行を加え、2個のスペースでインデントします。
入力全体を読み終えるまで繰り返します。

インデントは2個のスペースに固定されており、変更する設定はありません。入力が空の場合は、何も表示されません。入力がJSONの規則に違反している場合、ツールは、正確な文字位置を含む技術的なパーサーのメッセージではなく、Invalid JSON: Please check your inputというメッセージを表示します。これに対し、ブラウザーに組み込まれたJSON.parse()は、エラーテキストに文字位置を示します。

計算例

この最小化された入力は、

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

次のようになります。

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

入れ子になった各オブジェクトや配列は、親より1レベル深くインデントされるため、addressとその3つのフィールドの関係がひと目で分かります。

2つ目の例は、リテラルをそのままコピーすることが重要な理由を示します。この入力は、

1{"id":9007199254740993}
2

次のように整形されます。

1{
2  "id": 9007199254740993
3}
4

数字は入力したとおり正確に保持されます。JSON.parse()の後にJSON.stringify()を使うフォーマッターでは、代わりにその数値が気付かないうちに9007199254740992へ変わってしまいます。

JSONでよくあるエラー

引用符のないプロパティ名: {name: "John"}。修正: {"name": "John"}。
末尾のカンマ: {"age": 30,}。修正: 閉じ波かっこの前にあるカンマを削除します。
かっこの不一致: {"data": [1, 2}。修正: オブジェクトを閉じる前に、]で配列を閉じます。
閉じていない文字列: {"name": "John}。修正: 不足している閉じ二重引用符を追加します。
単一引用符: {'name': 'John'}。修正: 二重引用符を使います。
undefined、NaN、またはInfinity: これらはいずれも有効なJSONの値ではありません。nullまたは文字列を使います。

こうしたエラーは、ブラウザーのコンソールやサーバーログからオブジェクトを直接コピーすることが原因になる場合がよくあります。そこには、JSONとして有効にする前に修正が必要な、JavaScript固有の構文が含まれていることが多いためです。

JSONフォーマッターを使う場面

JSONフォーマッターは、主にAPIレスポンスを調べるために使われます。APIレスポンスは通常、帯域幅を節約するために最小化された状態で送信されます。また、package.jsonやtsconfig.jsonなどの設定ファイルを手作業で確認したり、ブラウザーのローカルストレージやコンソールからコピーしたデータを読んだり、別のシステムから受け取ったデータセットの形を把握したりするためにも使われます。

JSONを整形するその他の方法

ブラウザーの開発者ツール: Chrome、Edge、Firefoxは、NetworkタブのプレビューペインでJSONレスポンスを自動的に整形します。
コードエディター：Visual Studio Codeは、開いているJSONファイルをWindowsではShift+Alt+F、MacではShift+Option+F、LinuxではCtrl+Shift+Iで整形します。ほとんどのエディターには、同等のショートカットか整形用の拡張機能があります。
コマンドライン：jq（jq . file.json）とPython組み込みのpython -m json.tool file.jsonは、どちらもターミナルからJSONを整形できます。

コードにJSON整形を組み込む

ほとんどのプログラミング言語には、インデント指定に対応したJSONライブラリがあります。JavaScriptの場合:

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

Pythonの場合:

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

どちらの方法も、テキストをネイティブのデータ構造に解析し、空白を付けて再びシリアライズします。上で示したように、この方法は書くのは簡単ですが、どちらの言語も数値を既定で倍精度浮動小数点数として保持するため、大きな整数が変わってしまうことがあります。データベースIDのように正確な大きな整数が必要なアプリケーションでは、通常、JSONの中で数値ではなく文字列として保存します。

JSONの簡単な歴史

ダグラス・クロックフォードは、2000年代初めにJSONを定めました。構文はJavaScriptのオブジェクトリテラルに由来しますが、どの言語からも使えるようにしました。RFC 4627が2006年にこれを正式な規格にしました。JSONはXMLより短く書け、JavaScriptオブジェクトに直接対応していたため、すぐに広まりました。これは、Webアプリケーションがページ全体を再読み込みせず、バックグラウンドでデータを取得するようになるにつれて重要になりました。2010年代には、WebのAPIで広く使われていました。

よくある質問

JSONフォーマッターとは データを変更せずにJSONテキストへインデント、改行、空白を追加し、構造を読みやすくするツールです。

整形するとデータは変わりますか？ いいえ。整形で変わるのは空白だけです。このツールはすべての文字列と数値を入力どおり正確にコピーするため、JavaScriptの数値として正確に格納できない大きな数値も含め、整形後の値は入力と完全に一致します。

「Invalid JSON」エラーが表示されるのはなぜですか？ 入力がJSONの規則に違反しています。よくある原因は、引用符のないプロパティ名、末尾のカンマ、単一引用符、閉じていない文字列、または一致しないかっこです。このツールは問題の正確な文字位置を表示しませんが、上記の規則に照らして入力を確認すれば、通常はすぐに見つかります。

JSONにコメントを含めることはできますか？ いいえ。仕様ではコメントは許可されていません。JSONCやJSON5などの形式は、設定ファイルなどコメントが役立つ場合に、JSON構文へコメント機能を追加したものです。

標準的なJSONのインデントはどのくらいですか？ スペース2個が一般的な慣例で、このツールもそれを使います。スタイルガイドによっては、スペース4個やタブを使うものもあります。JSONの仕様自体は、特定のインデントを求めていません。

JSON.parse()とJSON.stringify()の違いは何ですか？ JSON.parse()はJSON文字列をJavaScriptの値に変換します。JSON.stringify()はその逆に、JavaScriptの値をJSON文字列に変換し、プリティプリント用のインデント引数を受け取ります。このツールは内部でどちらの関数も使わないため、大きな整数を正確に保持できます。

参考文献

Internet Engineering Task Force。RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format。RFC 8259 — JSONの値は、オブジェクト、配列、数値、文字列、true、false、nullのいずれかであり、トークンの間には空白のみが許されます。
Mozilla Developer Network。JSON.parse()。JSON.parse()のリファレンス — 配列とオブジェクトには末尾のカンマを付けられず、エラーメッセージは位置を示します。
Mozilla Developer Network。Number.MAX_SAFE_INTEGER。Number.MAX_SAFE_INTEGERのリファレンス — 最大の安全な整数は、2^53 − 1 = 9,007,199,254,740,991です。
Internet Engineering Task Force。RFC 4627: The application/json Media Type for JavaScript Object Notation (JSON)。RFC 4627 — 最初のJSON関連RFC。D. Crockford著、2006年7月。
Microsoft。Editing JSON with Visual Studio Code。VS Code JSONドキュメント — 各プラットフォームでのドキュメント整形のショートカット。
Python Software Foundation。json — JSON encoder and decoder。Pythonのjsonドキュメント — python -m json.toolは、コマンドラインからJSONを見やすく整形して出力します。

JSONフォーマッター：オンラインで無料のJSONを整形＆検証