プログラミングを始めると、最初に直面するのがエラーメッセージです。その中でも「SyntaxError: Unexpected token」というメッセージは、JavaScriptを学んでいる多くの初心者が一度は目にするものです。しかし、なぜこのエラーが発生するのか、何を意味しているのかがわからず、悩む方も多いでしょう。

この記事では、「SyntaxError: Unexpected token」エラーの原因とその解決方法について詳しく解説していきます。
初心者でも理解しやすい言葉で、実際のコード例を交えながら説明していくので、ぜひ参考にしてみてください。

SyntaxErrorとは？

まず、「SyntaxError」とは何でしょうか？
「SyntaxError」は、プログラムの構文（文法）に誤りがある場合に発生するエラーの一種です。
JavaScriptなどのプログラミング言語には、それぞれ決められたルールや文法があります。これに従っていないと、プログラムが正しく実行されず、エラーメッセージとして「SyntaxError」が表示されます。

「SyntaxError: Unexpected token」というエラーメッセージの意味は、プログラムが実行される途中で、予期しない（unexpected）文字や記号（token）が現れたため、解析できなかったということです。
つまり、プログラムの構文が間違っている、もしくはルール通りに書かれていないということです。

よくある「Unexpected token」の原因

次に、実際にどのような状況で「Unexpected token」が発生するのか、よくある原因を見ていきましょう。

1. カンマやセミコロンの不足

JavaScriptでは、複数の項目を区切るためにカンマやセミコロンが必要な場合があります。
例えば、配列やオブジェクトを扱う際に、カンマが不足していると「Unexpected token」エラーが発生します。

■エラー例

const fruits = ['apple' 'banana', 'orange'];

この場合、'apple'と'banana'の間にカンマがないため、JavaScriptエンジンは次の要素（’banana’）を認識できず、予期しないトークンとしてエラーを出します。

■修正後の正しいコード:

const fruits = ['apple', 'banana', 'orange'];

2. 閉じ忘れた括弧

括弧（{}、[]、()など）が正しく閉じられていない場合も、「Unexpected token」が発生します。
括弧は一対で使われる必要があるため、開いた括弧を閉じ忘れるとエラーになります。

■エラー例

if (isValid) {
  console.log("Valid input");

この場合、if文のブロックを閉じるための}が不足しているため、次に出てくるトークンを正しく解釈できずにエラーとなります。

■修正後の正しいコード

if (isValid) {
  console.log("Valid input");
}

3. 関数定義のミス

関数を定義する際に、関数の引数リストやブロックを正しく書かないと、「Unexpected token」が発生します。特に、関数の括弧やカンマの位置を間違えることが多いです。

■エラー例

function sayHello(name {
  console.log("Hello, " + name);
}

この場合、nameの後ろにある{が問題です。正しくは引数リストを閉じるための)が必要です。

■修正後の正しいコード

function sayHello(name) {
  console.log("Hello, " + name);
}

具体例でエラーを理解する

ここでは、もう少し複雑な例を見てみましょう。以下のコードは、フォームの入力値をチェックするシンプルなJavaScriptプログラムです。
しかし、間違った箇所があり、「Unexpected token」エラーが発生します。

■エラー例

function validateForm() {
  const name = document.getElementById("name").value;
  if (name === "") {
    alert("Name cannot be empty");
  } else {
    console.log("Form is valid")
}

このコードには、elseブロックの終わりに}が欠けています。そのため、console.log()の次に書かれている}が予期しないトークンとして認識され、エラーが発生します。

■修正後の正しいコード

function validateForm() {
  const name = document.getElementById("name").value;
  if (name === "") {
    alert("Name cannot be empty");
  } else {
    console.log("Form is valid");
  }
}

このように、ほんの少しの書き間違いでも、プログラム全体が動かなくなることがあります。コードを書く際には、開いた括弧を忘れずに閉じる、必要なカンマやセミコロンを追加するなど、基本的な構文ルールを守ることが重要です。

「Unexpected token」を修正するためのデバッグ手順

次に、エラーが発生した際のデバッグ手順について説明します。「Unexpected token」エラーは、構文エラーであるため、エラーメッセージをよく読み、どこで間違いが発生したのかを特定することが重要です。

■エラーメッセージの読み方
コンソールに表示されるエラーメッセージには、エラーの詳細と発生箇所が示されています。特に「SyntaxError: Unexpected token」と共に表示される行番号に注目してください。この行に問題があることがわかります。

■該当箇所を確認する
エラーメッセージで示された行を確認し、構文上のミスがないかチェックします。特に、カンマやセミコロン、括弧の開閉、関数定義のミスなどに注意しましょう。

■構文チェッカーを使う
コードエディタには多くの場合、構文エラーを自動的にハイライトする機能があります。ツールを使うと、構文エラーを事前にチェックできるので、エラーを未然に防ぐことができます。

まとめ

「SyntaxError: Unexpected token」エラーは、JavaScriptでコードを記述する際に最もよく見られるエラーの一つです。このエラーは、構文上のミスによって引き起こされることが多く、デバッグは一見難しく思えるかもしれませんが、エラーメッセージをしっかりと読み、コードを確認することで解決できます。

エラーの原因としては、カンマやセミコロンの不足、括弧の閉じ忘れ、関数定義のミスがよくあります。
この記事で紹介したような具体的な例を参考にして、少しずつデバッグのスキルを身につけていきましょう。

最後に、エラーが出たときに焦らずに、エラーメッセージをヒントにしてコードを見直すことが、エラー解決への第一歩です。プログラミングは試行錯誤の連続ですが、少しずつエラーに対処する能力が身についていきます。

フォームメーラー