JavaScript Object Notation (JSON) は、データのやり取りを簡単にするために開発された軽量なデータ交換フォーマットです。JSONは言語に依存せず、多くのプログラミング言語で利用できます。
この記事では、JSONの基本的な使い方であるparse()とstringify()メソッドについて解説し、よくある間違いや注意点についても説明します。
JSON.parse()とは
JSON形式の文字列をJavaScriptオブジェクトに変換するのがJSON.parse()メソッドです。これにより、JSONデータをJavaScriptで操作しやすくなります。
| // 使用方法(オブジェクト準備～.parse()実行): const jsonString = '{"name": "Sayoko", "age": 25}'; const jsonObject = JSON.parse(jsonString); // 出力指示 console.log(jsonObject.name); // 出力結果: Sayoko |
JSON.parse()の間違えやすいポイント
1.JSON形式の文字列内にあるプロパティ名と値はダブルクォーテーション（"）で囲む必要があります。シングルクォーテーション（'）を使うと、エラーが発生します。2.JSON.parse() は、文字列が正しいJSON形式であることを前提としています。文字列の末尾がカンマになっているなど不正な形式の場合、SyntaxErrorが発生します。
JSON.stringify()とは
JSON.stringify()メソッドは、JavaScriptオブジェクトをJSON形式の文字列に変換します。これにより、データをサーバーに送信する前にデータを整形することができます。
| // 使用方法(オブジェクト準備～.stringify()実行): const jsonObject = { name: "Kallen", age: 18 }; const jsonString = JSON.stringify(jsonObject); // 出力指示 console.log(jsonString); // 出力結果: {"name":" Kallen","age":18} |
JSON.stringify()の間違えやすいポイント
1.JSON.stringify()メソッドは、オブジェクトのプロパティがシンボル型の場合、そのプロパティを無視します。
|
// 例:
const mySymbol = Symbol('mySymbol'); const jsonObject = { name: "Nunnally", age: 15, [mySymbol]: 'hiddenValue }; const jsonString = JSON.stringify(jsonObject); // 出力指示 console.log(jsonString); // 出力結果: {"name":"Nunnally","age":15} |
3.循環参照があるオブジェクトをJSON.stringify()で変換しようとすると、TypeErrorが発生します。
| // 例: const jsonObject1 = { name: "Kallen", age: 18 }; const jsonObject2 = { name: "Gino", age: 17 }; jsonObject1.friend = jsonObject2; jsonObject2.friend = jsonObject1; const jsonString = JSON.stringify(jsonObject1); // 出力指示 console.log(jsonString); // 出力結果: Error: TypeError Converting circular structure to JSON (循環参照) |
循環参照を解決するには、JSON.stringify()の第二引数にリプレイサ（置換関数）を渡します。リプレイサを使って、循環参照を無視するか別の方法で処理することができます。
JSON.stringify()の第二引数にリプレイサ（置換関数）を設定する例
上の間違えやすいポイントの解説で出てきた、JSON.stringify()のリプレイサ（置換関数）についてもう少し詳しく解説します。
JSON.stringify()の第二引数にリプレイサを渡すことで、JSONデータをフィルタリングすることができます。リプレイサは、キーと値のペアを引数に取り、値を返す関数です。返された値によって、結果のJSON文字列に含めるかどうかが決まります。
| // 例 // オブジェクトの準備 const jsonObject1 = { "name": "Kallen", "age": 18 }; const jsonObject2 = { "name": "Gino", "age": 17 }; // 互いに相手のオブジェクトへの参照を持つfriendプロパティを追加 jsonObject1.friend = jsonObject2; jsonObject2.friend = jsonObject1; // friendプロパティの循環参照によるエラーを回避するリプレイサ関数 function excludeFriendProperty(key, value) { if (key === "friend" && typeof value === "object" && value !== null) { return undefined; } return value; } // jsonObject1をJSON文字列に変換（リプレイサ関数を適用） const filteredJsonString = JSON.stringify(jsonObject1, excludeFriendProperty); // 出力指示 console.log(filteredJsonString); // 出力結果: {"name":"Kallen","age":18} |
この例では、リプレイサ関数がfriendプロパティの値をチェックし、オブジェクトの場合はundefinedを返しています。undefinedが返されると、そのプロパティはJSON文字列に含まれません。
まとめ
この記事では、JSONのparse()とstringify()メソッドの使い方と、間違えやすいポイントについて解説しました。これらのメソッドを使うことで、データを簡単にやり取りすることができます。今回ご紹介した、シンボル型や関数型のプロパティ、循環参照などのエラーには注意しながらどんどん使っていきましょう。
－－－－－参考情報－－－－－
■TV出演動画：ええじゃない課Biz（2022/05/29 放送 TOKYO MX）
アンタッチャブル柴田さん、アルコ＆ピースさんがレギュラーのビジネス情報番組「ええじゃない課Biz」にて、プログラミングスキル判定サービス「TOPSIC」と企業・学校対抗プログラミングコンテスト「PG BATTLE」のご紹介をさせていただきました。
