JavaScript JSON

JavaScript 中的 JSON：理解与应用

この記事では、JavaScript オブジェクト記法（JSON）とその Web 開発における応用について詳しく解説します。JSON データの解析と生成、ネストされた構造の処理、JavaScript での JSON のベストプラクティスについて学びます。

---

1. はじめに (Introduction)

什么是 JSON?

軽量なデータ交換フォーマット
JavaScript のオブジェクト構文を基にしている
人間が理解しやすく、機械が解析しやすい
プログラミング言語に依存せず、Web で広く使用されている

JSON の用途

Web API でのデータ転送
設定ファイルの保存
JavaScript オブジェクトのシリアライズ

2. JSON 構文 (JSON Syntax)

データ型

文字列 (Strings): "Hello World"
数値 (Numbers): 10, 2.5, -100
真偽値 (Booleans): true, false
配列 (Arrays): [1, "two", true]
オブジェクト (Objects): {"name": "John", "age": 30}
null 値 (Null): null

構文規則

データはキーと値のペアで表現される
キーと値の間にはコロン (:) を使用する
キーと値のペアの間にはカンマ (,) を使用する
オブジェクトは中括弧 {} で囲む
配列は角括弧 [] で囲む

3. JavaScript 中の JSON オブジェクト (JSON Object in JavaScript)

JSON.parse()

JSON 文字列を JavaScript オブジェクトに変換する
解析エラーの処理


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

JSON.stringify()

JavaScript オブジェクトを JSON 文字列に変換する
フォーマット出力オプション


const jsonObject = { name: "John", age: 30 };
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // "{\"name\":\"John\",\"age\":30}"

4. JSON の操作 (Working with JSON)

JSON データへのアクセス

ドット記法 (object.property)
ブラケット記法 (object["property"])


const jsonObject = { name: "John", age: 30 };
console.log(jsonObject.name); // "John"
console.log(jsonObject["age"]); // 30

JSON オブジェクトと配列の反復処理

for ループ
for...in ループ


const jsonObject = { name: "John", age: 30, city: "New York" };

for (const key in jsonObject) {
  console.log(key + ": " + jsonObject[key]);
}

JSON データの変更

プロパティの追加、変更、削除


const jsonObject = { name: "John", age: 30 };

jsonObject.city = "New York"; // プロパティの追加
jsonObject.age = 35; // プロパティの変更
delete jsonObject.city; // プロパティの削除

ネストされた JSON 構造

複数階層にネストされたデータへのアクセスと処理


const jsonObject = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "New York",
    zip: "10001"
  }
};

console.log(jsonObject.address.city); // "New York"

5. JSON ベストプラクティス (JSON Best Practices)

データ型の一貫性
関数や日付オブジェクトの使用を避ける
エラー処理
コードの可読性とフォーマット

6. まとめ (Conclusion)

この記事では、JSON の定義と用途、Web 開発における重要性を振り返りました。JSON は、Web 開発者にとって不可欠なデータ形式です。

---

キーワード (Keywords)

JavaScript, JSON, データ交換フォーマット, API, JSON.parse(), JSON.stringify(), オブジェクト, 配列, ネストされたデータ, データシリアライズ

対象読者 (Target Audience)

JSON の使用方法を学びたい JavaScript 初心者
JSON への理解を深めたい Web 開発者
プロジェクトで JSON を使用してデータを処理する必要があるプログラマー

参考文献

MDN Web Docs: JSON

Q&A

Q1: JSON とは？

A1: JSON（JavaScript Object Notation）は、軽量なデータ交換フォーマットです。人間が理解しやすく、機械が解析しやすいように設計されています。Web API でのデータ転送、設定ファイルの保存、JavaScript オブジェクトのシリアライズなど、さまざまな用途で使用されています。

Q2: JSON.parse() と JSON.stringify() の違いは？

A2: JSON.parse() は、JSON 文字列を JavaScript オブジェクトに変換するために使用します。一方、JSON.stringify() は、JavaScript オブジェクトを JSON 文字列に変換するために使用します。

Q3: ネストされた JSON データにアクセスするにはどうすればよいですか？

A3: ネストされた JSON データにアクセスするには、ドット記法またはブラケット記法を使用します。たとえば、オブジェクト person にネストされたオブジェクト address があり、その中にプロパティ city がある場合、person.address.city または person['address']['city'] を使用してアクセスできます。

JavaScript 中的 JSON： 理解与应用