【JavaScript】「Unexpected token」エラーの原因と解決方法｜SyntaxError完全解説

この記事で学べること

• Unexpected token エラーメッセージの読み方とパターン一覧
• 括弧・ブレース・ブラケットの対応不足の検出と修正
• カンマ・セミコロンに関連するSyntaxErrorの原因
• 文字列リテラル・テンプレートリテラルの問題と解決
• JSON.parse()で発生するUnexpected tokenの原因と対策
• アロー関数・省略構文でのよくあるミスと正しい書き方
• 予約語・キーワードの誤用による構文エラー
• HTML内のJavaScriptで起こる特有の問題
• ES6+構文と古い環境の互換性問題
• fetch/APIレスポンスでのJSON解析エラー
• 実務で頻出するパターン10選と解決フローチャート

ポイント：エラーメッセージに含まれるトークン（(、}、; など）は、そのトークン自体が間違っているのではなく、その位置にそのトークンがあることが問題です。真の原因はエラー箇所より前にあることが多いので注意しましょう。

// このコードは1行も実行されない
console.log('このログは表示されません');
console.log('ここもスキップされます');

// ここに構文エラーがある
const x = {;

// SyntaxError: Unexpected token ';'
// 上記の console.log も一切実行されない

// このログは表示される
console.log('ここは実行されます');

// ここで実行時エラーが発生
const obj = null;
obj.toString();  // TypeError: Cannot read properties of null

注意：SyntaxErrorは同じ <script> タグ内の try-catch では捕捉できません。ただし、eval() や new Function() で動的に生成されたコードのSyntaxErrorは try-catch で捕捉可能です。

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  // } <-- forループの閉じ括弧を忘れている
  return total;
}

// SyntaxError: Unexpected token '}'
// エラーは最後の } の位置で報告されるが、
// 実際の原因は for ループの閉じ忘れ

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }  // forループの閉じ括弧を追加
  return total;
}

