【JavaScript】JSONの取り扱い方法について(基礎的な使い方)

はじめに
Jsonとは
1. 構文
JSON操作
実例
1. APIから取得して表示
まとめ
最後に

はじめに

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

以上、ログになります。
これからも継続していきましょう！！