01 / 05
そのままでは送れない
メモリの中にあるオブジェクト { name: "ゆい", age: 15 } は、そのままファイルに保存したり、ネットワークで別のコンピュータに送ったりできない。
外に出すためには、だれでも読める決まった形の「ただの文字列」に変換する必要があるよ。その世界共通の形式が JSON(ジェイソン)だ。
データの道具箱
INPUT · スライド
01 / 05
メモリの中にあるオブジェクト { name: "ゆい", age: 15 } は、そのままファイルに保存したり、ネットワークで別のコンピュータに送ったりできない。
外に出すためには、だれでも読める決まった形の「ただの文字列」に変換する必要があるよ。その世界共通の形式が JSON(ジェイソン)だ。
02 / 05
JSON.stringify(値) と書くと、オブジェクトや配列を JSON 形式の文字列にしてくれる。
キーも文字列も必ず "(ダブルクォート)で囲まれるのが JSON のきまりだよ。
const user = { name: "ゆい", age: 15 };const text = JSON.stringify(user);console.log(text);console.log(typeof text);実行結果
{"name":"ゆい","age":15}
string03 / 05
外から受け取った JSON 文字列は、JSON.parse(文字列) で JavaScript のオブジェクトに復元できる。
戻せば、いつものように . でプロパティを取り出せるよ。
const text = '{"name":"ゆい","age":15}';const user = JSON.parse(text);console.log(user.name);console.log(user.age);実行結果
ゆい 15
04 / 05
オブジェクトだけでなく、配列もそのまま JSON にできるよ。
[1, 2, 3] を JSON.stringify すれば "[1,2,3]" になり、JSON.parse すれば元の配列に戻るんだ。
const colors = ["あか", "あお"];const jsonText = JSON.stringify(colors);console.log(jsonText);const restored = JSON.parse(jsonText);console.log(restored[0]);実行結果
["あか","あお"] あか
05 / 05
ここまでを整理しておこう。
JSON.stringify(データ): オブジェクトや配列を文字列に変換JSON.parse(文字列): JSON 文字列をオブジェクトや配列に復元それじゃあ、実際に変換してみよう。