JSON：データをやりとりする形

天気予報のデータも、SNSの投稿一覧も、WebでやりとりされるデータはほとんどがJSONという形をしています。読み方は「ジェイソン」。オブジェクトにそっくりなのに別物——その違いが分かると、外のデータを扱う入口に立てます。

JSONは「データを表す文字」

オブジェクトは、プログラムの中で使う値でした。JSONは、それを文字にして持ち運べるようにしたものです。

// オブジェクト（プログラムの中の値）
const shima = { name: "しまちゃん", age: 3 };

// JSON（文字）
'{"name": "しまちゃん", "age": 3}'

見た目はそっくりですが、下は全体がひとつの文字です。だから、そのままではドットで取り出せません。

JSONの決まり

オブジェクトより決まりが厳しいのが特徴です。

{
  "name": "しまちゃん",
  "age": 3,
  "likes": ["おえかき", "ラーメン"],
  "isBird": true
}

厳しいのは、どの言語からも同じように読めるようにするためです。JavaScriptだけの都合を持ちこめない、と考えると納得しやすくなります。

文字 → 値：JSON.parse

受け取ったJSONは、まずJSON.parse()でプログラムが扱える形に戻します。

const text = '{"name": "しまちゃん", "age": 3}';
const shima = JSON.parse(text);

console.log(shima.name);
console.log(shima.age + 1);

戻したあとは、ふつうのオブジェクトです。.nameで取り出せますし、数は数として計算できます。

値 → 文字：JSON.stringify

逆に、送ったり保存したりするときはJSON.stringify()で文字に直します。

const shima = { name: "しまちゃん", age: 3 };
const text = JSON.stringify(shima);

console.log(text);

{"name":"しまちゃん","age":3}という文字になりました。ブラウザに保存するときにもこの形を使います。

入れ子になったJSONを読む

実際のデータは、たいてい何段か入れ子になっています。

{
  "city": "さっぽろ",
  "weather": {
    "today": "ゆき",
    "temp": -3
  },
  "forecast": ["ゆき", "くもり", "はれ"]
}

読むときは、上から順にたどるだけです。

const data = JSON.parse(text);

console.log(data.city);              // さっぽろ
console.log(data.weather.today);     // ゆき
console.log(data.forecast[0]);       // ゆき
console.log(data.forecast.length);   // 3

data.weather.todayは「dataの中のweatherの中のtoday」。長く見えても、左から1つずつ入っていくだけです。

つまずきやすいエラー

このレッスンのまとめ

1. JSONはデータを表す文字。オブジェクトとそっくりだが、キーも文字もダブルクォート必須の厳しい形
2. 文字→値はJSON.parse()、値→文字はJSON.stringify()
3. 入れ子はdata.weather.todayのように左から1つずつたどる