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

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

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

JSONフォーマッターとは？

JSONフォーマッターは、JSON（JavaScript Object Notation）テキストを受け取り、データ自体を変更せずに、インデントと改行を加えて書き直すツールです。JSONは、名前と値の組、およびリストで構成される、構造化データの保存や送信に使われるプレーンテキスト形式です。プログラムは通常、余分な空白をすべて取り除いて容量を節約するため、人間には読みにくい、密集した1行のテキストになります。フォーマッターは、ビューティファイアーやプリティプリンターとも呼ばれ、空白を一貫した方法で追加し直して構造を見やすくします。このツールは、入力または貼り付けを行うと自動的にJSONを整形します。整形ボタンはなく、キーを1文字入力するたびに出力が更新されます。リセットボタンは入力を消去し、コピーボタンは整形結果をコピーします。

JSONの構文規則

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

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

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

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

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

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

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

プロパティ名は二重引用符で囲む必要があります。{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個のスペースでインデントし、改行を追加します。中身が空のオブジェクトや配列は、{}または[]のように1行のままになります。
入力全体を読み終えるまで繰り返します。

インデントは2個のスペースに固定されており、変更する設定はありません。入力欄が空の間、出力パネルにはプレースホルダーテキスト「整形済みJSONはここに自動的に表示されます……」が表示されます。入力がJSONの規則に違反している場合、ツールは正確な文字位置を示す技術的なパーサーメッセージではなく、「無効なJSONです。入力を確認してください」というメッセージを表示します。一方、ブラウザーに組み込まれた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レスポンスの確認に最もよく使われます。また、package.jsonやcomposer.jsonなどの設定ファイルを手作業で確認したり、ブラウザーのローカルストレージやコンソールからコピーしたデータを読んだり、別のシステムから受け取ったデータセットの構造を理解したりするためにも使われます。

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

ブラウザーの開発者ツール: Chrome、Edge、Firefoxは、NetworkタブのプレビューペインでJSONレスポンスを自動的に整形します。
コードエディター: Visual Studio Codeでは、Alt+Shift+F（MacではShift+Option+F）で開いているJSONファイルを整形できます。ほとんどのエディターには同等のショートカットまたは整形用拡張機能があります。
コマンドライン: 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

どちらの方法も、テキストをネイティブのデータ構造に解析してから、空白を含めて再シリアライズします。これは簡単に書けますが、数値が変わる可能性があります。JavaScriptはすべての数値を倍精度浮動小数点数として格納するため、9007199254740993は9007199254740992として戻ってきます。Pythonは、Pythonの整数にサイズ制限がないため整数を正確に保持しますが、それでも1.0e2を100.0に書き換え、1e999を有効なJSONではないInfinityに変換します。データベースIDなど、非常に大きな整数を正確に扱う必要があるアプリケーションでは、数値ではなくJSON内の文字列として保存することがよくあります。

JSONの簡単な歴史

Douglas Crockfordは2000年代初頭にJSONを仕様化しました。その構文はJavaScriptのオブジェクトリテラルを基にしながら、あらゆる言語から利用できるようにしたものです。RFC 4627によって2006年に正式化されました。XMLより短く記述でき、JavaScriptオブジェクトに直接対応付けられたため、Webアプリケーションがページ全体を再読み込みするのではなくバックグラウンドでデータを取得し始めた時期に急速に普及しました。2010年代までには、REST APIやMongoDBなどのデータベースで標準的な形式になっていました。

よくある質問

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

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

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

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

標準的なJSONのインデントは何ですか？ Web開発では2個のスペースが最も一般的な慣例で、このツールも使用しています。スタイルガイドによっては4個のスペースやタブを使いますが、JSON仕様自体は特定のインデントを要求していません。

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

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