基礎から学ぶJavaScript入門 90日コース | JavaScriptでデータを扱う － Day 24：JSON

Day 24：JSON（前半）

「JavaScriptのデータを“外の世界”とやり取りするための共通言語」

Day 24では、Web開発でほぼ必ず登場する JSON（ジェイソン） について学びます。

学習内容は次のとおりです。

• JSONとは
• JSON.stringify()
• JSON.parse()
• 実践：オブジェクトをJSONに変換
• 実践：JSONからJavaScriptデータへ変換

ここで身につけてほしいのは、

「JavaScriptのオブジェクトや配列を、文字列として保存・送受信できるようにする」

という感覚です。 これは、API通信・設定ファイル・データ保存など、実務で非常に重要な基礎になります。

JSONとは

データを「文字列として表現するためのルール」

JSONは、

データを「文字列」として表現するための、世界共通のフォーマット

です。

JavaScriptだけでなく、 Python・Ruby・Java・Goなど、ほとんどの言語がJSONを扱えます。

JSONの基本的な形

JSONは、見た目はJavaScriptのオブジェクトや配列に似ていますが、 「文字列として扱われる」 という点が重要です。

例として、ユーザー情報をJSONで表現すると次のようになります。

{
  "id": 101,
  "name": "佐藤花子",
  "age": 30,
  "isPremium": false
}

{
  "id": 101,
  "name": "佐藤花子",
  "age": 30,
  "isPremium": false
}

ポイントは次のとおりです。

• キー（プロパティ名）は必ずダブルクォーテーション" "で囲む
  • name: "佐藤花子" ではなく "name": "佐藤花子"
• 文字列もダブルクォーテーション " " を使います
• 数値・真偽値（true / false）はそのまま書けます

JavaScriptのオブジェクトと似ていますが、 「JSONはあくまで文字列として扱われる」という点が違いです。

JSON.stringify()：オブジェクトをJSON文字列に変換する

役割：JavaScriptのデータ → JSON文字列

JSON.stringify() は、

JavaScriptのオブジェクトや配列を、JSON形式の文字列に変換する関数

です。

まずはシンプルな例から見てみます。

const user = {
  id: 101,
  name: '佐藤花子',
  age: 30,
  isPremium: false,
};

// JavaScriptのオブジェクトをJSON文字列に変換します
const jsonString = JSON.stringify(user);

console.log(jsonString);

const user = {
  id: 101,
  name: '佐藤花子',
  age: 30,
  isPremium: false,
};

// JavaScriptのオブジェクトをJSON文字列に変換します
const jsonString = JSON.stringify(user);

console.log(jsonString);

コンソールには、次のような文字列が表示されます。

{"id":101,"name":"佐藤花子","age":30,"isPremium":false}

• これは「JavaScriptのオブジェクト」ではなく「ただの文字列」です。
• しかし、この文字列はJSONのルールに従っているので、 他の言語やシステムでも読み取ることができます。

なぜ文字列にするのか

文字列にする理由は、主に次のような場面で必要になるからです。

• サーバーとの通信（HTTP）
  • リクエストやレスポンスのボディにJSON文字列を入れる
• ファイル保存
  • 設定ファイルやデータファイルをJSON形式で保存する
• ローカルストレージなどへの保存
  • ブラウザのlocalStorageは文字列しか保存できないため、JSON文字列にする

JavaScriptのオブジェクトのままでは、 そのまま送ったり保存したりできないことが多いので、 一度「文字列」に変換する必要があります。

JSON.parse()：JSON文字列をJavaScriptのデータに戻す

役割：JSON文字列 → JavaScriptのオブジェクト・配列

JSON.parse() は、

JSON形式の文字列を、JavaScriptのオブジェクトや配列に変換する関数

です。

先ほどの jsonString を使ってみます。

const jsonString = '{"id":101,"name":"佐藤花子","age":30,"isPremium":false}';

