JavaScriptで「Unexpected token」というエラーが出る原因と対処法を現役エンジニアが解説【初心者向け】

JavaScriptで「Unexpected token」というエラーが出る原因と対処法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

目次

• 「Unexpected token」とは
• Unexpected tokenエラーが出る原因と解決方法
• Unexpected tokenエラーを出さないための予防策

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

 

「Unexpected token」とは

JavaScriptを実装していると、以下のようなエラーに遭遇することが時々あります。

 

以下は日本語訳です。

Uncaught Syntax Error = 文法に誤りがある

Unexpected token = 予期しない記号

つまり、コードを実行する上で正しくない箇所に記号が書かれていたりする場合に発生するエラーです。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

Unexpected tokenエラーが出る原因と解決方法

エラーの原因

多くの場合、このエラーが発生する原因は、「カッコの対応関係が正しくない」ことにあります。

 

次のコードをみてください。

const test = () => {
  console.log('test');
})

一ヶ所、カッコの対応関係がおかしくなっているのですが、見つけられましたか？

最後の丸いカッコが余計ですね。

 

わかりやすく色分けすると、以下のように構造の誤りが発見できます。

const test = () => {
  console.log('test');
}) //最後のカッコが一個多い！

 

エラーが出てしまった時の解決方法1：何行目のエラーかチェックする

このようなエラーが出てしまうことは、初心者のうちは特に頻繁にあります。

そんな時、コードを眺めているだけではなかなか原因を見つけることができませんし、なにより退屈な作業に疲弊してしまいます。

 

原因を特定するための一つの手がかりとして、「コンソールに表示されている行数」を見てみましょう。

エラー表示の一番右側の数字が、該当の行数を示しています。

（ここの数字の部分をクリックすると、JavaScriptコードの具体的な箇所を表示してくれることもあります。）

今回記述したコードは上記画像の上の部分ですが、エラー表示の通り、確かに3行目に余計な記号がありますね。

 

エラーが出てしまった時の解決方法2：カッコの数をチェックする

上記のコードは短く、すぐに原因を特定できましたが、行数の情報だけでは特定が難しいこともあります。

そんな時は、先ほど色分けをしたように、「カッコが始まってから終わるまで」を1ブロックとして区分けし、はみ出ている記号がないかを確かめてみましょう。

 

先ほどとは別のコードで例を挙げてみます。

//カッコが始まってから終わるまでをブロックにする
const number = 1;
if (number === 1) {
  console.log("数は1です");
} else {
  console.log("数は2です");
}
} //ここが余計だった！

色分けするとわかりやすくミスを特定できますね。

これを頭のなかでできるようになることは、コードの構造をとらえる意味でも重要です。

繰り返し実践することで慣れていきましょう。

 

Unexpected tokenエラーを出さないための予防策

このエラーは、時には修正にとても時間がかかってしまうものです。

もちろん絶対に発生させないようにすることは難しいですが、開発経験を積むにつれてエラーを未然に防ぐと言う観点も重要になってきます。

ではこのエラーを防止するには、どのようなことを心がければ良いでしょうか。

それは、「外側から内側に向かって書く」ことです。

具体的には、関数や条件式などカッコで始まってカッコで終わる記述は、先にカッコから閉じカッコまでの入れ物を作り、あとから中身のコードを書いていくというものです。

 

例えば、こちらのコードは一見カッコが多く、ミスが起きてしまいそうですね。

//正しい構造のコードです
document.addEventListener('click', () => {
  console.log("clickされた");
});

 

しかし、「外側から内側」という原則にしたがって、まずはカッコから閉じカッコまで一気に書くと、このようになります。

//先に入れ物から書く
document.addEventListener('click', () => {
});

これだけを見れば、カッコの対応関係が正しいことがすぐわかりますね。

 

ここまでできたら、あとは中身のコードを記載するだけです。

//中身は後から書く
document.addEventListener('click', () => {
  console.log("clickされた");
});

このように「外側から内側」を意識できるようになると、カッコでミスをしてしまう回数がぐっと減りますよ！

 

インデントの重要性

最後に、Unexpected tokenエラーを減らすためにも重要な「インデント」について解説します。

まずは次の2つのコードを見てください。

const number = 1;

//(1)
if (number === 1) {
  console.log("数は1です");
} else {
  console.log("数は2です");
} 
//(2)
if (number === 1) {
console.log("数は1です");
} else 
 {
   console.log("数は2です");
  }

(1)も(2)も構造としてはエラーのないコードです。

しかし、明らかに(1)の方が整然としており、カッコの数も数えやすいですよね。

自分が見ても他人が見ても分かりやすいコードを書くには、インデントを徹底することが重要です。

これによって、エラーで時間を消耗することも減るので、これからJavaScriptを練習していく方は常にインデントを意識するようにしてみてください！

今回は以上です。

 

 

執筆してくれたメンター 高田悠（たかだゆう） JavaScriptを用いた実装など、フロントエンド領域の開発が得意。 なかでもWeb上での3D表現に興味があり、これまでにWebAR（AR=拡張現実）の実装案件を複数経験。 ワークライフバランスを重視し、趣味の音楽活動や釣りを楽しみつつフリーランス生活を送っている。

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！