JavaScript入門 #17 - JSONの基本

入門 | 10分 で読める | 2026.06.14

公式ドキュメント
実演JavaScriptJSON

このシリーズについて

「JavaScript入門」第17回です。今回は、Web APIや保存処理でよく使うJSONを学びます。

JSONとは

JSONは、データを文字列として表すための形式です。JavaScriptのオブジェクトに似ていますが、完全に同じではありません。

{
  "name": "Taro",
  "age": 18
}

JSONはデータ交換用の文字列形式であり、JavaScriptオブジェクトそのものではありません。

Step 1: JavaScriptオブジェクトを用意する

まずは通常のオブジェクトを作ります。

const user = {
  name: "Taro",
  age: 18,
  isStudent: true
};

console.log(user);

これはJavaScriptのオブジェクトです。

Step 2: JSON.stringifyで文字列にする

オブジェクトをJSON文字列に変換します。

const user = {
  name: "Taro",
  age: 18,
  isStudent: true
};

const jsonText = JSON.stringify(user);

console.log(jsonText);
console.log(typeof jsonText);

typeof jsonText は string になります。

Step 3: JSON.parseでオブジェクトに戻す

JSON文字列をJavaScriptオブジェクトに戻します。

const jsonText = '{"name":"Taro","age":18}';
const user = JSON.parse(jsonText);

console.log(user.name);
console.log(user.age);

APIレスポンスやlocalStorageから取り出した文字列を扱う時に使います。

Step 4: JSONの書き方の制約を知る

JSONでは、キー名をダブルクォートで囲みます。末尾カンマは使えません。

{
  "name": "Taro",
  "age": 18
}

次はJSONとしては不正です。

{
  name: "Taro",
  age: 18,
}

これはJavaScriptのオブジェクト風ですが、JSON文字列としては正しくありません。

Step 5: 配列もJSONにできる

オブジェクトの配列もJSONに変換できます。

const users = [
  { name: "Taro", age: 18 },
  { name: "Yuki", age: 20 }
];

const jsonText = JSON.stringify(users);
const parsedUsers = JSON.parse(jsonText);

console.log(parsedUsers[0].name);

よくあるエラー

エラーよくある原因確認する場所
Unexpected tokenJSONの書式が壊れているダブルクォート、末尾カンマ
値が文字列のままJSON.parse していないtypeof
関数が消えるJSONはデータだけを扱う保存する値

注意: JSONには関数や undefined をそのまま保存できません。保存するのは、文字列、数値、真偽値、null、配列、オブジェクトなどのデータです。

次のステップ

JavaScript入門 #18 - localStorage で、ブラウザにデータを保存します。

まとめ

JSONは、データを文字列として交換・保存するための形式です。JavaScriptオブジェクトをJSON文字列にするには JSON.stringify、JSON文字列をオブジェクトに戻すには JSON.parse を使います。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR