パースとストリングファイ

🔁 想起学習

JSON形式だとJS側としてはただの文字列。なので parse() を通してオブジェクト化して扱えるようにする。

その逆で、JSオブジェクトのままだと通信・保存などで文字列に変換されてないから、stringify() で文字列化することで扱えるようになる。

📦 補足図

📤 通信（送信）
JSオブジェクト  →  JSON.stringify() →  JSON形式の文字列（サーバーへ）

📥 通信（受信）
JSON文字列  →  JSON.parse()  →  JSオブジェクト（.name とか使える）

🧪 APIでの実例

// POST送信時（文字列にして送る）
await fetch("/api/todo", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "買い物", completed: false }) // ← これ
});

// 受信時（オブジェクトに変換して使う）
const res = await fetch("/api/todo");
const data = await res.json(); // ← JSON.parse()と同義
console.log(data.title); // ✅

🧠 一言でまとめると

stringify ＝ 外に出すとき、parse ＝ 中に入れるとき

→ JSとJSONの間を“通訳してくれる”存在！

🧠 JSON.parse() に似た概念まとめ

🔍 背景

JavaScriptで使う JSON.parse() と JSON.stringify() は、実は コンピュータの基本的な構文処理やデータ変換の概念に深く関係している。似た概念を整理して理解を深める。

✅ 基本理解

  • JSON.parse() = 文字列（JSON形式）をオブジェクトに変換する
  • JSON.stringify() = オブジェクトをJSON文字列に変換する

🧭 関連する概念一覧

概念名 やっていること JSONとのつながり よく使われる場面
構文解析（Parsing） テキストを「意味のある構造」に解釈する JSON.parse() = JSONの構文を解析してオブジェクトに変換 コンパイラ、JSON、HTML、Markdown、JSX など
デシリアライズ 文字列 → オブジェクトへの変換 JSON.parse() がこれに該当 APIレスポンス処理、ストレージからの復元
シリアライズ オブジェクト → 文字列へ変換 JSON.stringify() がこれに該当 API送信、保存、キャッシュ
インタプリタ ソースコードを1行ずつ解釈して実行 JSエンジン（V8など）と同じ流れ JavaScript, Python など
コンパイラ ソースコードを機械語や他の言語に変換 構文解析 + 最適化などを含む TypeScript → JavaScript など
テンプレートエンジン 変数＋構文 → HTML等を出力 JSXやEJS, Handlebars などと似ている Webフロントエンド開発で多用

🧠 JSON処理フロー図

📥 外部からの入力（API, ファイル）
"{"id":1,"name":"Toke"}" ← ただの文字列

↓ JSON.parse()（構文解析 + デシリアライズ）

{ id: 1, name: "Toke" } ← 実際に使えるオブジェクト

📤 外部へ送信（API, 保存）
{ id: 1, name: "Toke" } ← JSオブジェクト

↓ JSON.stringify()（シリアライズ）

"{"id":1,"name":"Toke"}" ← 文字列化されたデータ

💬 覚え方（キーワード）

  • parse：読み取って、構造に変換する（読む）
  • stringify：構造を文字列に変換する（書く）
  • serialize / deserialize：保存や送信に適した形式に変換する（/戻す）

🧠 共通する変換ステップ

  1. 文字列を受け取る
  2. 構文を解釈する（パース）
  3. 構造化された形に変換する（オブジェクト、ツリーなど）
  4. それを実行・利用・表示する

💡 結論

Webの世界では「文字列 ←→ オブジェクト」間の変換が至るところで行われている。

JSON.parse() はその最も基本的かつ重要な形であり、構文解析やインタプリタの入門的な位置づけと考えられる。

ブログ一覧に戻る