Code Fix

中級

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));
SyntaxError: Unexpected token 'A', "{"name": Al}" is not valid JSON

JSON文字列の値は必ずダブルクォートで囲む必要があります。Alのようにクォート無しで書くと、識別子として解釈できずJSON.parseが例外を投げます。

直し方: Al を "Al" にします。

この問題を解いてみる →

広告
広告スロット(未設定)

パターン2

 1  const raw = '{"count": 5, }';
                             ^
 2  console.log(JSON.parse(raw));
SyntaxError: Expected double-quoted property name in JSON at position 12 (line 1 column 13)

JSONは末尾のカンマ(トレイリングカンマ)を許しません。JavaScriptのオブジェクトリテラルでは許容される書き方でも、JSON.parseでは構文エラーになります。

直し方: , を (空) にします。

この問題を解いてみる →

パターン3

 1  const raw = '{"active": yes   }';
                               ^
 2  console.log(JSON.parse(raw));
SyntaxError: Unexpected token 'y', "{"active": yes}" is not valid JSON

JSONの真偽値はtrue/falseという決まった綴りのみが有効です。yesのような文字列(クォート無し)は識別子として解釈されエラーになります。

直し方: yes を true にします。

この問題を解いてみる →

パターン4

 1  const raw = '{"items": [1, 2, ]}';
                                 ^
 2  console.log(JSON.parse(raw));
SyntaxError: Unexpected token ']', "{"items": [1, 2,]}" is not valid JSON

配列の末尾カンマもJSONでは許されません。JavaScriptのリテラルとの違いに注意が必要です。

直し方: , を (空) にします。

この問題を解いてみる →

パターン5

 1  const raw = '{"count": NaN  }';
                             ^
 2  console.log(JSON.parse(raw));
SyntaxError: Unexpected token 'N', "{"count": NaN}" is not valid JSON

NaNはJavaScriptの値としては存在しますが、JSONの構文には含まれません。数値として書けるのは通常の数値リテラルだけです。

直し方: NaN を 0 にします。

この問題を解いてみる →

よくある誤解

「SyntaxErrorという名前だから実行前に検出される構文エラーのはず」という思い込みは、JSON.parse()には当てはまりません。文字列の中身を関数が実行時に解析して初めて分かるエラーのため、コード自体は正しく実行が始まってから例外が発生します。

実務での勘所

この名前の紛らわしさは実務でのリスクにつながります。「SyntaxError」という名前から、ESLintのような静的解析ツールが事前に検出してくれると誤解しがちですが、これは文字列の中身をJSON.parse()が実行時に解析して初めて分かるエラーです。静的解析は文字列の中身までは検査できません。外部API・localStorage・ユーザー入力など、実行するまで中身が分からないJSON文字列を扱うときは、必ずtry/catchで囲む習慣が必要です。

演習をはじめる

関連するエラー

広告
広告スロット(未設定)