function processData(data) {
  if (data) {
    for (const item of data) {
      if (item.active) {
        console.log(item.name);
      // } <-- この閉じ括弧が抜けている
    }
  }
}

// SyntaxError: Unexpected end of input

ポイント：ネストが深いコードでの閉じ括弧の対応確認方法：

• VSCodeの「括弧のペアのカラー化」機能を有効にする
• カーソルを括弧に置くと対応する括弧がハイライトされる
• Ctrl + Shift + \ で対応する括弧にジャンプできる
• インデントを正しく揃えることで視覚的に対応を確認できる

// パターン1: 条件式の括弧不足
if ((age >= 18) && (age <= 65) {
  // SyntaxError: Unexpected token '{'
  // if文の閉じ丸括弧が足りない
}

// パターン2: メソッドチェーンの括弧不足
arr.filter(x => x > 0.map(x => x * 2);
// SyntaxError: Unexpected token '.'
// filter() の閉じ括弧がない

// パターン1: 閉じ括弧を追加
if ((age >= 18) && (age <= 65)) {
  // 正常動作
}

// パターン2: filter() の閉じ括弧を追加
arr.filter(x => x > 0).map(x => x * 2);

// パターン1: 配列リテラルの閉じ忘れ
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
// ] <-- 外側の閉じ括弧を忘れている

console.log(matrix);
// SyntaxError: Unexpected identifier 'console'

// パターン2: 分割代入でのミス
const [a, b, c = arr;
// SyntaxError: Unexpected token '='
// 閉じ ] が抜けている

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];  // 閉じブラケット追加

const [a, b, c] = arr;  // 閉じブラケット追加

function greet(name) {
  return `Hello, ${name}!`;
}}
// SyntaxError: Unexpected token '}'
// 閉じ括弧が1つ多い

const user = {
  name: '山田太郎'
  age: 30,
  email: 'taro@example.com'
};
// SyntaxError: Unexpected identifier 'age'
// name の後にカンマが抜けている

const user = {
  name: '山田太郎',  // カンマを追加
  age: 30,
  email: 'taro@example.com'
};

// パターン1: 配列要素間のカンマ抜け
const colors = [
  'red'
  'green',
  'blue'
];
// SyntaxError: Unexpected string

// パターン2: 関数引数のカンマ抜け
Math.max(10 20 30);
// SyntaxError: Unexpected number

const colors = [
  'red',     // カンマを追加
  'green',
  'blue'
];

Math.max(10, 20, 30);  // カンマで区切る

// JavaScript では OK
const obj = {
  a: 1,
  b: 2,  // 末尾カンマ OK
};

const arr = [1, 2, 3,];  // 末尾カンマ OK

// JSON では NG
const jsonStr = '{"a": 1, "b": 2,}';
JSON.parse(jsonStr);
// SyntaxError: Unexpected token '}' ... in JSON

// return と値の間で改行すると ASI が適用される
function getUser() {
  return        // ここで ASI がセミコロンを挿入
  {
    name: '太郎'
  };
}

// 上記は以下のように解釈される
function getUser() {
  return;     // undefined を返す
  {              // ブロック文として解釈
    name: '太郎'
  };
}

注意：この例ではSyntaxErrorにはなりませんが、undefinedが返されるという意図しない動作になります。return の後に改行を入れず、同じ行にオブジェクトの開始{を書くのが正しい書き方です。

function getUser() {
  return {      // return と { を同じ行に
    name: '太郎'
  };
}

const a = 1
const b = 2
// ここが問題
(a + b).toString()

// ASI は上記を以下のように解釈する
const a = 1;
const b = 2(a + b).toString();
// 2 を関数として呼び出そうとしてエラーになる
// TypeError: 2 is not a function

const x = 42
[1, 2, 3].forEach(n => console.log(n))

// ASI は上記を以下のように解釈する
const x = 42[1, 2, 3].forEach(n => console.log(n));
// 42[3] は undefined なので forEach が使えずエラー

ポイント：ASIの問題を防ぐベストプラクティス：

• 常にセミコロンを明示的に書く
• 行頭が (、[、` で始まる場合は前の行にセミコロンを必ず付ける
• ESLintの semi ルールでセミコロンの一貫性を保つ
• Prettierなどのフォーマッタを使用する

// パターン1: for文のセミコロン位置ミス
for (let i = 0, i < 10, i++) {
  // SyntaxError: Unexpected token '<'
  // カンマではなくセミコロンで区切る必要がある
}

// パターン2: オブジェクトプロパティにセミコロン
const config = {
  host: 'localhost';
  port: 3000;
};
// SyntaxError: Unexpected token ';'
// オブジェクトではセミコロンではなくカンマ

// for文はセミコロンで区切る
for (let i = 0; i < 10; i++) {
  // OK
}

// オブジェクトはカンマで区切る
const config = {
  host: 'localhost',
  port: 3000
};

// パターン1: シングルクォートの閉じ忘れ
const message = 'Hello World;
// SyntaxError: Invalid or unexpected token

// パターン2: ダブルクォートの閉じ忘れ
const name = "山田太郎;
// SyntaxError: Invalid or unexpected token

const message = 'Hello World';
const name = "山田太郎";

// シングルクォート内にアポストロフィ
const msg = 'It's a beautiful day';
// SyntaxError: Unexpected identifier 's'

// ダブルクォート内にダブルクォート
const html = "<div class="container">";
// SyntaxError: Unexpected identifier 'container'

// 方法1: エスケープする
const msg1 = 'It\'s a beautiful day';

// 方法2: 異なるクォートで囲む
const msg2 = "It's a beautiful day";

// 方法3: テンプレートリテラルを使う
const msg3 = `It's a beautiful day`;

// 方法4: HTML属性のクォート
const html = '<div class="container">';

// パターン1: ${ の閉じ忘れ
const greeting = `Hello, ${name!`;
// SyntaxError: Unexpected token '!'

// パターン2: ネストしたテンプレートリテラル
const html = `<div class="${isActive ? `active` : ``}">`;
// バッククォートのネストは OK だが、混乱しやすい

// パターン3: 通常のクォートで ${ を使おうとする
const msg = "Hello, ${name}";
// エラーにはならないが、リテラル文字列 "${name}" になる

// ${ } を正しく閉じる
const greeting = `Hello, ${name}!`;

// ネストしたテンプレートリテラル
const html = `<div class="${isActive ? 'active' : '}">`;

// テンプレートリテラルにはバッククォートを使う
const msg = `Hello, ${name}`;

const text = "1行目
2行目
3行目";
// SyntaxError: Invalid or unexpected token

// 方法1: テンプレートリテラル（推奨）
const text1 = `1行目
2行目
3行目`;

// 方法2: \n エスケープシーケンス
const text2 = "1行目\n2行目\n3行目";

// 方法3: 文字列連結
const text3 = "1行目\n" +
              "2行目\n" +
              "3行目";

// 全角クォート（見た目では判別しにくい）
const msg = “Hello”;  // “ ” は全角
// SyntaxError: Unexpected token ILLEGAL

// 全角スペースの混入
const　x = 10;  // const と x の間が全角スペース
// SyntaxError: Unexpected token ILLEGAL

// 全角セミコロン
const y = 20；  // 全角セミコロン
// SyntaxError: Unexpected token ILLEGAL

ポイント：全角文字の検出方法：

• VSCodeの「全角スペースをハイライト」拡張機能を使う
• ESLintの no-irregular-whitespace ルールで検出
• エディタの「不可視文字を表示」オプションを有効にする
• テキストをコピー&ペーストした後は特に注意する

// シングルクォートは JSON では無効
const jsonStr = "{ 'name': '太郎' }";
JSON.parse(jsonStr);
// SyntaxError: Unexpected token '\'', ... in JSON

const jsonStr = '{ "name": "太郎" }';
JSON.parse(jsonStr);  // OK

const jsonStr = '{"a": 1, "b": 2,}';
JSON.parse(jsonStr);
// SyntaxError: Unexpected token '}'

const jsonStr = `{
  // これはコメント
  "name": "太郎"
}`;
JSON.parse(jsonStr);
// SyntaxError: Unexpected token '/'

const jsonStr = '{ name: "太郎" }';
JSON.parse(jsonStr);
// SyntaxError: Unexpected token 'n'

// サーバーがHTMLエラーページを返した場合
const response = '<!DOCTYPE html><html>...';
JSON.parse(response);
// SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

function safeJsonParse(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    console.error('JSON parse failed:', e.message);
    console.error('Raw string:', str.substring(0, 100));
    return null;
  }
}

// 使い方
const data = safeJsonParse(responseText);
if (data !== null) {
  // 正常にパースできた場合の処理
}

// ステップ1: パース前に文字列を確認
console.log('Type:', typeof str);
console.log('First 200 chars:', str.substring(0, 200));
console.log('Length:', str.length);

// ステップ2: 空文字列や undefined でないか確認
if (!str || str.trim() === '') {
  console.error('Empty string');
  return;
}

// ステップ3: HTMLかどうか確認
if (str.trim().startsWith('<')) {
  console.error('Response is HTML, not JSON');
  return;
}

// ステップ4: JSONバリデータで検証
// https://jsonlint.com/ などのオンラインツールを使用

ポイント：JSON.parse()のエラーメッセージには、問題のある文字の位置（position）が含まれています。SyntaxError: Unexpected token ... at position 42 のように表示されるので、文字列の42文字目付近を確認しましょう。

const data = { name: '太郎' };  // すでにオブジェクト
JSON.parse(data);  // オブジェクトをパースしようとする
// SyntaxError: Unexpected token 'o'
// data.toString() => "[object Object]" をパースしようとして失敗

function ensureObject(data) {
  if (typeof data === 'string') {
    return JSON.parse(data);
  }
  return data;  // すでにオブジェクトならそのまま返す
}

// { } がブロック文として解釈される
const getUser = () => { name: '太郎', age: 30 };
// SyntaxError: Unexpected token ':'

// JavaScript は上記を以下のように解釈する
// () => { name: "太郎" }  ... name はラベル文、"太郎" は式文
// , age: 30 でカンマ演算子 + age ラベルとなり構文エラー

// 方法1: () で囲む（推奨）
const getUser = () => ({ name: '太郎', age: 30 });

// 方法2: return文を明示する
const getUser2 = () => {
  return { name: '太郎', age: 30 };
};

注意：この問題は配列メソッド（map、reduceなど）で特に頻発します。arr.map(item => ({ id: item.id, name: item.name })) のように ({ }) で囲むことを忘れないでください。

const users = ['Alice', 'Bob', 'Charlie'];

// NG: ブロック文として解釈される
const result = users.map(name => { name: name, active: true });
// SyntaxError: Unexpected token ':'

const users = ['Alice', 'Bob', 'Charlie'];

// OK: () で囲む
const result = users.map(name => ({ name: name, active: true }));
// [{ name: "Alice", active: true }, ...]

// ES6 のショートハンドプロパティも使える
const result2 = users.map(name => ({ name, active: true }));

// パターン1: => の書き間違い
const add = (a, b) = > a + b;  // = と > の間にスペース
// SyntaxError: Unexpected token '>'

// パターン2: 複数引数で括弧を省略
const add2 = a, b => a + b;
// SyntaxError: Unexpected token ','
// 引数が2つ以上の場合は () が必要

// パターン3: 通常の関数と混同
const greet = function => { return 'Hello'; };
// SyntaxError: Unexpected token '=>'

// => はスペースなしで書く
const add = (a, b) => a + b;

// 複数引数は括弧で囲む
const add2 = (a, b) => a + b;

// function キーワードとアローは混ぜない
const greet = () => 'Hello';
// または
const greet2 = function() { return 'Hello'; };

// 分割代入の引数は () で囲む必要がある
const getName = { name } => name;
// SyntaxError: Unexpected token '=>'

// 分割代入パラメータは () で囲む
const getName = ({ name }) => name;

// 配列の分割代入も同様
const getFirst = ([first]) => first;

// デフォルト値付き
const getInfo = ({ name = 'anonymous', age = 0 }) => `${name} (${age})`;

// class は予約語
const class = 'A';
// SyntaxError: Unexpected token 'class'

// return は予約語
const return = 42;
// SyntaxError: Unexpected token 'return'

// import は予約語
const import = 'module';
// SyntaxError: Unexpected token 'import'

const className = 'A';
const returnValue = 42;
const importPath = 'module';

// プロパティ名としては OK
const obj = {
  class: 'A',
  return: 42,
  for: 'loop'
};

// ドット表記でアクセス可能
console.log(obj.class);   // "A"
console.log(obj.return);  // 42

// 分割代入する場合はリネームが必要
const { class: className } = obj;  // OK
// const { class } = obj;  // SyntaxError

"use strict";

// strict モードでは以下が禁止
const implements = 1;  // SyntaxError
const interface = 2;   // SyntaxError
const package = 3;     // SyntaxError
const private = 4;     // SyntaxError
const protected = 5;   // SyntaxError
const public = 6;      // SyntaxError
const static = 7;      // SyntaxError

// eval と arguments も変数名として使えない
const eval = 8;        // SyntaxError
const arguments = 9;   // SyntaxError

// 通常の関数内で await を使用
function fetchData() {
  const response = await fetch('/api/data');
  // SyntaxError: Unexpected identifier 'fetch'
  // または: await is only valid in async functions
}

// async を付ける
async function fetchData() {
  const response = await fetch('/api/data');
  return response;
}

// アロー関数の場合
const fetchData2 = async () => {
  const response = await fetch('/api/data');
  return response;
};

<!-- type="text/javascript" のタイプミス -->
<script type="text/javasript">
  // コードが実行されない（無視される）
</script>

<!-- type="module" なしで import を使用 -->
<script>
  import { utils } from './utils.js';
  // SyntaxError: Cannot use import statement outside a module
</script>

<!-- 通常のJavaScript（type 省略可能）-->
<script>
  console.log('Hello');
</script>

<!-- ES Modules を使う場合 -->
<script type="module">
  import { utils } from './utils.js';
</script>

<script>
  // NG: 文字列内の </script> がscriptタグの終了と解釈される
  const html = '<script>alert("Hi")</script>';
  // HTML パーサーが </script> を検出してスクリプトが終了してしまう
</script>

<script>
  // 方法1: 文字列を分割
  const html = '<script>alert("Hi")</scr' + 'ipt>';

  // 方法2: エスケープ
  const html2 = '<script>alert("Hi")<\/script>';
</script>

<!-- NG: src属性とインラインコードの両方がある -->
<script src="app.js">
  console.log('This will be ignored');
</script>

<!-- NG: パスが間違っている（404でHTMLエラーページが返される）-->
<script src="appp.js"></script>
<!-- SyntaxError: Unexpected token '<' -->
<!-- 404エラーページ（HTML）がJSとして解析される -->

<!-- 外部ファイルとインラインコードは別々の script タグに -->
<script src="app.js"></script>
<script>
  console.log('This runs after app.js');
</script>

ポイント：Unexpected token '<' エラーが発生した場合は、まずブラウザの開発者ツール > Network タブで、JSファイルのレスポンスがHTMLになっていないか確認しましょう。404エラーページやリダイレクト先のHTMLページが返されているケースが多いです。

<!-- 方法1: defer 属性（推奨）-->
<script src="app.js" defer></script>

<!-- 方法2: DOMContentLoaded イベント -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // DOM が読み込まれた後に実行
    const el = document.getElementById('app');
  });
</script>

<!-- 方法3: body の最後に配置 -->
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>

// Optional Chaining（ES2020）
const name = user?.profile?.name;
// 古い環境: SyntaxError: Unexpected token '.'

// Nullish Coalescing（ES2020）
const value = input ?? 'default';
// 古い環境: SyntaxError: Unexpected token '?'

// Optional Chaining + メソッド呼び出し
obj.method?.();
// 古い環境: SyntaxError: Unexpected token '.'

// Optional Chaining の代替
const name = user && user.profile && user.profile.name;

// Nullish Coalescing の代替
const value = input !== null && input !== undefined ? input : 'default';
// または（falsy な値も含む場合）
const value2 = input || 'default';

// .babelrc または babel.config.json
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions"]
      }
    }]
  ]
}

