JavaScriptにおけるJSON文字列の変換

JavaScriptでは、JSON（JavaScript Object Notation）は、データ交換や保存のために広く使用されるフォーマットです。このページでは、JSON文字列を操作する方法について詳しく解説し、豊富な例を通じてその使用方法を学びます。

JSONとは

JSONは軽量で可読性の高いデータフォーマットであり、主にオブジェクトと配列を簡潔に表現します。以下はJSONの基本的な構造です。

{
    "name": "Taro",
    "age": 25,
    "isStudent": true,
    "skills": ["JavaScript", "HTML", "CSS"]
}

JSONは文字列として保存されるため、JavaScriptで使用するにはオブジェクト形式との変換が必要です。

JSON.parseを使った文字列からオブジェクトへの変換

JSON.parse()はJSON文字列をJavaScriptのオブジェクトや配列に変換するためのメソッドです。例を見てみましょう。

基本的な使い方

const jsonString = '{"name": "Taro", "age": 25, "isStudent": true}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "Taro"
console.log(obj.age); // 25
console.log(obj.isStudent); // true

配列の変換

const jsonArrayString = '["JavaScript", "HTML", "CSS"]';
const arr = JSON.parse(jsonArrayString);
console.log(arr[0]); // "JavaScript"
console.log(arr.length); // 3

エラー処理

無効なJSON文字列を変換しようとするとエラーが発生します。

try {
    const invalidJson = '{"name": "Taro", "age": 25,';
    JSON.parse(invalidJson); // SyntaxError
} catch (e) {
    console.error("JSON変換エラー:", e.message);
}

JSON.stringifyを使ったオブジェクトから文字列への変換

JSON.stringify()はJavaScriptのオブジェクトや配列をJSON文字列に変換するメソッドです。これを使用すると、データをファイルやAPIに送信する際に便利です。

基本的な使い方

const obj = { name: "Taro", age: 25, isStudent: true };
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// '{"name":"Taro","age":25,"isStudent":true}'

配列の変換

const arr = ["JavaScript", "HTML", "CSS"];
const jsonArrayString = JSON.stringify(arr);
console.log(jsonArrayString);
// '["JavaScript","HTML","CSS"]'

フォーマットオプション

JSON.stringifyはフォーマットを制御するオプションを提供します。

const obj = { name: "Taro", age: 25, isStudent: true };
const formattedJson = JSON.stringify(obj, null, 2);
console.log(formattedJson);
// {
//   "name": "Taro",
//   "age": 25,
//   "isStudent": true
// }

特定のプロパティだけを出力

const obj = { name: "Taro", age: 25, isStudent: true };
const selectedProperties = JSON.stringify(obj, ["name", "age"]);
console.log(selectedProperties);
// '{"name":"Taro","age":25}'

JSON文字列の変換の一般的な用途

APIとのデータ通信

APIリクエストやレスポンスでJSONを使用します。

// データ送信例
const data = { name: "Taro", age: 25 };
fetch("https://example.com/api", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
});

// データ受信例
fetch("https://example.com/api")
    .then((response) => response.json())
    .then((data) => console.log(data));

ローカルストレージでの使用

ブラウザのローカルストレージにデータを保存する際にもJSONを活用します。

// 保存
const user = { name: "Taro", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

// 取得
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // "Taro"

JSON.parseとJSON.stringifyの高度な使い方

リバイバ関数を使用したカスタム変換

const jsonString = '{"date": "2025-01-18T12:00:00Z"}';
const obj = JSON.parse(jsonString, (key, value) => {
    if (key === "date") {
        return new Date(value);
    }
    return value;
});
console.log(obj.date instanceof Date); // true

置換関数を使用したカスタム出力

const obj = { name: "Taro", age: 25, password: "secret" };
const jsonString = JSON.stringify(obj, (key, value) => {
    if (key === "password") {
        return undefined; // パスワードは出力しない
    }
    return value;
});
console.log(jsonString);
// '{"name":"Taro","age":25}'

まとめ

JavaScriptでJSON文字列を操作する方法を理解することで、API通信やデータ保存など、さまざまな場面で効率的に作業できます。JSON.parseとJSON.stringifyを適切に使い分けて、データ操作を効果的に行いましょう。