// JSON文字列をJavaScriptのオブジェクトに変換します
const userObject = JSON.parse(jsonString);

console.log(userObject);
console.log(userObject.name);      // '佐藤花子'
console.log(userObject.isPremium); // false

const jsonString = '{"id":101,"name":"佐藤花子","age":30,"isPremium":false}';

// JSON文字列をJavaScriptのオブジェクトに変換します
const userObject = JSON.parse(jsonString);

console.log(userObject);
console.log(userObject.name);      // '佐藤花子'
console.log(userObject.isPremium); // false

• userObject は、普通のJavaScriptのオブジェクトです。
• そのため、userObject.name のようにプロパティへアクセスできます。

「文字列として受け取ったデータ」を使える形にする

サーバーからのレスポンスや、 ファイルから読み込んだデータは、 JSON文字列であることが多いです。

そのままでは「ただの文字列」なので、 JSON.parse() を使って「使える形（オブジェクト・配列）」に変換します。

実践：オブジェクトをJSONに変換する

ユーザー情報をJSON文字列にして保存するイメージ

const user = {
  id: 101,
  name: '佐藤花子',
  age: 30,
  isPremium: false,
};

// オブジェクト → JSON文字列
const jsonUser = JSON.stringify(user);

console.log('JSON文字列：', jsonUser);
// 例：{"id":101,"name":"佐藤花子","age":30,"isPremium":false}

const user = {
  id: 101,
  name: '佐藤花子',
  age: 30,
  isPremium: false,
};

// オブジェクト → JSON文字列
const jsonUser = JSON.stringify(user);

console.log('JSON文字列：', jsonUser);
// 例：{"id":101,"name":"佐藤花子","age":30,"isPremium":false}

この jsonUser を、例えばブラウザのlocalStorageに保存することができます。

// localStorageに保存するイメージ（実際にブラウザで動きます）
localStorage.setItem('user', jsonUser);

// localStorageに保存するイメージ（実際にブラウザで動きます）
localStorage.setItem('user', jsonUser);

• localStorage は文字列しか保存できないため、 オブジェクトをそのまま渡すことはできません。
• そこで、JSON.stringify() で文字列に変換してから保存します。

実践：JSONからJavaScriptデータへ変換する

保存しておいたJSON文字列をオブジェクトに戻す

// 事前に localStorage に 'user' キーでJSON文字列が保存されているとします
const storedJsonUser = localStorage.getItem('user');

console.log('保存されているJSON文字列：', storedJsonUser);

// JSON文字列 → オブジェクト
const storedUserObject = JSON.parse(storedJsonUser);

console.log('復元されたオブジェクト：', storedUserObject);
console.log('ユーザー名：', storedUserObject.name);
console.log('プレミアム会員か：', storedUserObject.isPremium);

// 事前に localStorage に 'user' キーでJSON文字列が保存されているとします
const storedJsonUser = localStorage.getItem('user');

console.log('保存されているJSON文字列：', storedJsonUser);

// JSON文字列 → オブジェクト
const storedUserObject = JSON.parse(storedJsonUser);

console.log('復元されたオブジェクト：', storedUserObject);
console.log('ユーザー名：', storedUserObject.name);
console.log('プレミアム会員か：', storedUserObject.isPremium);

• localStorage.getItem() で取り出した値は「文字列」です。
• JSON.parse() でオブジェクトに戻すことで、 普通のJavaScriptのデータとして扱えるようになります。

配列のJSON変換：一覧データを送受信する

商品一覧をJSON文字列に変換する

const products = [
  { id: 1, name: 'ノート',   price: 100 },
  { id: 2, name: 'ペン',     price: 150 },
  { id: 3, name: '消しゴム', price: 80  },
];

// 配列（中身はオブジェクト） → JSON文字列
const jsonProducts = JSON.stringify(products);

console.log('商品一覧のJSON文字列：', jsonProducts);

