JavaScriptでJSONデータを扱う際によく使用される`JSON.parse()`メソッド。このメソッドを使用する際に発生する一般的なエラーと、その解決方法について詳しく解説します。

JSON.parse()とは

`JSON.parse()`は、JSON形式の文字列をJavaScriptのオブジェクトに変換するメソッドです。APIからのレスポンスデータの処理や、ローカルストレージのデータ取得時によく使用されます。

const jsonString = '{"name": "John", "age": 30}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // "John"

主なエラーと解決方法

1. SyntaxError: Unexpected token in JSON

最も一般的なエラーの一つです。JSON文字列の構文が正しくない場合に発生します。

// エラーの例
JSON.parse('{"name": "John", age: 30}'); // エラー：クォーテーションが不足

// 正しい書き方
JSON.parse('{"name": "John", "age": 30}'); // OK

2. 単一引用符の使用

JSONでは必ずダブルクォーテーション（"）を使用する必要があります。

// エラーの例
JSON.parse("{'name': 'John'}"); // エラー

// 正しい書き方
JSON.parse('{"name": "John"}'); // OK

3. undefined値の処理

`undefined`値はJSONでサポートされていません。

// エラーの例
const data = { name: undefined };
JSON.parse(JSON.stringify(data)); // nameプロパティは除外される

// 回避策
const data = { name: null };
JSON.parse(JSON.stringify(data)); // {"name": null}

エラー防止のベストプラクティス

1. try-catchブロックの使用

try {
  const obj = JSON.parse(jsonString);
} catch (error) {
  console.error('JSONのパースに失敗しました:', error);
}

2. データの検証

function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch (error) {
    return false;
  }
}

3. デフォルト値の設定

const jsonString = localStorage.getItem('userData');
const userData = JSON.parse(jsonString || '{}');

実践的な使用例

APIデータの処理

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    const data = await response.json(); // JSON.parse()を内部で使用
    return data;
  } catch (error) {
    console.error('データの取得に失敗しました:', error);
    return null;
  }
}

ローカルストレージの操作

// データの保存
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// データの取得
const savedUser = JSON.parse(localStorage.getItem('user') || '{}');

まとめ

`JSON.parse()`を使用する際は以下の点に注意しましょう：

  • JSON文字列は必ず正しい構文で記述する
  • ダブルクォーテーションを使用する
  • エラーハンドリングを適切に行う
  • データの検証を実施する

これらの注意点を守ることで、JSONデータの変換を安全に行うことができます。