本記事では、
JavaScriptでJSONを扱う方法を解説します！
JSON（JavaScript Object Notation）とは？
JSON（JavaScript Object Notation）は、
データをわかりやすく整理して保存したり、
他のプログラムとやり取りするためのフォーマットです。
具体的には、文字列形式でデータを表現します。
例えば、
ウェブページがサーバーから情報を受け取るときに、
この形式でデータが送られてくることがよくあります。
JSONはシンプルな構造を持っていて、
人間にも読みやすく、プログラムでも簡単に扱えるのが特徴です。
例えば、次のような形でデータを表現します。
{
"name": "Taro",
"age": 30,
"hobbies": ["reading", "swimming"]
}これは「Taro」という名前の人の年齢と
趣味を表すデータです。
この形式をJavaScriptで扱うために、JSON.parse()というメソッドを使います。
JSONとXMLの違いとJSONのメリット
JSON（JavaScript Object Notation）は、
軽量で読みやすいデータ交換フォーマットとして
広く利用されていますが、
これにはXML（eXtensible Markup Language）
との比較が重要です。
XMLはかつてデータ交換に広く使われていましたが、
タグが多く冗長なため、JSONがその代替として台頭しました。
- 可読性
JSONはキーと値のペアでシンプルにデータを表現でき、
タグを使わないため人間にも理解しやすいです。
一方で、XMLは階層構造をタグで表現するため、
コードが長くなりがちです。 - 軽量性
JSONはデータをよりコンパクトに記述できるため、
特に通信量が限られるモバイル環境などでは重要な利点です。 - クロスプラットフォーム性
JSONはJavaScriptをはじめ、
PythonやPHPなど多くのプログラミング言語で
サポートされているため、言語間のデータ交換に非常に適しています。
JSON.parse()とは？
JSON.parse()は、
JavaScriptでJSON形式の文字列を
オブジェクトに変換するためのメソッドです。
JSONデータはもともと文字列として
送られてくることが多いので、
それをプログラムで使える形に変える必要があります。
例えば、次のように使います。
const jsonString = '{"name": "Taro", "age": 30}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Taro"上記のコードでは、jsonStringという文字列をJSON.parse()を使ってオブジェクトに変換しています。
この結果、
オブジェクトとしてnameやageの情報に
アクセスできるようになります。
JSON.parse()の基本的な使い方
まずは、JSON.parse()の最もシンプルな使い方を見てみましょう。
例えば、
サーバーから次のようなJSON形式の文字列が送られてきたとします。
'{"name": "Hanako", "age": 25, "city": "Tokyo"}'
この文字列を
JavaScriptのオブジェクトに変換するためには、
次のコードを使用します。
const data = '{"name": "Hanako", "age": 25, "city": "Tokyo"}';
const parsedData = JSON.parse(data);
console.log(parsedData.name); // "Hanako"JSON.parse()を使うことで、
文字列がオブジェクトに変わり、parsedData.nameで名前の「Hanako」にアクセスできます。
このように、
JSON文字列をパース（解析）して、
JavaScript内で使えるオブジェクトに変換することができるのです。
JSON.parse()を使う上での注意点
JSON.parse()は便利ですが、
いくつかのルールを守らないとエラーが発生します。
特に、JSONの文字列は必ずダブルクォーテーション（”）で
囲まれていなければなりません。
次のようなコードはエラーを引き起こします。
const invalidData = "{'name': 'Taro', 'age': 30}";
const obj = JSON.parse(invalidData); // エラー発生！
console.log(obj);
この場合、文字列の中のキーや
値がシングルクォーテーション（’）で囲まれているため、JSON.parse()はエラーを起こします。
正しいJSON形式は必ずダブルクォーテーションを使い、
次のように書きます。
const validData = '{"name": "Taro", "age": 30}';
const obj = JSON.parse(validData); // 正常に動作
console.log(obj);JSON.parse()の高度な使い方: reviver関数
JSON.parse()には、
第二引数としてreviver関数というものを指定することができます。
これは、パース中にデータを変換するためのカスタム処理を行うための関数です。
文字列→Dateの変換例
たとえば、
日付形式の文字列をDateオブジェクトに変換する場合に便利です。
const jsonString = '{"date": "2023-08-26T10:00:00Z"}';
const obj = JSON.parse(jsonString, (key, value) => {
if (key === 'date') {
return new Date(value);
}
return value;
});
console.log(obj.date); // Sat Aug 26 2023 19:00:00 GMT+0900 (日本標準時)
この例では、
JSON文字列の中にある日付データをDateオブジェクトとして変換しています。
これにより、より高度な処理が可能になります。
文字列→文字列の変換例
次のコードでは、firstNameというキーを持つプロパティに特別な処理を行い、
値を「たろう」に変更しています。
const json = '{"firstName": "太郎", "lastName": "山田"}';
const obj = JSON.parse(json, (key, value) => {
if (key === "firstName") {
return "たろう";
}
return value;
});
console.log(obj); // 出力結果: { firstName: "たろう", lastName: "山田" }この例のように、
特定のプロパティに対して柔軟な操作ができるため、JSON.parse()の応用として非常に有用です。
他によく使う：JSON.stringify()の基本と応用
これまでJSON.parse()について解説してきましたが、
オブジェクトをJSON文字列に変換するためのメソッド、JSON.stringify()も同じくらい重要です。JSON.parse()で受け取ったデータを
再びサーバーに送り返す際や、ファイルに保存する際に使います。
const obj = { name: "Hanako", age: 25, city: "Tokyo" };
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 出力結果: {"name":"Hanako","age":25,"city":"Tokyo"}
このコードでは、
オブジェクトをJSON文字列に変換し、
コンソールに出力しています。JSON.stringify()はデータを
ネットワーク経由で送信する場合に必須のツールです。
さらに、JSON.stringify()ではオプションとしてインデントを指定でき、
結果を読みやすくフォーマットできます。
const obj = { name: "Hanako", age: 25, city: "Tokyo" };
const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);
/* 出力結果:
{
"name": "Hanako",
"age": 25,
"city": "Tokyo"
}
*/
この場合、2つのスペースを使ってインデントされ、
可読性が向上します。
JSON.parse()とJSON.stringify()を組み合わせた実用例
ここでは、JSON.parse()とJSON.stringify()を
連携させた実用例を紹介します。
例えば、
ユーザーが入力したデータをサーバーに送信する前に、
オブジェクトをJSON形式に変換し、
受信後に再びオブジェクトに戻して処理する流れです。
// ユーザーのデータ
const userData = { name: "Taro", age: 30 };
// サーバーに送信する前にJSONに変換
const jsonToSend = JSON.stringify(userData);
// サーバーから受信したJSONを再びオブジェクトに変換
const receivedData = '{"name":"Taro","age":30}';
const parsedData = JSON.parse(receivedData);
console.log(parsedData.name); // "Taro"javascriptCopy code
このように、JSON.stringify()とJSON.parse()を組み合わせることで、
データの送受信や操作がスムーズに行えます。
特にWebアプリケーションやAPI通信で頻繁に使用されるパターンです。
よくある質問とトラブルシューティング
JSON.parse()を使用するときによくあるエラーとして、
「Unexpected token」や
「Expected double-quoted property name in JSON」エラーがあります。
これは、JSON形式が間違っている場合に発生します。
たとえば、次のようにカンマが余分にあるとエラーになります。
console.log(JSON.parse('{"name": "Taro", "age": 30,}'));
上記のJSONは、
最後のプロパティに余分なカンマがあるため無効です。
正しいJSON形式では、
最後のプロパティにカンマを置くことはできません。
このようなエラーが発生した場合は、
ブラウザのコンソールやエディタのエラーメッセージを確認し、
カンマの位置やクォーテーションに注意して修正しましょう。
まとめ
JSON.parse()は、
ウェブアプリケーションのデータ処理において
非常に便利なツールです。
初心者でも使いやすく、
基本的な使い方さえマスターすれば、
複雑なデータを簡単に扱えるようになります。
また、reviver関数などを使って、
より高度なデータ処理も可能です。
ぜひ、JSON.parse()を活用して、
効率的なデータ管理を実現しましょう！