// 変換前（ES2020+）
const name = user?.profile?.name ?? 'anonymous';

// 変換後（ES5互換）
var _user$profile;
var _user$profile$name;
var name = (_user$profile$name =
  (_user$profile = user) === null ||
  _user$profile === void 0 ? void 0 :
  (_user$profile = _user$profile.profile) === null ||
  _user$profile === void 0 ? void 0 :
  _user$profile.name) !== null &&
  _user$profile$name !== void 0 ?
  _user$profile$name : 'anonymous';

ポイント：最新のブラウザを対象にしている場合は、Babelによるトランスパイルは不要です。browserslistの設定で対象ブラウザを明確にし、不要なトランスパイルを避けることでバンドルサイズを削減できます。Can I useで対応状況を確認しましょう。

# Node.jsバージョンを確認
node -v

# nvm でバージョンを切り替え
nvm use 18

# .nvmrc ファイルを作成
echo "18" > .nvmrc

// APIがHTMLエラーページを返した場合
const response = await fetch('/api/users');
const data = await response.json();
// SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

// よくある原因:
// 1. APIのURLが間違っている（404エラーページがHTMLで返る）
// 2. 認証が必要（ログインページにリダイレクト）
// 3. サーバーエラー（500エラーページがHTML）
// 4. CORSエラーでレスポンスが空

