JSON.parse()が投げるSyntaxErrorは実行時エラーである
JSON.parse()に不正な形式の文字列を渡すとSyntaxErrorを投げますが、これはJavaScript自体の構文解析エラーとは異なり、関数呼び出しの結果として実行時に発生する例外です。try/catchで捕まえられます。
エラーメッセージの読み方
SyntaxError: Unexpected token 'A', "{"name": Al}" is not valid JSON
SyntaxError- 例外クラス — 呼び出した関数(JSON.parseなど)が実行時に投げたものです
Unexpected token 'A', "{"name": Al}" is not valid JSON- 内容 — 解析できなかった理由
このエラーが出る典型パターン
パターン1
1 const raw = '{"name": Al }'; ^ 2 console.log(JSON.parse(raw));
JSON文字列の値は必ずダブルクォートで囲む必要があります。Alのようにクォート無しで書くと、識別子として解釈できずJSON.parseが例外を投げます。
直し方: Al を "Al" にします。
パターン2
1 const raw = '{"count": 5, }'; ^ 2 console.log(JSON.parse(raw));
JSONは末尾のカンマ(トレイリングカンマ)を許しません。JavaScriptのオブジェクトリテラルでは許容される書き方でも、JSON.parseでは構文エラーになります。
直し方: , を (空) にします。
パターン3
1 const raw = '{"active": yes }'; ^ 2 console.log(JSON.parse(raw));
JSONの真偽値はtrue/falseという決まった綴りのみが有効です。yesのような文字列(クォート無し)は識別子として解釈されエラーになります。
直し方: yes を true にします。
パターン4
1 const raw = '{"items": [1, 2, ]}'; ^ 2 console.log(JSON.parse(raw));
配列の末尾カンマもJSONでは許されません。JavaScriptのリテラルとの違いに注意が必要です。
直し方: , を (空) にします。
パターン5
1 const raw = '{"count": NaN }'; ^ 2 console.log(JSON.parse(raw));
NaNはJavaScriptの値としては存在しますが、JSONの構文には含まれません。数値として書けるのは通常の数値リテラルだけです。
直し方: NaN を 0 にします。
よくある誤解
「SyntaxErrorという名前だから実行前に検出される構文エラーのはず」という思い込みは、JSON.parse()には当てはまりません。文字列の中身を関数が実行時に解析して初めて分かるエラーのため、コード自体は正しく実行が始まってから例外が発生します。
実務での勘所
この名前の紛らわしさは実務でのリスクにつながります。「SyntaxError」という名前から、ESLintのような静的解析ツールが事前に検出してくれると誤解しがちですが、これは文字列の中身をJSON.parse()が実行時に解析して初めて分かるエラーです。静的解析は文字列の中身までは検査できません。外部API・localStorage・ユーザー入力など、実行するまで中身が分からないJSON文字列を扱うときは、必ずtry/catchで囲む習慣が必要です。