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 にします。
よくある誤解
「SyntaxErrorという名前だから実行前に検出される構文エラーのはず」という思い込みは、JSON.parse()には当てはまりません。文字列の中身を関数が実行時に解析して初めて分かるエラーのため、コード自体は正しく実行が始まってから例外が発生します。
まとめ
JSON.parse()が投げるSyntaxErrorは実行時エラーであるは中級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。