async function fetchJson(url) {
  const response = await fetch(url);

  // ステップ1: ステータスコードを確認
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status} ${response.statusText}`);
  }

  // ステップ2: Content-Type を確認
  const contentType = response.headers.get('content-type');
  if (!contentType || !contentType.includes('application/json')) {
    const text = await response.text();
    console.error('Expected JSON but got:', text.substring(0, 200));
    throw new Error('Response is not JSON');
  }

  // ステップ3: 安全にパース
  return response.json();
}

// 1. Network タブでリクエストを確認
//    - ステータスコード（200? 404? 500?）
//    - Response Headers の Content-Type
//    - Response Body の実際の中身

// 2. コンソールでレスポンスを確認
const response = await fetch('/api/users');
console.log('Status:', response.status);
console.log('Content-Type:', response.headers.get('content-type'));

// テキストとして取得して確認
const text = await response.text();
console.log('Body:', text);

// 注意: response.text() と response.json() は一度しか呼べない
// 両方確認したい場合は clone() を使う
const resp = await fetch('/api/users');
const text2 = await resp.clone().text();
console.log('Raw:', text2);
const json = await resp.json();  // これでもOK

class ApiError extends Error {
  constructor(status, statusText, body) {
    super(`API Error: ${status} ${statusText}`);
    this.status = status;
    this.statusText = statusText;
    this.body = body;
  }
}

async function apiFetch(url, options = {}) {
  const response = await fetch(url, {
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      ...options.headers
    },
    ...options
  });

  // ステータスコード確認
  if (!response.ok) {
    const body = await response.text();
    throw new ApiError(response.status, response.statusText, body);
  }

  // Content-Type確認
  const contentType = response.headers.get('content-type') || '';
  if (!contentType.includes('application/json')) {
    const text = await response.text();
    console.error('Non-JSON response:', text.substring(0, 200));
    throw new Error(`Expected JSON, got ${contentType}`);
  }

  return response.json();
}

// 使い方
try {
  const users = await apiFetch('/api/users');
  console.log(users);
} catch (error) {
  if (error instanceof ApiError) {
    console.error(`API Error ${error.status}:``, error.body);
  } else {
    console.error('Unexpected error:', error.message);
  }
}

