JavaScript入門：JSONプログラミングを分かりやすく解説
JSON (JavaScript Object Notation) は、軽量なデータ交換フォーマットであり、JavaScriptをはじめ、多くのプログラミング言語で広く利用されています。
このガイドでは、JavaScriptにおけるJSONプログラミングの基本について、分かりやすく解説します。
JSONとは？
JSONは、人間とコンピュータが簡単に読み書きできるテキスト形式のデータフォーマットです。オブジェクト、配列、文字列、数値、真偽値などのデータ構造を表現できます。
JavaScriptとJSONの関係
JSONは、JavaScriptのオブジェクトリテラルの書き方に似ていることから、JavaScriptと密接な関係があります。そのため、JavaScriptでJSONデータを操作することが容易です。
JSONの利点
- 多くのプログラミング言語でサポートされている
- 言語間でデータのやり取りが容易
- 軽量で読み書きしやすい
JSONの例
{
"name": "田中 太郎",
"age": 30,
"address": {
"city": "東京",
"country": "日本"
},
"hobbies": ["読書", "映画鑑賞", "旅行"]
}
この例では、人物に関する情報をJSON形式で表現しています。
JavaScriptでJSONを操作する
JavaScriptには、JSONデータを操作するための組み込みオブジェクトが用意されています。
- JSON.stringify(): JavaScriptオブジェクトをJSON文字列に変換します。
- JSON.parse(): JSON文字列をJavaScriptオブジェクトに変換します。
例：JSON文字列をJavaScriptオブジェクトに変換
const jsonString = '{ "name": "田中 太郎", "age": 30 }';
const person = JSON.parse(jsonString);
console.log(person.name); // 田中 太郎
console.log(person.age); // 30
例：JavaScriptオブジェクトをJSON文字列に変換
const person = { name: "田中 太郎", age: 30 };
const jsonString = JSON.stringify(person);
console.log(jsonString); // {"name":"田中 太郎","age":30}
JSONの活用例
- ローカルストレージへのデータ保存
- ブラウザとサーバー間のデータやり取り
- Webサーバー間でのデータ通信
JSONは、JavaScriptでデータのやり取りや保存を行う際に非常に便利なフォーマットです。このガイドで学んだ知識を活かして、ぜひJSONプログラミングを活用してみてください。
- JSONは、JavaScript以外にも多くのプログラミング言語で利用できます。他の言語でのJSONプログラミングについても調べてみるのも良いでしょう。
- このガイドでは、JSONの基本的な操作について説明しました。より高度な操作については、さらに詳しく調べてみてください。
JSON文字列をJavaScriptオブジェクトに変換
const jsonString = '{ "name": "田中 太郎", "age": 30 }';
const person = JSON.parse(jsonString);
console.log(person.name); // 田中 太郎
console.log(person.age); // 30
JavaScriptオブジェクトをJSON文字列に変換
const person = { name: "田中 太郎", age: 30 };
const jsonString = JSON.stringify(person);
console.log(jsonString); // {"name":"田中 太郎","age":30}
JSONデータをAjaxで取得する
const url = 'https://jsonplaceholder.typicode.com/todos/1';
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
JSONデータをローカルストレージに保存
const person = { name: "田中 太郎", age: 30 };
localStorage.setItem('user', JSON.stringify(person));
const storedPerson = JSON.parse(localStorage.getItem('user'));
console.log(storedPerson.name); // 田中 太郎
console.log(storedPerson.age); // 30
const jsonString = '{ "name": "田中 太郎", "age": 30, "hobbies": ["読書", "映画鑑賞", "旅行"] }';
const person = JSON.parse(jsonString);
person.address = { city: "東京", country: "日本" };
person.hobbies.push("音楽鑑賞");
const newJsonString = JSON.stringify(person);
console.log(newJsonString);
// {"name":"田中 太郎","age":30,"address":{"city":"東京","country":"日本"},"hobbies":["読書","映画鑑賞","旅行","音楽鑑賞"]}
- JSONに関する情報は、インターネット上にも豊富に公開されています。分からないことがあれば、積極的に調べてみてください。
以下に、JSONの代替となる主なフォーマットとその特徴を紹介します。
XML (Extensible Markup Language)
- 多くのプログラミング言語とライブラリでサポートされている
- 複雑なデータ構造を表現できる
- 構造化されたデータ表現に適している
例
<person>
<name>田中 太郎</name>
<age>30</age>
<address>
<city>東京</city>
<country>日本</country>
</address>
<hobbies>
<hobby>読書</hobby>
<hobby>映画鑑賞</hobby>
<hobby>旅行</hobby>
</hobbies>
</person>
YAML (YAML Ain't Markup Language)
- シンプルで書きやすい
- 構成ファイルや設定ファイルによく利用される
- 人間とコンピュータが読みやすいフォーマット
例
name: 田中 太郎
age: 30
address:
city: 東京
country: 日本
hobbies:
- 読書
- 映画鑑賞
- 旅行
BSON (Binary JSON)
- MongoDBなどのNoSQLデータベースでよく利用される
- データ転送時の効率化に優れている
- JSONのバイナリ表現
MessagePack
- Apache CassandraなどのNoSQLデータベースでよく利用される
- BSONよりも高速でコンパクトなデータ表現が可能
- BSONと同様に、JSONのバイナリ表現
S-Expressions
- 再帰的なデータ構造を表現するのに適している
- Lispなどのプログラミング言語でよく利用されるデータ構造
例
(name "田中 太郎")
(age 30)
(address (city "東京") (country "日本"))
(hobbies "読書" "映画鑑賞" "旅行")
- 互換性
- 処理速度
- データの利用目的
- データの種類と構造