JavaScriptとJSONの基本
JavaScript Object Notation（JSON）は、データ交換形式として広く使用されています。JSONは、JavaScriptのオブジェクトリテラル構文をベースにしていますが、JavaScriptだけでなく他の多くのプログラミング言語でも使用できます。
JSONとは何か？
JSONは、データを送受信するための軽量のデータ交換形式です。人間にとって読み書きが容易で、マシンにとっても解析や生成が容易です。JSONはプロパティ名と値のペアを使用してオブジェクトのデータを表現します。これらのペアはコロン（:）で区切られ、カンマ（,）で区切られたペアのリストは波括弧（{}）で囲まれます。
JavaScriptでのJSONの使用
JavaScriptでは、JSON.stringify()とJSON.parse()の2つの主要な関数を使用してJSONデータを扱います。
JSON.stringify()は、JavaScriptのオブジェクトをJSON文字列に変換します。JSON.parse()は、JSON文字列をJavaScriptのオブジェクトに変換します。
これらの関数は、サーバーとの通信やブラウザのローカルストレージでデータを保存する際に特に役立ちます。次のセクションでは、これらの関数の使用方法について詳しく説明します。
JSON.stringifyの使い方
JSON.stringify()は、JavaScriptのオブジェクトをJSON文字列に変換するための関数です。この関数は、オブジェクトを引数として受け取り、そのオブジェクトを表現するJSON形式の文字列を返します。
基本的な使い方
以下に、基本的な使い方を示します。
let obj = {
name: "John",
age: 30,
city: "New York"
};
let jsonString = JSON.stringify(obj);
console.log(jsonString);
// 出力: {"name":"John","age":30,"city":"New York"}
この例では、objという名前のオブジェクトを作成し、そのオブジェクトをJSON.stringify()関数に渡しています。関数はオブジェクトをJSON形式の文字列に変換し、その結果をjsonStringという変数に格納します。
オプションの引数
JSON.stringify()関数は、オプションの引数を2つ受け取ることができます。
- replacer: これは関数または配列であり、変換プロセス中にどのプロパティを含めるか、またはどのように変換するかを定義します。
- space: これは整数または文字列であり、出力されるJSON文字列の書式設定に使用されます。
これらの引数を使用すると、JSON.stringify()の動作をより詳細に制御することができます。次のセクションでは、これらの引数の使用方法について詳しく説明します。
JSON.parseの使い方
JSON.parse()は、JSON形式の文字列をJavaScriptのオブジェクトに変換するための関数です。この関数は、JSON文字列を引数として受け取り、その文字列を解析してJavaScriptのオブジェクトを生成します。
基本的な使い方
以下に、基本的な使い方を示します。
let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj);
// 出力: {name: "John", age: 30, city: "New York"}
この例では、jsonStringという名前のJSON形式の文字列を作成し、その文字列をJSON.parse()関数に渡しています。関数はJSON文字列を解析し、その結果をobjという変数に格納します。
オプションの引数
JSON.parse()関数は、オプションの引数を1つ受け取ることができます。
- reviver: これは関数であり、解析プロセス中に各キーと値ペアに対して実行されます。この関数を使用すると、値の変換方法をカスタマイズできます。
この引数を使用すると、JSON.parse()の動作をより詳細に制御することができます。次のセクションでは、この引数の使用方法について詳しく説明します。
応用的な使い方
JSON.stringify()とJSON.parse()は、基本的な使い方だけでなく、より高度な使い方も可能です。以下に、それぞれの関数の応用的な使い方を示します。
JSON.stringifyの応用的な使い方
JSON.stringify()は、第二引数としてreplacer関数または配列を、第三引数としてspaceを受け取ることができます。
let obj = {
name: "John",
age: 30,
city: "New York"
};
let jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);
/*
出力:
{
"name": "John",
"age": 30,
"city": "New York"
}
*/
この例では、JSON.stringify()の第三引数に2を指定しています。これにより、出力されるJSON文字列は整形され、読みやすくなります。
JSON.parseの応用的な使い方
JSON.parse()は、第二引数としてreviver関数を受け取ることができます。この関数は、解析プロセス中に各キーと値ペアに対して実行されます。
let jsonString = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(jsonString, (key, value) => {
if (key === "name") {
return value.toUpperCase();
} else {
return value;
}
});
console.log(obj);
// 出力: {name: "JOHN", age: 30, city: "New York"}
この例では、JSON.parse()の第二引数に関数を指定しています。この関数は、キーが"name"の場合に値を大文字に変換します。その結果、"John"が"JOHN"に変換されます。
エラーハンドリング
JSON.stringify()とJSON.parse()は、エラーが発生した場合に例外をスローします。これらの関数を使用する際には、適切なエラーハンドリングを行うことが重要です。
JSON.stringifyのエラーハンドリング
JSON.stringify()は、循環参照があるオブジェクトを変換しようとするとエラーをスローします。
let obj = {};
obj.myself = obj;
try {
JSON.stringify(obj);
} catch (error) {
console.error(error);
// 出力: TypeError: Converting circular structure to JSON
}
この例では、objオブジェクトが自分自身を参照しているため、JSON.stringify()はエラーをスローします。このエラーはtry/catchブロックで捕捉できます。
JSON.parseのエラーハンドリング
JSON.parse()は、不正なJSON文字列を解析しようとするとエラーをスローします。
let jsonString = '{"name":"John", "age":30, "city":"New York';
try {
JSON.parse(jsonString);
} catch (error) {
console.error(error);
// 出力: SyntaxError: Unexpected end of JSON input
}
この例では、jsonStringが不正なJSON文字列（閉じ括弧が欠けている）であるため、JSON.parse()はエラーをスローします。このエラーはtry/catchブロックで捕捉できます。
これらのエラーハンドリングのテクニックを使用することで、JSON.stringify()とJSON.parse()のエラーを効果的に管理できます。