はじめに
SEの開発現場では、データのやり取りが欠かせません。その中でも特に登場頻度が高いのが JSON(JavaScript Object Notation) です。Web APIとの通信、バックエンドとの連携など、あらゆる場面で利用される「共通言語」とも言える存在です。
今回は、JSONの使い方についてログとして記載していきたいと思います。
他にも、体系的にJavaScriptを学びたい方には以下の教材がおすすめです:
👉1冊ですべて身につくJavaScript入門講座(Amason)
👉 スラスラわかるJavaScript(Amazon)
Jsonとは
JSONは「JavaScript Object Notation」の略で、軽量かつ人間が読みやすいテキストベースのデータ形式です。プログラミング言語を問わずサポートされているため、Web開発におけるデータ交換の標準的なフォーマットとして広く使われています。
構文
- オブジェクト: {} で囲み、キーと値のペアで構成
- 配列: [] で囲み、順序付きの要素を保持
- 値: 文字列、数値、真偽値、null、オブジェクト、配列
{
"id": 1,
"name": "Mori",
"skills": ["JavaScript", "Node.js"],
"active": true
}
JSON操作
JSON文字列をオブジェクトに変換(JSON.parse)
JSON文字列をJavaScriptで操作するには、まず JSON.parse
を使ってオブジェクトに変換します。
const jsonString = '{"name": "Mori", "age": 25}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // Mori
オブジェクトをJSON文字列に変換(JSON.stringify)
オブジェクトをJSON文字列に変換したい場合は JSON.stringify を使います。
const user = { name: "Mori", age: 25, };
const jsonText = JSON.stringify(user);
console.log(jsonText);
// {"name":"Mori","age":25}
整形して出力する(インデント指定)
JSON.stringify は第2・第3引数で整形が可能です。開発中にログを読みやすくしたいときに便利です。
- 第2引数:リプレイスしたいオブジェクトを設定
- 第3引数:インデントの数
const pretty = JSON.stringify(user, null, 2);
console.log(pretty);
/*
{
"name": "Mori",
"age": 25
}
*/
実例
APIから取得して表示
fetch("https://jsonplaceholder.typicode.com/users/1")
.then(response => response.json())
.then(data => {
console.log(`ユーザー名: ${data.name}, メール: ${data.email}`);
});
まとめ
JSONは「軽量で扱いやすい」だけでなく、JavaScript以外でもほぼ全てのプログラミング言語で共通に使える」万能フォーマットです。
JavaScriptでは JSON.parse と JSON.stringify を軸に、API通信やローカル保存に活用するのが基本です。
実務で頻繁に出会うため、基礎をきちんと理解しておくことが、フロントエンドでもバックエンドでも自身の役に立ちます。
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう!!
コメント