JSON（JavaScript Object Notation）は、ウェブアプリケーションにおいてサーバーとクライアント間でデータをやり取りするために頻繁に使用される軽量のデータ交換フォーマットです。特に複雑なオブジェクトの場合、生のJSONデータは読みづらくなる可能性があります。幸いにも、JavaScriptはJSONの可読性と管理性を向上させるための組み込みメソッドを提供しています。
目次
JSON.stringify()を使ったJSONオブジェクトの整形
JSON.stringify()メソッドは、JavaScriptオブジェクトをJSON文字列に変換するための主要なツールです。デフォルトではコンパクトな出力が行われますが、オプションのspaceパラメーターで整形を制御できます。このパラメーターはインデントレベルを指定します。
次のJavaScriptオブジェクトを考えてみましょう。
const myDataObject = {
name: "John Doe",
age: 30,
address: {
street: "123 Main St",
city: "Anytown",
zip: "12345"
},
skills: ["JavaScript", "HTML", "CSS"]
};
これを可読性の高いJSON文字列に整形するには、spaceパラメーター付きでJSON.stringify()を使用します。
const formattedJson = JSON.stringify(myDataObject, null, 2); // インデントに2スペース
console.log(formattedJson);
これにより、以下が出力されます。
{
"name": "John Doe",
"age": 30,
"address": {
"street": "123 Main St",
"city": "Anytown",
"zip": "12345"
},
"skills": [
"JavaScript",
"HTML",
"CSS"
]
}
JSON.stringify(myDataObject, null, 2)の2は、インデントを2スペースに設定します。この値（例：4、またはタブの場合は”t”）はお好みで調整できます。nullは、置換関数（詳細な整形オプションを可能にします。高度なチュートリアルで説明します）のプレースホルダーです。
JSON.stringify()とJSON.parse()を使ったJSON文字列の再整形
整形されていないJSON文字列（例：1行）の場合、JSON.parse()とJSON.stringify()を組み合わせて再整形します。
整形されていないJSON文字列の例：
const unformattedJson = '{"name":"Jane Doe","age":25,"city":"New York"}';
まず、文字列をJavaScriptオブジェクトに解析します。
const jsonObject = JSON.parse(unformattedJson);
次に、JSON.stringify()を使用してオブジェクトをJSON文字列に整形します。
const formattedJson = JSON.stringify(jsonObject, null, 4); // インデントに4スペース
console.log(formattedJson);
結果：
{
"name": "Jane Doe",
"age": 25,
"city": "New York"
}
この2段階のプロセスにより、整形されていないJSONを効果的にクリーンアップできます。予期しないアプリケーションクラッシュを防ぐために、常にJSON.parse()エラー（try...catchブロックを使用）を処理してください。
要約すると、JSON.stringify()は、JSON.parse()の有無にかかわらず、JavaScriptでJSONデータを整形する簡単な方法を提供し、コードの可読性を大幅に向上させます。