const products = [
  { id: 1, name: 'ノート',   price: 100 },
  { id: 2, name: 'ペン',     price: 150 },
  { id: 3, name: '消しゴム', price: 80  },
];

// 配列（中身はオブジェクト） → JSON文字列
const jsonProducts = JSON.stringify(products);

console.log('商品一覧のJSON文字列：', jsonProducts);

• products は「オブジェクトの配列」です。
• JSON.stringify() は、配列もオブジェクトもまとめてJSON文字列にしてくれます。

JSON文字列から配列に戻す

const jsonProductsString =
  '[{"id":1,"name":"ノート","price":100},{"id":2,"name":"ペン","price":150},{"id":3,"name":"消しゴム","price":80}]';

// JSON文字列 → 配列
const productsArray = JSON.parse(jsonProductsString);

console.log('復元された配列：', productsArray);

// 1件ずつ表示してみます
for (const product of productsArray) {
  console.log(`商品名：${product.name}／価格：${product.price}円`);
}

const jsonProductsString =
  '[{"id":1,"name":"ノート","price":100},{"id":2,"name":"ペン","price":150},{"id":3,"name":"消しゴム","price":80}]';

// JSON文字列 → 配列
const productsArray = JSON.parse(jsonProductsString);

console.log('復元された配列：', productsArray);

// 1件ずつ表示してみます
for (const product of productsArray) {
  console.log(`商品名：${product.name}／価格：${product.price}円`);
}

• productsArray は、普通のJavaScriptの配列です。
• その中の各要素はオブジェクトなので、 product.name や product.price にアクセスできます。

Day 24 前半 練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールで「オブジェクト → JSON」「JSON → オブジェクト」の流れを確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 24 前半：JSON 練習テンプレート</title>
</head>
<body>
  <h1>Day 24 前半：JSON（オブジェクトとJSON文字列の変換）</h1>
  <p>ブラウザのコンソールを開いて、ログを確認してください。</p>

  <script>
    console.log('--- オブジェクト → JSON文字列 ---');

    const user = {
      id: 101,
      name: '佐藤花子',
      age: 30,
      isPremium: false,
    };

    const jsonUser = JSON.stringify(user);

    console.log('JSON文字列：', jsonUser);

    console.log('--- JSON文字列 → オブジェクト ---');

    const jsonString = '{"id":101,"name":"佐藤花子","age":30,"isPremium":false}';

    const userObject = JSON.parse(jsonString);

    console.log('復元されたオブジェクト：', userObject);
    console.log('ユーザー名：', userObject.name);
    console.log('プレミアム会員か：', userObject.isPremium);

    console.log('--- 配列（商品一覧） → JSON文字列 ---');

    const products = [
      { id: 1, name: 'ノート',   price: 100 },
      { id: 2, name: 'ペン',     price: 150 },
      { id: 3, name: '消しゴム', price: 80  },
    ];

    const jsonProducts = JSON.stringify(products);

    console.log('商品一覧のJSON文字列：', jsonProducts);

    console.log('--- JSON文字列 → 配列（商品一覧） ---');

    const jsonProductsString =
      '[{"id":1,"name":"ノート","price":100},{"id":2,"name":"ペン","price":150},{"id":3,"name":"消しゴム","price":80}]';

    const productsArray = JSON.parse(jsonProductsString);

    console.log('復元された商品配列：', productsArray);

    for (const product of productsArray) {
      console.log(`商品名：${product.name}／価格：${product.price}円`);
    }

    console.log('--- Day 24 前半：JSONの練習が完了しました ---');
  </script>
</body>
</html>

Day 24 前半のまとめ

Day 24前半では、

• JSONが「データを文字列として表現するための世界共通フォーマット」であること
• JSON.stringify() で、オブジェクトや配列をJSON文字列に変換できること
• JSON.parse() で、JSON文字列をJavaScriptのオブジェクト・配列に戻せること
• オブジェクト・配列をJSONに変換して保存・送受信し、 それを再びJavaScriptのデータとして扱えるようにする流れ

