JavaScript SyntaxErrorの原因と解決方法｜初心者向け完全ガイド

JavaScriptを学び始めたばかりの方なら、一度は「SyntaxError」というエラーメッセージを目にしたことがあるでしょう。このエラーはプログラムの構文（書き方）に問題があることを示す重要な警告です。本記事では、SyntaxErrorの原因から解決方法まで、初心者でも理解できるように詳しく解説します。

JavaScriptのSyntaxErrorとは
SyntaxErrorが発生する主な原因
SyntaxErrorの解決手順
よくあるSyntaxErrorのコード例と解決法
よくある間違いと対策
デバッグのコツ
SyntaxErrorを防ぐベストプラクティス
実践的な完全な例
まとめ

JavaScriptのSyntaxErrorとは

SyntaxErrorは、JavaScriptの構文ルールに違反しているときに発生するエラーです。プログラムの書き方が正しくないため、JavaScriptエンジンがコードを解析できない状態を指します。このエラーが発生すると、プログラムは実行されません。

SyntaxErrorが発生する主な原因

1. 括弧のミス

最も一般的な原因の一つが、括弧の数が合わないことです。開き括弧と閉じ括弧がペアになっていないと、SyntaxErrorが発生します。

2. セミコロンの忘れ

JavaScriptではセミコロンが自動的に挿入される機能（ASI）がありますが、特定の状況では予期しない動作を招くことがあります。

3. クォーテーションマークのミス

文字列を囲むシングルクォート、ダブルクォート、バックティックの閉じ忘れは頻繁に起こります。

4. 予約語の使用

JavaScriptの予約語（function、class、returnなど）を変数名として使うとエラーになります。

5. 不正な文法構造

ifやforなどの制御構文の書き方が間違っていても発生します。

SyntaxErrorの解決手順

ステップ1: エラーメッセージを確認する

ブラウザの開発者ツール（DevTools）を開いて、エラーメッセージをよく読みましょう。「○○行目」という情報が記載されていることが多いです。

開発者ツールの開き方：

Windows/Linux: F12またはCtrl+Shift+I
Mac: Cmd+Option+I

ステップ2: エラーが発生している行を特定する

エラーメッセージに表示された行番号を確認し、その周辺のコードを見直します。実際のエラー位置は数行前である場合もあります。

ステップ3: 構文をチェックする

括弧、クォーテーション、セミコロンなど、基本的な構文要素を確認します。テキストエディタの構文ハイライト機能を活用するのも効果的です。

ステップ4: コードを修正する

問題を特定したら修正し、再度実行して確認します。

ステップ5: ファイルを保存して再読み込み

修正後は必ずファイルを保存し、ブラウザをリロードしてキャッシュを更新します。

よくあるSyntaxErrorのコード例と解決法

例1: 括弧の閉じ忘れ

❌ エラーのあるコード：

function greet(name) {
  console.log('Hello, ' + name);
// 括弧が閉じられていない

✅ 修正後のコード：

function greet(name) {
  console.log('Hello, ' + name);
}

greet('Taro'); // Hello, Taro

例2: クォートの閉じ忘れ

❌ エラーのあるコード：

const message = 'Welcome to JavaScript;
console.log(message);

✅ 修正後のコード：

const message = 'Welcome to JavaScript';
console.log(message); // Welcome to JavaScript

例3: 予約語を変数名として使用

❌ エラーのあるコード：

const function = 'test'; // functionは予約語
const class = 'programming'; // classも予約語

✅ 修正後のコード：

const myFunction = 'test';
const myClass = 'programming';
console.log(myFunction); // test

例4: if文の構文エラー

❌ エラーのあるコード：

const age = 20;
if (age > 18) // 括弧とコロンの混同
  console.log('Adult');
}

✅ 修正後のコード：

const age = 20;
if (age > 18) {
  console.log('Adult');
} // Adult

例5: 配列またはオブジェクトの括弧ミス

❌ エラーのあるコード：

