JavaScriptのJSON操作で発生するエラーと対処法を初心者向けに徹底解説

1. JSON.parseでよくあるSyntaxErrorの原因と対策

1. JSON.parseでよくあるSyntaxErrorの原因と対策

JSON文字列をJavaScriptのオブジェクトに変換する際に使うのがJSON.parse()です。文字列の形式が間違っているとSyntaxErrorが発生します。例えば、キーをダブルクオートで囲っていない場合です。

const jsonStr = '{name: "Taro"}'; // 間違い
const obj = JSON.parse(jsonStr); // SyntaxError

正しくはキーも値もダブルクオートで囲む必要があります。

const jsonStr = '{"name": "Taro"}'; // 正しい
const obj = JSON.parse(jsonStr);
console.log(obj.name); // Taro

2. JSON.stringifyでTypeErrorが発生する場合

2. JSON.stringifyでTypeErrorが発生する場合

JavaScriptのオブジェクトをJSON文字列に変換するJSON.stringify()でもエラーが起こることがあります。循環参照があるオブジェクトではTypeErrorになります。

const obj = {};
obj.self = obj; // 循環参照
JSON.stringify(obj); // TypeError: Converting circular structure to JSON

対策として、循環参照を取り除くか、replacer関数を使って除外します。

const obj = {name: "Taro"};
obj.self = undefined; // 循環を避ける
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // {"name":"Taro"}

3. JSONに変換できないデータ型に注意

3. JSONに変換できないデータ型に注意

JSONは文字列、数値、配列、オブジェクト、true/false/nullのみ対応しています。関数やundefinedを含むオブジェクトは変換されません。

const obj = {name: "Taro", greet: function(){ console.log("Hi"); }};
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // {"name":"Taro"} greetプロパティは無視される

関数を含める場合は、手動で文字列化するかJSONに含めないように設計します。

4. JSON.parseで空文字やnullを扱う注意点

4. JSON.parseで空文字やnullを扱う注意点

空文字やnullをJSON.parse()で解析するとエラーになります。必ず事前にチェックしましょう。

const jsonStr = ""; // 空文字
if(jsonStr) {
  const obj = JSON.parse(jsonStr);
} else {
  console.log("JSON文字列が空です");
}

安全に解析するには条件分岐やtry-catchを使うのがおすすめです。

5. try-catchでJSONエラーを安全に処理する

5. try-catchでJSONエラーを安全に処理する

JSON操作ではtry-catchでエラー処理をするのが基本です。これによりエラーで処理が止まるのを防げます。

const jsonStr = '{"name": "Taro"}';
try {
  const obj = JSON.parse(jsonStr);
  console.log(obj.name);
} catch (e) {
  console.error("JSON解析に失敗しました", e);
}

6. 配列を含むJSONの注意点

6. 配列を含むJSONの注意点

JSONに配列を含める場合も、要素がJSON対応か確認しましょう。未定義や関数が入ると無視されたりエラーになる場合があります。

const arr = [1, 2, undefined, function(){}];
const jsonStr = JSON.stringify(arr);
console.log(jsonStr); // [1,2,null,null]

配列のデータはすべてJSONに変換可能か事前に確認するのが安全です。

7. ネストしたJSONの解析でよくあるエラー

7. ネストしたJSONの解析でよくあるエラー

JSONの中にオブジェクトや配列がネストしている場合、存在しないプロパティにアクセスするとTypeErrorになります。

const jsonStr = '{"user":{"name":"Taro"}}';
const obj = JSON.parse(jsonStr);
console.log(obj.user.age); // undefined
console.log(obj.user.age.toString()); // TypeError

安全にアクセスするにはオプショナルチェイニング(?.)を使いましょう。

console.log(obj.user.age?.toString()); // undefined でエラーにならない

8. 外部APIのJSONを扱うときの注意点

8. 外部APIのJSONを扱うときの注意点

外部APIから取得するJSONは形式が保証されていないことがあります。必ずtry-catchや型チェックを行いましょう。

fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => {
    console.log(data?.items?.length ?? 0); // 安全にアクセス
  })
  .catch(e => console.error("APIからのJSON取得に失敗", e));

9. JSON操作の基本ルールまとめ

9. JSON操作の基本ルールまとめ

• JSON文字列は必ずキーと文字列値をダブルクオートで囲む
• 循環参照や関数、undefinedはJSONに変換できない
• JSON.parse()は必ずtry-catchで安全に処理する
• ネストや配列の要素もJSON対応か確認する
• 外部APIのJSONも必ず安全チェックする

これらの基本ルールを守ることで、JavaScriptのJSON操作で発生するエラーを最小限にできます。

まとめ

まとめ

JavaScriptでJSONを扱う際には、正しい形式とデータ型の理解が非常に重要です。まず、JSON.parse()を使って文字列をオブジェクトに変換する場合、キーや文字列値は必ずダブルクオートで囲む必要があります。形式が少しでも崩れるとSyntaxErrorが発生します。また、JSON.stringify()でオブジェクトを文字列化する際には、循環参照や関数、undefinedなどJSONに変換できないデータ型が含まれているとTypeErrorや想定外の出力になるため注意が必要です。さらに、空文字やnullの扱いにも注意し、解析前に必ず値の存在を確認することが重要です。安全にJSONを扱うためにはtry-catchを使った例外処理が基本であり、ネストされたオブジェクトや配列の場合にはオプショナルチェイニング(?.)や条件チェックを活用してエラーを防ぎます。外部APIから取得するJSONも、形式が保証されないことが多いため、必ず型チェックや存在確認を行うことで、アプリケーションの安定性を保つことができます。

実際のプログラム例として、JSON文字列の安全な解析とオブジェクトのアクセスを確認してみましょう。

const jsonStr = '{"user":{"name":"Taro"}}';
try {
    const obj = JSON.parse(jsonStr);
    // ネストしたプロパティへの安全なアクセス
    console.log(obj.user?.name); // Taro
    console.log(obj.user?.age?.toString() ?? "年齢情報はありません"); // 年齢情報はありません
} catch(e) {
    console.error("JSON解析に失敗しました", e);
}

この例では、try-catchで解析エラーを防ぎつつ、オプショナルチェイニングとnull合体演算子(??)を使ってネストしたプロパティへのアクセスを安全に行っています。また、JSONに含まれる配列や外部APIからのデータにも同様の安全チェックを適用することで、予期せぬエラーを最小限に抑えることが可能です。JSONの基本ルールを守ること、データ型や形式を正しく理解すること、そして例外処理や条件分岐を適切に組み合わせることが、初心者でも安心してJSONを扱うための重要なポイントです。