を確認しました。

JSONは、 「JavaScriptの世界」と「外の世界（サーバー・他の言語・ファイル）」をつなぐ橋 のような存在です。

ここで学んだ JSON.stringify() と JSON.parse() は、 今後のAPI通信やデータ保存の基礎として、何度も登場していきますので、 ぜひ手を動かしながら感覚をつかんでいってください。

Day 24：JSON（後半）

「“外の世界と安全にデータをやり取りする”感覚を身につける」

Day 24後半では、前半で学んだ

• JSONとは
• JSON.stringify()
• JSON.parse()

を、もう少し実務寄り・安全性も意識しながら使っていきます。

テーマは引き続き、

• オブジェクトをJSONに変換
• JSONからJavaScriptデータへ変換

ですが、ここでは

• 「どんな場面でJSONが使われるのか」
• 「どうやって安全に扱うのか」

という視点も加えて、ステップバイステップで解説していきます。

JSONを使う典型的なシナリオをイメージする

シナリオ1：ブラウザとサーバーの通信

Webアプリでは、ブラウザ（フロントエンド）とサーバー（バックエンド）が データをやり取りするとき、ほぼ必ずと言っていいほどJSONが使われます。

• ブラウザ → サーバー
  • フォームの入力内容をJSONにして送る
• サーバー → ブラウザ
  • 商品一覧やユーザー情報をJSONで返す

このとき、JavaScript側では

• 送る前に JSON.stringify() で文字列にする
• 受け取った後に JSON.parse() でオブジェクト・配列に戻す

という流れになります。

シナリオ2：ブラウザ内でのデータ保存（localStorage）

ブラウザの localStorage は「文字列しか保存できない」ため、 オブジェクトや配列を保存したいときは、JSON文字列に変換する必要があります。

• 保存するとき：JSON.stringify()
• 取り出して使うとき：JSON.parse()

というセットで覚えておくと便利です。

オブジェクトをJSONに変換する実践

ユーザー情報をJSONとして保存する流れ

まずは、ユーザー情報のオブジェクトを用意します。

const user = {
  id: 101,
  name: '佐藤花子',
  age: 30,
  isPremium: false,
};

const user = {
  id: 101,
  name: '佐藤花子',
  age: 30,
  isPremium: false,
};

このままでは、localStorage に保存できません。 そこで、JSON.stringify() を使ってJSON文字列に変換します。

// オブジェクト → JSON文字列
const jsonUser = JSON.stringify(user);

console.log('JSON文字列：', jsonUser);
// 例：{"id":101,"name":"佐藤花子","age":30,"isPremium":false}

// オブジェクト → JSON文字列
const jsonUser = JSON.stringify(user);

console.log('JSON文字列：', jsonUser);
// 例：{"id":101,"name":"佐藤花子","age":30,"isPremium":false}

この jsonUser を localStorage に保存するイメージは次のようになります。

// localStorageに保存（ブラウザで動きます）
localStorage.setItem('user', jsonUser);

// localStorageに保存（ブラウザで動きます）
localStorage.setItem('user', jsonUser);

• setItem の第2引数は文字列なので、 オブジェクトではなくJSON文字列を渡しています。
• これで「ユーザー情報をブラウザに保存する」ことができます。

JSONからJavaScriptデータへ変換する実践

保存しておいたJSON文字列をオブジェクトに戻す

先ほど保存したユーザー情報を取り出して、 JavaScriptのオブジェクトとして使えるようにします。

// localStorageからJSON文字列を取り出します
const storedJsonUser = localStorage.getItem('user');

console.log('保存されているJSON文字列：', storedJsonUser);

// JSON文字列 → オブジェクト
const storedUserObject = JSON.parse(storedJsonUser);

