JSON.parse
中級読み方：ジェイソンパース｜英語：JSON.parse
JSON文字列をJavaScriptのオブジェクトに変換するメソッドだよ。
やさしい説明
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; // "太郎"
user.age; // 15（数値として取り出せる）
// オブジェクト → JSON文字列
const json = JSON.stringify({ score: 100 });
// '{"score":100}'
// JSON.stringify の第3引数でインデント整形
const pretty = JSON.stringify({ name: "太郎", age: 15 }, null, 2);
/* '{
"name": "太郎",
"age": 15
}' */
// localStorageとの組み合わせ
localStorage.setItem("user", JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem("user"));
saved.name; // "太郎"fetch でAPIを呼ぶときは res.json() が内部で自動的に JSON.parse を行ってくれます。直接 JSON.parse を書くのは主に localStorage や WebSocket などで文字列データを受け取るときです。
JSONの書き方ルール
- キーと文字列の値は必ずダブルクォートで囲む（シングルクォート不可）
- 末尾のカンマ（trailing comma）は使えない
- 値に使える型：文字列・数値・真偽値・null・配列・オブジェクト
undefined・関数・Symbolは JSON に変換できない（stringifyで除外される）- コメント（
// ...）は書けない
JSONはJavaScriptのオブジェクトリテラルに似ていますが、別のフォーマットです。バリデーションは JSONLint などのオンラインツールで確認できます。
いつ使う？
- APIのレスポンスを処理するとき（
fetch以外のライブラリ経由の場合） - localStorageにオブジェクトを保存・読み出しするとき
- WebSocketで受信した文字列データをオブジェクトに変換するとき
- 設定ファイル（JSON）の内容をオブジェクトとして扱うとき
- オブジェクトのディープコピー（簡易的に
JSON.parse(JSON.stringify(obj))）
間違いやすいポイント
❌ 不正なJSON文字列をparseするとエラーになる
シングルクォートや末尾カンマなど、JSONの書式に違反した文字列を渡すと SyntaxError が発生します。必ず try-catch で囲みましょう。
// ❌ シングルクォートはJSONでは使えない
JSON.parse("{'name':'太郎'}"); // SyntaxError!
// ✅ ダブルクォートを使う
JSON.parse('{"name":"太郎"}'); // OK
// ✅ try-catchで安全にパース
try {
const data = JSON.parse(maybeInvalidString);
console.log(data);
} catch (e) {
console.error("JSONパースに失敗:", e.message);
}❌ localStorage.getItem() は null を返すことがある
キーが存在しない場合 null が返るため、JSON.parse(null) は null になります。|| "" などでフォールバックを用意しましょう。
よくある疑問
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文字列の形式不正が多いです。
関連用語
📖 関連レッスン
レッスンを見る →