// エラーの原因: 不可視文字が混入
// SyntaxError: Unexpected token ILLEGAL

// 対策1: エディタで不可視文字を表示する
// VSCode: "editor.renderControlCharacters": true

// 対策2: 問題のある行を削除して手動で再入力する

// 対策3: 文字列からBOMを除去
const cleanStr = str.replace(/^\uFEFF/, '');

// 対策4: ゼロ幅スペースを除去
const cleanStr2 = str.replace(/[\u200B-\u200D\uFEFF]/g, '');

// NG: package.json にコメントを書く
{
  "name": "my-app",
  // これはコメント <-- NG!
  "version": "1.0.0"
}

// OK: tsconfig.json は JSONC（JSON with Comments）なのでコメントOK
// OK: .eslintrc はJSファイル（.eslintrc.js）にすればコメントOK

// NG: 非モジュール環境で import を使用
import { utils } from './utils.js';
// SyntaxError: Cannot use import statement outside a module

// 解決策1: HTML で type="module" を指定
// <script type="module" src="app.js"></script>

// 解決策2: Node.js で package.json に "type": "module" を追加
// { "type": "module" }

// 解決策3: Node.js で require を使う
const { utils } = require('./utils.js');

// NG: 括弧不足で予期しないトークン
const result = a > 0 ? 'positive' : a < 0 ? 'negative' 'zero';
// SyntaxError: Unexpected string
// 2つ目の条件分岐で : が抜けている

