JSON.parse
中級読み方：ジェイソンパース｜英語：Json Parse
JSON文字列をJavaScriptのオブジェクトに変換するメソッドだよ。いつ使う？ APIから受け取ったJSON文字列をJSで扱えるオブジェクトにしたい、localStorageから読み出したデータを復元したいときに使うよ。間違いやすいポイント: 不正なJSON文字列を渡すとSyntaxErrorが出るよ。try-catchで囲むのが安全。JSONのキーはダブルクォート必須で、末尾カンマはNGだよ。
やさしい説明
JSON.parseは、JSON形式の文字列をJavaScriptのオブジェクトに変換する関数です。逆に、JSON.stringifyはオブジェクトをJSON文字列に変換します。
APIから受け取ったデータは「文字列」として届きます。それをJavaScriptで使えるオブジェクトに変換するのがJSON.parseの役割です。
localStorageに保存したデータを読み出すときにも使います（localStorageは文字列しか保存できないため）。
具体例・使い方
// JSON文字列 → オブジェクト
const text = '{"name":"太郎","age":15}';
const user = JSON.parse(text);
user.name; // "太郎"
// オブジェクト → JSON文字列
const json = JSON.stringify({ score: 100 });
// '{"score":100}'
// localStorageとの組み合わせ
localStorage.setItem("user", JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem("user"));いつ使う？
APIのレスポンスを処理するとき、localStorageにオブジェクトを保存/読み出すとき、設定ファイル（JSON）を読み込むときに使います。
間違いやすいポイント
❌ 不正なJSON文字列をparseするとエラーになる
// ❌ シングルクォートはJSONでは使えない
JSON.parse("{'name':'太郎'}"); // エラー！
// ✅ ダブルクォートを使う
JSON.parse('{"name":"太郎"}'); // OK
// 安全にパースするならtry-catchで囲むよくある疑問
Q: JSON.stringifyとの違いは？
A: JSON.parseは文字列→オブジェクト、JSON.stringifyはオブジェクト→文字列です。保存時にstringify、読み出し時にparseを使います。
Q: JSONの形式ルールは？
A: キーはダブルクォート必須、末尾カンマNG、シングルクォートNG、コメントNG。{"name": "太郎"} が正しい形式です。
Q: parseでエラーが出たら？
A: try { JSON.parse(str) } catch(e) { } で囲みましょう。エラーの原因はJSON文字列の形式不正が多いです。
関連用語
📖 関連レッスン
レッスンを見る →