6.3 JSONのパースと文字列化
JavaScript のプログラムの中では、サーバーから受け取った「JSON 形式の文字列」を「JavaScript のオブジェクト」に変換したり、その逆を行ったりする操作が頻繁に行われます。
この時に使用する命令が JSON.parse() と JSON.stringify() です。
JSON.parse()
JSON のパース（解析）を行います。受け取った文字列を、プログラムで扱えるオブジェクトに変換します。
JSON.stringify()
JavaScript のオブジェクトを JSON 形式の文字列に変換します。
6.3.1 JSON 形式の変換操作を行うプログラム
JSON 形式の文字列をオブジェクトに変換して、データを取り出してみましょう。
ソースフォルダ：public/ch06
ファイル名：json.js
➢ json.html
前の章で作った ch06/object.html をコピーし、ch06 にペーストしてください。
その際に、ファイル名を json.html に変更します。
ファイル内の object.html や object.js の記述も、json.html や json.js に修正します。
➢ json.js
// json.js
// 1. サーバーから届いたと想定される「JSON形式の文字列」です
// ※キーがダブルクオートで囲まれている点に注目してください
const jsonString = '{ "bookId": 101, "title": "JS基礎テキスト", "price": 2500 }';
// 2. 文字列を「JavaScriptオブジェクト」に変換（パース）します
const bookObj = JSON.parse(jsonString);
// 3. オブジェクトになったので、ドット（.）でデータを取り出せます
alert(`書籍タイトル: ${bookObj.title}`);
alert(`価格: ${bookObj.price}円`);
// 4. 逆に、オブジェクトを文字列に戻して確認します
const backToString = JSON.stringify(bookObj);
alert(`JSON文字列に戻した結果: \n${backToString}`);
実行結果
解説
5 行目で、サーバーから届いたと想定される「JSON 形式の文字列」を const jsonString で定義しています。キーがダブルクオートで囲まれている点に注目してください。
5: const jsonString = '{ "bookId": 101, "title": "JS 基礎テキスト", "price": 2500 }';
8 行目では JSON.parse を使って bookObj という新しい変数に jsonString をパースした結果を代入しています。この操作により bookObj は、jsonString に定義されたキーと値をもつ JavaScript のオブジェクトに変換されます。
8: const bookObj = JSON.parse(jsonString);
オブジェクトになった後は、bookObj のプロパティから、ドット（.）キーを使って値を取り出せるようになります。11 行目と 12 行目では、title と price というキーのプロパティから bookObj.title と bookObj.price でアクセスして値を取り出し、その結果を alert で表示しています。
11: alert(`書籍タイトル: ${bookObj.title}`);
12: alert(`価格: ${bookObj.price}円`);
15 行目で JSON.stringify を使って、新しく定義した backToString に bookObj を再び「JSON 形式の文字列」に戻して代入する処理を行っています。16～17 行目の表示結果では、最初に定義した jsonString と同じ文字列が alert の中に表示されているのが確認できます。
15: const backToString = JSON.stringify(bookObj);
16: alert(`JSON 文字列に戻した結果: ¥n${backToString}`);
このように JSON.parse() を使うことで、魔法のように文字列が「オブジェクト（便利な箱）」に変わります。オブジェクトに変換された後は、オブジェクトのルールに従って個別のデータ（タイトルや価格）を自由に取り出せるようになります。逆に JSON.stringify() は、データをネットワーク上で送信する直前に、より軽量で通信に有利な特性を持つ「JSON 形式の文字列」にパッキングするような操作だと考えると分かりやすいでしょう。