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のような文字列(クォート無し)は識別子として解釈されエラーになります。

直し方: yestrue にします。

この問題を解いてみる →

よくある誤解

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

まとめ

JSON.parse()が投げるSyntaxErrorは実行時エラーであるは中級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

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