JavaScriptのJSONとデータの扱い

概要

JSONは、データの交換フォーマットとして広く使われています。この章では、JSONの基本構造と、JavaScriptでのJSONの扱い方について学びます。

目次

1. JSONの基本
2. JSONの解析（パース）
3. JSONへの変換（文字列化）
4. JSONを使用したデータの取得
5. JSONとJavaScriptオブジェクト
6. エラー処理

1. JSONの基本

JSONは、データを表現するための軽量なテキストベースのフォーマットです。JSONは二種類の構造を持っています：キーと値のペアの集まり（オブジェクト）、順序付けられた値のリスト（配列）。

{
  "name": "John Doe",
  "age": 30,
  "isStudent": false,
  "skills": ["JavaScript", "HTML", "CSS"],
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  }
}

2. JSONの解析（パース）

JSON.parse()メソッドを使用して、JSON文字列をJavaScriptオブジェクトに変換できます。

const jsonString = '{"name": "John Doe", "age": 30}';
const user = JSON.parse(jsonString);
console.log(user.name); // "John Doe"

3. JSONへの変換（文字列化）

JSON.stringify()メソッドを使用して、JavaScriptオブジェクトをJSON文字列に変換できます。

const userObject = { name: "John Doe", age: 30 };
const userJson = JSON.stringify(userObject);
console.log(userJson); // '{"name":"John Doe","age":30}'

4. JSONを使用したデータの取得

Web APIからJSONデータを取得し、それをJavaScriptオブジェクトに変換することがよく行われます。

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data));

5. JSONとJavaScriptオブジェクト

JavaScriptオブジェクトとJSONの間の変換は一般的ですが、すべてのJavaScriptオブジェクトがJSONに変換できるわけではありません（例：関数、Symbolなど）。

6. エラー処理

JSONの解析や文字列化の際には、無効なJSONや予期しないデータ構造が原因でエラーが発生することがあります。適切なエラー処理を行うことが重要です。

try {
  const user = JSON.parse('{"name": "John Doe", "age": 30');
} catch (error) {
  console.error("JSON解析エラー:", error.message);
}