console.log('復元されたオブジェクト：', storedUserObject);
console.log('ユーザー名：', storedUserObject.name);
console.log('プレミアム会員か：', storedUserObject.isPremium);

// localStorageからJSON文字列を取り出します
const storedJsonUser = localStorage.getItem('user');

console.log('保存されているJSON文字列：', storedJsonUser);

// JSON文字列 → オブジェクト
const storedUserObject = JSON.parse(storedJsonUser);

console.log('復元されたオブジェクト：', storedUserObject);
console.log('ユーザー名：', storedUserObject.name);
console.log('プレミアム会員か：', storedUserObject.isPremium);

• getItem の戻り値は「文字列」です。
• JSON.parse() を使うことで、 再び「普通のJavaScriptのオブジェクト」として扱えるようになります。

配列のJSON変換：一覧データを扱う

商品一覧をJSON文字列にして送信するイメージ

商品一覧を表す配列を用意します。

const products = [
  { id: 1, name: 'ノート',   price: 100 },
  { id: 2, name: 'ペン',     price: 150 },
  { id: 3, name: '消しゴム', price: 80  },
];

const products = [
  { id: 1, name: 'ノート',   price: 100 },
  { id: 2, name: 'ペン',     price: 150 },
  { id: 3, name: '消しゴム', price: 80  },
];

この配列をサーバーに送るとき、 JSON.stringify() でJSON文字列に変換します。

const jsonProducts = JSON.stringify(products);

console.log('商品一覧のJSON文字列：', jsonProducts);

const jsonProducts = JSON.stringify(products);

console.log('商品一覧のJSON文字列：', jsonProducts);

• この文字列をHTTPリクエストのボディに載せて送る、というイメージです。

サーバーから返ってきたJSON文字列を配列に戻す

サーバーから次のようなJSON文字列が返ってきたとします。

const jsonProductsString =
  '[{"id":1,"name":"ノート","price":100},{"id":2,"name":"ペン","price":150},{"id":3,"name":"消しゴム","price":80}]';

const jsonProductsString =
  '[{"id":1,"name":"ノート","price":100},{"id":2,"name":"ペン","price":150},{"id":3,"name":"消しゴム","price":80}]';

これを JSON.parse() で配列に戻します。

const productsArray = JSON.parse(jsonProductsString);

console.log('復元された商品配列：', productsArray);

for (const product of productsArray) {
  console.log(`商品名：${product.name}／価格：${product.price}円`);
}

const productsArray = JSON.parse(jsonProductsString);

console.log('復元された商品配列：', productsArray);

for (const product of productsArray) {
  console.log(`商品名：${product.name}／価格：${product.price}円`);
}

• productsArray は「普通のJavaScriptの配列」です。
• その中の各要素はオブジェクトなので、 product.name や product.price にアクセスできます。

セキュリティ・安全性の観点から見るJSON

JSON.parse()は「信頼できるデータ」に対して使う

JSON.parse() は、 「JSON形式の文字列」を前提にしています。

もし、壊れたJSONや意図しない文字列を渡すと、 エラーが発生します。

const badJson = '{id:101,name:"佐藤"}'; // JSONとして不正な形式

// これはエラーになります
const obj = JSON.parse(badJson);

const badJson = '{id:101,name:"佐藤"}'; // JSONとして不正な形式

// これはエラーになります
const obj = JSON.parse(badJson);

• JSONでは、キーは "id" のようにダブルクォーテーションで囲む必要があります。
• 不正な形式の文字列を JSON.parse() すると、例外が投げられます。

try…catchで安全に扱う

外部から受け取ったJSON文字列を扱うときは、 try...catch を使って安全に処理することが多いです。

const maybeJson = '{"id":101,"name":"佐藤花子"}'; // ここでは正しいJSONを想定

let parsed;

try {
  parsed = JSON.parse(maybeJson);
  console.log('JSONのパースに成功しました：', parsed);
} catch (error) {
  console.error('JSONの形式が不正です：', error);
}

