JSON.parse() の使い方

JSON.parse() は、JSON 形式の文字列を JavaScript のオブジェクトや配列に変換するメソッドです。サーバーから受け取った JSON データを扱う際に必須となります。

基本的な使い方

JSON.parse() に JSON 文字列を渡すと、対応する JavaScript の値が返されます。

const jsonString = '{"name": "田中", "age": 25}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // "田中"
console.log(obj.age);  // 25

配列の JSON 文字列も同様にパースできます。

const jsonArray = '[1, 2, 3, 4, 5]';
const arr = JSON.parse(jsonArray);

console.log(arr[0]); // 1
console.log(arr.length); // 5

JSON.parse() は、オブジェクトや配列だけでなく、プリミティブ値もパースできます。

JSON.parse('"hello"');  // "hello"（文字列）
JSON.parse('123');      // 123（数値）
JSON.parse('true');     // true（真偽値）
JSON.parse('null');     // null

不正な JSON 文字列を渡すと SyntaxError が発生します。実際のアプリケーションでは try-catch で囲むのが一般的です。

try {
  const data = JSON.parse('{ invalid json }');
} catch (e) {
  console.error('JSONのパースに失敗しました:', e.message);
}

JSON のパースが失敗する主な原因を把握しておくと、デバッグがスムーズになります。

シングルクォートの使用

JSON ではダブルクォートのみ有効です。{'name': 'value'} はエラーになります。

末尾のカンマ

配列やオブジェクトの最後の要素の後にカンマがあるとエラーになります。[1, 2, 3,] は不正です。

// エラーになる例
JSON.parse("{'name': 'test'}");  // シングルクォート
JSON.parse('{"items": [1, 2,]}'); // 末尾カンマ
JSON.parse('{name: "test"}');    // キーがクォートなし

正しい JSON 形式を意識することで、パースエラーを防ぐことができます。