JavaScriptのJSONとは？データのやり取りの基本をわかりやすく解説

導入

JavaScriptを学んでいると「JSON」という言葉をよく見かけませんか？

JSON（ジェイソン）とは、データを文字列で表すための書き方のルールです。正式名称は「JavaScript Object Notation」です。

JSONはプログラム同士がデータをやり取りするときの「共通語」です。たとえば、天気予報のデータをWebサイトに表示するとき、サーバーからJSON形式でデータが届きます。

この記事では、JSONの書き方ルールと、JavaScriptでの使い方を解説します。

JavaScript入門の基礎知識があれば、すぐに理解できます。

JSONの書き方ルール

JSONの例

{
  "name": "太郎",
  "age": 16,
  "hobbies": ["プログラミング", "ゲーム", "読書"],
  "isStudent": true
}

見た目はJavaScriptのオブジェクトに似ていますが、いくつかルールが違います。

ルール1：キーは必ずダブルクォーテーションで囲む

// ✅ 正しいJSON
{ "name": "太郎" }

// ❌ 間違い（シングルクォートはNG）
{ 'name': '太郎' }

// ❌ 間違い（クォートなしはNG）
{ name: "太郎" }

JavaScriptのオブジェクトではクォートなしでもOKですが、JSONでは必ずダブルクォーテーションが必要です。

ルール2：使えるデータ型は6種類

• 文字列："こんにちは"
• 数値：42, 3.14
• 真偽値：true, false
• null：null
• 配列：[1, 2, 3]
• オブジェクト：{"key": "value"}

使えないもの：関数、undefined、コメント

ルール3：末尾のカンマは禁止

// ❌ 間違い（最後のカンマがNG）
{
  "name": "太郎",
  "age": 16,
}

JavaScriptでは末尾カンマが許されますが、JSONでは構文エラーになります。

JavaScriptのオブジェクトとの違いを意識しておきましょう。

JSON.stringify()：オブジェクト → 文字列

JavaScriptのオブジェクトをJSON文字列に変換するには、JSON.stringify()を使います。

const user = {
  name: "太郎",
  age: 16,
  hobbies: ["プログラミング", "ゲーム"]
};

// オブジェクト → JSON文字列
const jsonString = JSON.stringify(user);
console.log(jsonString);
// '{"name":"太郎","age":16,"hobbies":["プログラミング","ゲーム"]}'

いつ使うか

• localStorageにデータを保存するとき
• サーバーにデータを送信するとき

localStorageの使い方では、JSON.stringifyを使ってオブジェクトを保存する方法を解説しています。

見やすく整形する

第3引数にスペース数を指定すると、改行とインデントがつきます。デバッグのときに便利です。

const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
// {
//   "name": "太郎",
//   "age": 16,
//   "hobbies": [
//     "プログラミング",
//     "ゲーム"
//   ]
// }

JSON.parse()：文字列 → オブジェクト

JSON文字列をJavaScriptのオブジェクトに変換するには、JSON.parse()を使います。

const jsonString = '{"name":"太郎","age":16}';

// JSON文字列 → オブジェクト
const user = JSON.parse(jsonString);
console.log(user.name); // "太郎"
console.log(user.age);  // 16

いつ使うか

• localStorageからデータを読み込むとき
• サーバーから受け取ったJSONデータを使うとき

変換の流れまとめ

オブジェクト → JSON.stringify() → JSON文字列 → JSON.parse() → オブジェクト

この2つはセットで覚えましょう。「stringify = 文字列にする」「parse = 解析して戻す」です。

実践：APIからのレスポンスを読む

API（エーピーアイ）とは、プログラム同士がデータをやり取りする仕組みです。天気予報APIにリクエストを送ると、天気データがJSON形式で返ってきます。

レスポンスの例

{
  "city": "東京",
  "temperature": 25,
  "weather": "晴れ",
  "humidity": 60,
  "forecast": [
    { "day": "明日", "weather": "曇り", "temperature": 22 },
    { "day": "明後日", "weather": "雨", "temperature": 18 }
  ]
}

JavaScriptで使う

// APIからJSONデータを受け取った想定
const responseText = '{"city":"東京","temperature":25,"weather":"晴れ"}';

// JSON文字列をオブジェクトに変換
const data = JSON.parse(responseText);

// データを使う
console.log(data.city);        // "東京"
console.log(data.temperature); // 25
console.log(data.weather);     // "晴れ"

JavaScriptの配列を学んでおくと、forecastのような配列データも扱えるようになります。

よくあるエラーと対処法

エラー1：Unexpected token（シングルクォート）

JSONのキーと文字列はダブルクォーテーションで囲む必要があります。シングルクォートを使うとエラーになります。

エラー2：Unexpected end of JSON input

空文字列をパースしようとすると発生します。パースする前に文字列が空でないか確認しましょう。

const saved = localStorage.getItem("data");
if (saved !== null) {
  const data = JSON.parse(saved);
}

エラー3：末尾カンマ

最後の要素の後にカンマをつけるとエラーになります。JSONでは末尾カンマは禁止です。

プログラミングで使う英語の読み方で、エラーメッセージの読み方を学べます。

JSONとオブジェクトの違いまとめ

• キーのクォート：オブジェクトはなくてもOK、JSONは必須（ダブルのみ）
• 末尾カンマ：オブジェクトはOK、JSONはNG
• 関数：オブジェクトは入れられる、JSONは入れられない
• undefined：オブジェクトは使える、JSONは使えない
• 用途：オブジェクトはプログラム内で使う、JSONはデータの受け渡し

まとめ

JSONはWeb開発で毎日使う基本知識です。この記事の内容を覚えておけば、困ることはありません。

API連携とエラー対処

fetch + JSON：fetchでAPIからJSONデータを取得し、JavaScriptのオブジェクトとして使えます。天気API、ポケモンAPIなど無料で使えるAPIで練習しましょう。

よくあるエラー：JSON.parse("undefined") はSyntaxErrorになります。parseする前に値が存在するか確認しましょう。localStorageから読み込むときに特に注意が必要です。