JavaScript SyntaxError: Unexpected token の原因と解決方法【よくある落とし穴と実践的な対処法】

SyntaxError: Unexpected token とは

JavaScript開発中に`SyntaxError: Unexpected token`に遭遇すると、どこから手をつけていいか分からず、焦ってしまうことがあります。このエラーは、コードの実行時ではなく、JavaScriptエンジンがコードを解析（パース）する段階で、予期しない文字や記号を見つけたときに発生します。ちょっとしたタイポや構文ミスが原因で発生することが多く、特に初心者にとって原因特定が難しいエラーの一つです。

エラーの発生パターン

このエラーは主に以下のようなケースで発生します。

パターン1: 1. JSONデータのパース失敗

```javascript
const invalidJsonString = "{ "name": "Alice", } "; // 末尾のカンマや不正な形式
const data = JSON.parse(invalidJsonString);
console.log(data);
```

`JSON.parse()`メソッドに、厳密なJSON形式ではない文字列（JavaScriptオブジェクトリテラルとしては許容されてもJSONとしては不正な形式）を渡すと発生します。特に、末尾のカンマやキーの引用符不足、文字列の引用符にシングルクォートを使用している場合などが多いです。

```javascript
const validJsonString = '{"name": "Alice"}'; // 有効なJSON形式
const data = JSON.parse(validJsonString);
console.log(data);

// あるいは、JSON.stringifyで確認する
const obj = { name: 'Bob' };
const json = JSON.stringify(obj);
console.log(json); // "{"name":"Bob"}"
```

パターン2: 2. 閉じ括弧・引用符の不足または不一致

```javascript
const arr = [1, 2, 3; // 配列の閉じ括弧が不足
const obj = { key: 'value', another: 'another value' // オブジェクトの閉じ括弧が不足
const message = "Hello, world!; // 文字列の閉じ引用符が不足

function greet(name) {
  console.log('Hello, ' + name;
} // 関数の閉じ括弧が不足
```

配列`[]`、オブジェクト`{}`、関数`()`、文字列`”`または`””`などの閉じ括弧や引用符が不足している、または対応する開始記号と異なる記号で閉じようとしている場合に発生します。これは最も基本的な構文ミスでありながら、見つけにくいこともあります。

```javascript
const arr = [1, 2, 3]; // 配列の閉じ括弧を追加
const obj = { key: 'value', another: 'another value' }; // オブジェクトの閉じ括弧を追加
const message = "Hello, world!"; // 文字列の閉じ引用符を追加

function greet(name) {
  console.log('Hello, ' + name);
} // 関数の閉じ括弧を追加
```

パターン3: 3. 予期しない文字や構文の使用

```javascript
const value = 10； // 全角セミコロン
const data = {
  name: 'test'
　age: 30 // 全角スペース
}

// 古いNode.js環境やCommonJSファイルでES Modules構文を使用
export const myVar = 'hello';
```

コード中に全角スペース、全角記号（セミコロン、カンマなど）、またはその他の不正なUnicode文字が混入していると、JavaScriptエンジンが解釈できずにこのエラーが発生します。また、環境がサポートしていない新しい構文やモジュールシステム（例: CommonJS環境での`export`/`import`）を使用した場合も同様です。

```javascript
const value = 10; // 半角セミコロン
const data = {
  name: 'test',
  age: 30 // 半角スペースとカンマ
};

// Node.jsのCommonJS環境ではrequire/module.exportsを使用
// const myVar = 'hello';
// module.exports = { myVar };

// または、ES Modulesとしてファイルを適切に設定する
// (例: package.jsonに "type": "module" を追加、またはファイル名を .mjs にする)
```

根本原因の特定方法

ブラウザの開発者ツールやNode.jsのデバッガを使用し、エラーメッセージに示された{marker}ファイル名、行番号、そして列番号{/marker}を正確に確認することが第一歩です。エラー発生箇所周辺のコードを注意深くレビューし、閉じ括弧、引用符、カンマの有無、そして不正な文字の混入がないかを確認します。特に、改行コードや見えない制御文字にも注意してください。

```javascript
// ブラウザの開発者ツールで確認する場合
// 1. エラーメッセージのリンクをクリックしてソースコードを開く
// 2. エラー行とその周辺を注意深く確認
// 3. 疑わしい箇所をコメントアウトして少しずつコードを有効化し、エラーが再発するか確認

// Node.jsでデバッグする場合
// node --inspect your_file.js
// Chrome DevToolsを開き、Node.jsアイコンをクリックしてデバッガをアタッチ

// 特定の変数をログに出力して確認
console.log('Value before potential error:', myVariable);
// debugger; // ここにブレークポイントを設定
// console.log('Value after potential error:', anotherVariable);
```

防止策とベストプラクティス

コードを書く際には、構文チェッカーやLinter (ESLintなど) を導入し、リアルタイムで構文エラーを検出できるように設定します。また、コードフォーマッター (Prettierなど) を利用して、一貫したコードスタイルを維持することも、ヒューマンエラーによる構文ミスを減らすのに効果的です。これらをCI/CDパイプラインに組み込むことで、デプロイ前の自動チェックも可能です。

```javascript
// .eslintrc.js の設定例 (一部)
module.exports = {
  parserOptions: {
    ecmaVersion: 2022, // 最新のESバージョンをサポート
    sourceType: 'module', // ES Modulesを使用する場合
    ecmaFeatures: {
      jsx: true // Reactを使用する場合
    }
  },
  env: {
    browser: true,
    node: true,
    es2022: true // 最新のESバージョン環境を有効化
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended' // Reactを使用する場合
  ],
  rules: {
    'no-trailing-spaces': 'error', // 末尾のスペースを禁止
    'no-extra-parens': 'warn' // 不要な括弧に警告
    // 必要に応じてルールを追加・変更
  },
  settings: {
    react: {
      version: 'detect' // Reactのバージョンを自動検出
    }
  }
};
```

よくある質問（FAQ）

この用語と一緒に知っておきたい用語