const maybeJson = '{"id":101,"name":"佐藤花子"}'; // ここでは正しいJSONを想定

let parsed;

try {
  parsed = JSON.parse(maybeJson);
  console.log('JSONのパースに成功しました：', parsed);
} catch (error) {
  console.error('JSONの形式が不正です：', error);
}

• 「外部から来たデータは壊れているかもしれない」という前提で、 エラー処理を入れておくと安全です。

Day 24 後半 練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、 コンソールで「オブジェクト → JSON → オブジェクト」「配列 → JSON → 配列」の流れと、 localStorage を使った保存・復元のイメージを確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 24 後半：JSON 実践テンプレート</title>
</head>
<body>
  <h1>Day 24 後半：JSON（オブジェクト・配列とJSONの往復）</h1>
  <p>ブラウザのコンソールを開いて、ログを確認してください。</p>

  <script>
    console.log('--- ユーザー情報：オブジェクト → JSON → localStorage保存 ---');

    const user = {
      id: 101,
      name: '佐藤花子',
      age: 30,
      isPremium: false,
    };

    const jsonUser = JSON.stringify(user);
    console.log('JSON文字列：', jsonUser);

    // localStorageに保存
    localStorage.setItem('user', jsonUser);

    console.log('--- localStorageからJSON文字列を取り出してオブジェクトに戻す ---');

    const storedJsonUser = localStorage.getItem('user');
    console.log('保存されているJSON文字列：', storedJsonUser);

    const storedUserObject = JSON.parse(storedJsonUser);
    console.log('復元されたオブジェクト：', storedUserObject);
    console.log('ユーザー名：', storedUserObject.name);
    console.log('プレミアム会員か：', storedUserObject.isPremium);

    console.log('--- 商品一覧：配列 → JSON文字列 ---');

    const products = [
      { id: 1, name: 'ノート',   price: 100 },
      { id: 2, name: 'ペン',     price: 150 },
      { id: 3, name: '消しゴム', price: 80  },
    ];

    const jsonProducts = JSON.stringify(products);
    console.log('商品一覧のJSON文字列：', jsonProducts);

    console.log('--- JSON文字列 → 配列（商品一覧） ---');

    const productsArray = JSON.parse(jsonProducts);
    console.log('復元された商品配列：', productsArray);

    for (const product of productsArray) {
      console.log(`商品名：${product.name}／価格：${product.price}円`);
    }

    console.log('--- 不正なJSONをパースしたときの挙動（try...catch） ---');

    const badJson = '{id:101,name:"佐藤"}'; // 不正なJSON

    try {
      const badObj = JSON.parse(badJson);
      console.log('パース成功（本来はここには来ないはず）：', badObj);
    } catch (error) {
      console.error('JSONの形式が不正です：', error);
    }

    console.log('--- Day 24 後半：JSONの実践が完了しました ---');
  </script>
</body>
</html>

Day 24 後半のまとめ

Day 24後半では、

• JSONが「外の世界（サーバー・ストレージ・他言語）とデータをやり取りするための共通フォーマット」であること
• JSON.stringify() でオブジェクト・配列をJSON文字列に変換し、 保存や送信に使える形にすること
• JSON.parse() でJSON文字列をオブジェクト・配列に戻し、 JavaScriptのコードから扱えるようにすること
• localStorage との組み合わせや、 エラー処理（try...catch）を通して、安全にJSONを扱う感覚

を確認しました。

JSONは、 「JavaScriptの世界」と「外の世界」をつなぐデータの共通言語」 です。

ここで身につけた「オブジェクト ↔ JSON文字列 ↔ オブジェクト」の往復は、 今後のAPI通信・設定管理・データ保存などで、何度も繰り返し使うことになりますので、 ぜひテンプレートを動かしながら、体に馴染ませていってください。