JavaScript - JSON: 基礎ガイド

こんにちは、未来のプログラミング魔術師たち！今日は、JSONの世界に興味深い旅に出発します。JSONという言葉を聞いたことがない方も、このチュートリアルが終わるまでにはプロのようにJSONを扱えるようになるので、心配しないでください。お気に入りの飲み物を手に取り、リラックスして、一緒に深く掘り下げてみましょう！

JavaScript - JSON

JSONとは？

JSONは、JavaScript Object Notationの略で、軽量なデータ交換形式です。これは少し難しそうに聞こえるかもしれませんが、コンピュータがお互いに話し合い、機械と人間の両方にとって理解しやすい方法で情報を共有する方法として考えайтеください。

クラスでメモを交换する（もちろん、それを推奨はしませんが！）ことを思い浮かべてください。JSONは、そのメモを標準化して書く方法で、誰が読んでもメッセージを迅速かつ簡単に理解できるようにするものです。

JSONの特徴

本質的な部分に入る前に、JSONが特別な理由を探ってみましょう：

軽量で読みやすい
言語独立（JavaScriptだけでなく！）
オブジェクトと配列という2つの普遍的な構造に基づいている

これらの特徴により、JSONはデータの保存と転送に最適であり、ウェブアプリケーションで広く使用されています。

JSONの構文

では、JSONの基本構文を見てみましょう。初めて見ると少し奇妙に見えるかもしれませんが、ステップバイステップで分解します。

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

これはシンプルなJSONオブジェクトです。以下に分解します：

全オブジェクトはカッコ {} で囲まれています。
中にはキーと値のペアがあります。
キーは常に文字列で、二重引用符で囲まれています。
値は文字列、数値、ブール値、配列、オブジェクト、nullのいずれかです。
キーと値のペアはコンマで区切られています。

JSONデータ

JSONはさまざまなデータ型を表現できます。いくつかの例を見てみましょう：

文字列

{"message": "Hello, World!"}

数値

{"age": 30}

ブール値

{"isStudent": true}

null

{"spouse": null}

JSONは、データを理解しやすく、使いやすい方法で表現することについて考えてください。各情報の詳細なプロフィールを作成していると考えてください。

JSONオブジェクト

すでにシンプルなJSONオブジェクトを見てきましたが、もう少し深く掘り下げてみましょう。JSONオブジェクトは、複数のキーと値のペアを含むことができ、甚至オブジェクトをネストすることもできます。

{
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
}

この例では、メインオブジェクトに「person」というキーがあります。その値は、さまざまな情報を含む別のオブジェクトです。オブジェクトをネストし、甚至配列を含めることができることに注意してください。

JSON配列

JSONの配列は、値の順序付きリストで、角括弧 [] で囲まれています。配列には、JSONデータの任意の型を含めることができます。

{
"fruits": ["apple", "banana", "cherry"],
"numbers": [1, 2, 3, 4, 5],
"mix": [42, "answer", true, null]
}

配列は、関連するアイテムのコレクションを表現するのに非常に便利です。例えば、レシピの材料リストや、ゲームのハイスコアリストなどです。

JSONデータのアクセス

JSONデータの構造を理解したので、JavaScriptでそれにアクセスする方法を学びましょう。前述の「person」オブジェクトを使って説明します。

let data = {
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
};

console.log(data.person.name); // 出力: Alice
console.log(data.person.hobbies[1]); // 出力: cycling
console.log(data.person.address.city); // 出力: Wonderland

như bạn thấy，私たちはオブジェクトのプロパティにアクセスするためにドット記法を使用し、配列要素にアクセスするために角括弧を使用します。まるで詳細な地図を使って情報を見つけるようなものです！

JSONメソッド

JavaScriptには、JSONを扱うための2つの主要なメソッドがあります：

メソッド	説明
JSON.parse()	JSON文字列をJavaScriptオブジェクトに変換
JSON.stringify()	JavaScriptオブジェクトをJSON文字列に変換

これらのメソッドの動作を見てみましょう：

// JSON.parse()
let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // 出力: John

// JSON.stringify()
let person = {name: "Alice", age: 25};
let json = JSON.stringify(person);
console.log(json); // 出力: {"name":"Alice","age":25}

これらのメソッドは、JavaScriptとJSONが効果的に通信するための翻訳者のようなものです。

JSONとJavaScriptオブジェクトの違い

JSONはJavaScriptオブジェクトに非常に似ていますが、いくつかの重要な違いがあります：

JSONのキーは文字列であり、二重引用符で囲まれています。
JSONの値は以下のいずれかの型である必要があります：文字列、数値、オブジェクト、配列、ブール値、null。
JSONは関数やコメントをサポートしていません。

以下に簡単な比較を示します：

// 有効なJavaScriptオブジェクト
let jsObj = {
name: 'John',
age: 30,
greet: function() { console.log('Hello!'); }
};

// 等価なJSON
let jsonObj = {
"name": "John",
"age": 30
};

JSONバージョンには、関数と未引用のキーが含まれていないことに注意してください。

JSON文字列をJavaScriptオブジェクトに変換

すでにJSON.parse()を使用してJSON文字列をJavaScriptオブジェクトに変換する方法を見てきましたが、もう少し複雑な例を見てみましょう：

let jsonString = '{"name":"Alice","pets":[{"type":"cat","name":"Fluffy"},{"type":"dog","name":"Rover"}]}';

let obj = JSON.parse(jsonString);

console.log(obj.name); // 出力: Alice
console.log(obj.pets[0].name); // 出力: Fluffy

これは、サーバーからデータを受信する際に特に便利です。

JavaScriptオブジェクトをJSONに変換

同様に、JSON.stringify()を使用してJavaScriptオブジェクトをJSON文字列に変換することもできます。これはデータをサーバーに送信する際にしばしば必要です。

let person = {
name: "Bob",
age: 35,
hobbies: ["swimming", "painting"],
address: {
street: "456 Elm St",
city: "Dreamland"
}
};

let jsonString = JSON.stringify(person);
console.log(jsonString);
// 出力: {"name":"Bob","age":35,"hobbies":["swimming","painting"],"address":{"street":"456 Elm St","city":"Dreamland"}}

そして、ここまででJSONの基礎ガイドが完了しました！練習が完璧を生むことを忘れないでください。JSONデータの作成と操作を試してみてください。間もなく、プロのようにJSONを扱えるようになるでしょう！

Credits: Image by storyset