// OK: 正しいネスト
const result2 = a > 0 ? 'positive' : a < 0 ? 'negative' : 'zero';

// NG: テンプレートリテラル内のオブジェクト
console.log(`Result: ${{ key: value }}`);
// エラーにはならないが "[object Object]" と表示される

// OK: JSON.stringify を使う
console.log(`Result: ${JSON.stringify({ key: value })}`);

// NG: 正規表現が除算と誤解される場合
const x = 42
/pattern/.test('text')
// ASIにより: 42 / pattern / .test("text")
// と解釈されてエラー

// OK: セミコロンを入れる
const x2 = 42;
/pattern/.test('text');

// NG: case内で直接 let/const を使うとエラーになる場合がある
switch (action) {
  case 'add':
    const item = createItem();
    break;
  case 'remove':
    const item = findItem();  // SyntaxError: Identifier 'item' has already been declared
    break;
}

// OK: ブロックスコープを作る
switch (action) {
  case 'add': {
    const item = createItem();
    break;
  }
  case 'remove': {
    const item = findItem();  // OK: 別のブロックスコープ
    break;
  }
}

// NG: 宣言なしの分割代入は括弧が必要
let a, b;
{ a, b } = obj;
// SyntaxError: Unexpected token '='
// { がブロック文として解釈される

