データの道具箱

INPUT · スライド

JSON で文字にする・戻す

01 / 05

そのままでは送れない

メモリの中にあるオブジェクト { name: "ゆい", age: 15 } は、そのままファイルに保存したり、ネットワークで別のコンピュータに送ったりできない。

外に出すためには、だれでも読める決まった形の「ただの文字列」に変換する必要があるよ。その世界共通の形式が JSON(ジェイソン)だ。

02 / 05

文字列にする JSON.stringify

JSON.stringify(値) と書くと、オブジェクトや配列を JSON 形式の文字列にしてくれる。

キーも文字列も必ず "(ダブルクォート)で囲まれるのが JSON のきまりだよ。

const user = { name: "ゆい", age: 15 };const text = JSON.stringify(user);console.log(text);console.log(typeof text);

実行結果

{"name":"ゆい","age":15}
string

03 / 05

オブジェクトに戻す JSON.parse

外から受け取った 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 にできる

オブジェクトだけでなく、配列もそのまま 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 文字列をオブジェクトや配列に復元
  • 通信や保存でデータをやり取りするときの現場の標準

それじゃあ、実際に変換してみよう。