const users = [
  { name: 'Taro', age: 25,
  { name: 'Hanako', age: 23 }
]; // 閉じ括弧が足りない

✅ 修正後のコード：

const users = [
  { name: 'Taro', age: 25 },
  { name: 'Hanako', age: 23 }
];
console.log(users[0].name); // Taro

例6: テンプレートリテラルの誤用

❌ エラーのあるコード：

const name = 'Taro';
const greeting = 'Hello, ' + name + '!; // シングルクォートで開いているがダブルクォートで閉じている

✅ 修正後のコード：

const name = 'Taro';
const greeting = `Hello, ${name}!`; // テンプレートリテラルの使用
console.log(greeting); // Hello, Taro!

よくある間違いと対策

間違い1: キーボード配列が異なる環境でのタイプミス

異なるキーボード配列を使用している場合、括弧やシンボルを入力する際にエラーが発生しやすくなります。エディタで色分けが正しく表示されているか確認しましょう。

間違い2: コピペしたコードの文字化け

インターネットからコードをコピーペーストすると、見えない特殊文字が混入することがあります。手動で再入力する、または信頼できるソースから取得することをお勧めします。

間違い3: 異なるエディタ間でのコピペ

WordやGoogleドキュメントなどのリッチテキストエディタからコードをコピーすると、形式化された文字が含まれてSyntaxErrorになります。プレーンテキストエディタを使用しましょう。

間違い4: インデント（字下げ）の混在

タブとスペースを混在させると、一部のエディタや環境でSyntaxErrorが発生することがあります。プロジェクト全体で統一しましょう。

間違い5: 複数ファイル間の連携ミス

HTMLファイルでJavaScriptを読み込む際、ファイルパスが間違っていると、スクリプトが実行されずエラーが起こります。

<!-- ❌ 間違った例 -->
<script src="/script.js"></script> <!-- パスが絶対パスになっている -->

<!-- ✅ 正しい例 -->
<script src="./script.js"></script> <!-- 相対パスを使用 -->

デバッグのコツ

コンソールログを活用する

エラーが発生している前後にconsole.logを挿入し、変数の値を確認することで問題の箇所を特定できます。

const numbers = [1, 2, 3];
console.log('配列の内容:', numbers);
console.log('配列の長さ:', numbers.length);

// 結果:
// 配列の内容: (3) [1, 2, 3]
// 配列の長さ: 3

開発者ツールのブレークポイント機能

ブラウザの開発者ツールで特定の行にブレークポイントを設定し、ステップバイステップでコードを実行できます。

リンターツールの使用

ESLintやJSHintなどのリンターツールを使用すると、コードの問題を事前に検出できます。

SyntaxErrorを防ぐベストプラクティス

1. 構文ハイライト機能付きエディタを使用

Visual Studio CodeやAtomなどのエディタは、SyntaxErrorになる可能性のあるコードを色分けで表示します。

2. 自動フォーマッター（Prettier）の導入

Prettierなどのツールを使用することで、コードの形式を自動的に整えられます。

3. ESLintの設定

プロジェクトにESLintを導入すると、構文エラーだけでなく、潜在的なバグも検出できます。

4. 定期的なコード見直し

チームメンバーによるコードレビューにより、自分では見落とすミスを発見できます。

5. テストコードの作成

単体テストを書くことで、コードの動作確認が容易になり、エラーを早期に発見できます。

// テストコードの例（Jestを使用）
function add(a, b) {
  return a + b;
}

test('1 + 2 は 3 を返す', () => {
  expect(add(1, 2)).toBe(3);
});

実践的な完全な例

ここでは、複数のよくあるエラーを含むコードを修正する実例を示します。

❌ エラーのあるコード：

const users = [
  { name: 'Taro', age: 25
  { name: 'Hanako', age: 23 }
]

function printUsers() {
  for (let i = 0; i < users.length; i++) {
    const user = users[i]
    console.log('名前: ' + user.name + '、年齢: ' + user.age)
  }
// 括弧が閉じられていない

printUsers()

✅ 修正後のコード：

const users = [
  { name: 'Taro', age: 25 },
  { name: 'Hanako', age: 23 }
];

function printUsers() {
  for (let i = 0; i < users.length; i++) {
    const user = users[i];
    console.log(`名前: ${user.name}、年齢: ${user.age}`);
  }
}

printUsers();

// 実行結果：
// 名前: Taro、年齢: 25
// 名前: Hanako、年齢: 23