// OK: () で囲む
let a2, b2;
({ a: a2, b: b2 } = obj);

// OK: 宣言と同時に行う場合は括弧不要
const { a: a3, b: b3 } = obj;

// NG: constで宣言した変数に再代入
const status = 'active';
status = 'inactive';  // TypeError: Assignment to constant variable.

// NG: if文で = を使用（SyntaxErrorではなく論理エラー）
if (x = 10) {  // 代入してしまう（常にtrue）
  // ...
}

// OK: === で比較
if (x === 10) {
  // ...
}

// NG: await を忘れてPromiseオブジェクトを直接操作
async function getUsers() {
  const response = fetch('/api/users');  // await を忘れている
  const data = await response.json();  // Promiseに.json()を呼んでしまう
  // TypeError: response.json is not a function
}

// OK: await を付ける
async function getUsers() {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
}

解決フローチャート

1. エラーメッセージを読む – 「Unexpected token X」のXが何か確認
2. エラー行を確認 – ただし、原因はエラー行より前にあることが多い
3. Unexpected token < の場合 – HTMLがJSとして読まれていないか確認（Network タブ）
4. JSON.parse関連の場合 – パースする文字列の中身をconsole.logで確認
5. 括弧の対応を確認 – エディタの括弧マッチング機能を使う
6. カンマ・セミコロンを確認 – オブジェクトはカンマ、for文はセミコロン
7. 文字列のクォートを確認 – 閉じ忘れ、全角文字の混入がないか
8. ESLintを実行 – 静的解析で構文エラーを事前に検出
9. Prettierでフォーマット – 自動整形がエラーになる箇所が原因
10. 環境を確認 – Node.jsのバージョン、ブラウザの対応状況

この記事のまとめ

• Unexpected token は構文解析時のエラーで、コードは1行も実行されない
• エラーが指す行ではなく、それより前の行に本当の原因がある場合が多い
• 括弧の対応（{} () []）の確認が最優先
• JSON.parse のエラーはレスポンスの中身を先に確認する
• アロー関数でオブジェクトを返す場合は => ({ }) で括弧で囲む
• Unexpected token < はHTMLがJSとして読み込まれている（URLミス・404・認証切れ）
• ESLint + Prettier で構文エラーの大半は事前に防げる
• 新しい構文（?. ??）は古い環境ではBabelが必要