この記事で分かること
- JSONとは何か（データ形式の基本）
JSON.parseの使い方（文字列 → オブジェクト）JSON.stringifyの使い方（オブジェクト → 文字列）- API通信でのJSONの扱い方
- 実務での注意点（
undefined・循環参照など）
JSON は、API 通信で最も広く使われているデータ形式で、JavaScript と非常に相性の良い軽量なテキストデータです。
この記事では、JSON.parse と JSON.stringify の基本から、fetch との組み合わせ、そして実務で注意すべきポイントまで、API 連携に必須の知識を分かりやすく解説します。
JSONとは？
JSON（JavaScript Object Notation） は、
データをやり取りするための軽量なテキスト形式です。
API通信ではほぼ必ず JSON が使われます。
JSONの例
{
"name": "Shin",
"age": 30,
"skills": ["JavaScript", "HTML", "CSS"]
}
JavaScript のオブジェクトに似ていますが、
JSON はあくまで「文字列」 です。
JSON.parse（文字列 → オブジェクト）
API から返ってくる JSON は文字列なので、
JavaScript で扱うには JSON.parse が必要です。
const json = '{"name":"Shin","age":30}';
const obj = JSON.parse(json);
console.log(obj.name); // Shin
JSON.parse を使うと、
文字列が JavaScript のオブジェクトに変換されます。
JSON.stringify（オブジェクト → 文字列）
API にデータを送るときは、
オブジェクトを JSON 文字列に変換する必要があります。
const obj = { name: "Shin", age: 30 };
const json = JSON.stringify(obj);
console.log(json); // {"name":"Shin","age":30}
fetch の POST でよく使われます。
fetch と JSON の組み合わせ（最重要）
① JSON を受け取る
const res = await fetch("/api");
const data = await res.json(); // JSON.parse と同じ
fetch の res.json() は内部で JSON.parse を実行しています。
② JSON を送る
fetch("/api", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Shin" })
});
API通信では JSON.stringify が必須です。
JSONでよくあるエラーと注意点
① JSON.parse でエラーになる
原因は「JSONとして不正な文字列」です。
JSON.parse("{name: Shin}"); // ❌ エラー
JSON のルール：
- キーは必ずダブルクォート
- 文字列もダブルクォート
- 末尾のカンマは禁止
② JSON.stringify できない値がある
undefined- 関数
- Symbol
JSON.stringify({ a: undefined }); // {}
undefined は無視されるため注意が必要です。
③ 循環参照は stringify できない
const obj = {};
obj.self = obj;
JSON.stringify(obj); // ❌ エラー
循環参照は JSON では表現できません。
整形して出力する（インデント付き）
const json = JSON.stringify(obj, null, 2);
console.log(json);
整形された JSON はログ確認に便利です。
JSON に関するよくある質問（FAQ）
JSON と JavaScript のオブジェクトは何が違いますか？
JSON は文字列、オブジェクトは JavaScript のデータ構造です。用途が異なります。
JSON.parse がエラーになる原因は何ですか？
JSON の形式が不正な場合です。キーや文字列は必ずダブルクォートで囲む必要があります。
JSON.stringify できない値はありますか？
undefined、関数、Symbol などは JSON に変換できません。
fetch の res.json() と JSON.parse の違いは？
res.json() は内部で JSON.parse を実行しており、fetch 専用の便利メソッドです。
まとめ
JSON は API 通信の中心となるデータ形式で、
JSON.parse と JSON.stringify は必須スキル です。
JSON.parse→ 文字列 → オブジェクトJSON.stringify→ オブジェクト → 文字列fetchのPOSTで必ず使うundefinedや循環参照は扱えない
非同期処理・API通信を学ぶ上で、
JSON の理解は欠かせません。
