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

初心者向けにJavaScriptで「Unexpected token」というエラーが出る原因と対処法について現役エンジニアが解説しています。Unexpected tokenとは翻訳をすると予期しないトークンになります。具体的には}や<の文字列が不必要に入ってしまっている場合にこのエラーになります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで「Unexpected token」というエラーが出る原因と対処法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで「Unexpected token」というエラーが出る原因と対処法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

  1. 「Unexpected token」とは
  2. エラーが出る原因
  3. エラーを出さないための対処法

 

「Unexpected token」とは

翻訳をすると「予期しないトークン」となります。

プログラミングウィしていると良く見かけるエラーなのですが、解説しているサイトはあまり見かけないかもしれません。実際には、このメッセージの後に「<」,「}」などのトークンも表示されるかと思います。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

エラーが出る原因

訳の通り、「予期しないトークン」がありますよ。と言うエラーメッセージで、JavaScript内の記述ミスが原因かと思われます。

具体例を見てみましょう。

1   <!DOCTYPE html>
2     <html>
3       <head>
4         <meta charset="utf-8">
5         <title>Unexpected token</title>
6       </head>
7       <body>
8        <h1>Unexpected token</h1>
9       <script>
10       console.log("1");
11        }
12       console.log("2");
13     </script>
14     </body>
15   </html>

これを実行すると「Uncaught SyntaxError: Unexpected token ‘}’」の様なエラーメッセージが表示されるかと思います。気づかれた方も多いいかと思いますが、「}」が不要に入っていますね。
 

エラーを出さないための対処法

上記はとても簡単な例を記載しましたが、実装レベルでは、簡単に見つからないケースもあるかと思います。例えば

1  btn.addEventListener('click', function() {
2  var text = "abc"
3  for (i = 0; i < text.length; i++) {
4  console.log(text.charAt(i))
5  }}});

こんな感じに記載していると何処に問題が隠れているのか?分かり難いいですね。これでも簡単な方ですが、もっと複雑になると余計に特例が難しくなります。

そこで、エラーを出さないようにしたり、出たとしても特定しやすくする為にお勧めなのが、エディターの利用です。専用のエディターを利用すれば、このようなトークンが不正になっている場所を視覚的に表示してくれたりします。また、トークンの場所にカーソルを合わせると、対になる部分を示してくれたりと問題の発見に役立ててもらえます。

また、エディターを利用しない場合は、綺麗に書くことを心がけましょう。先ほどの例も下記の様に書き換えるだけでエラーの特定に役立ちます。

1  btn.addEventListener(
2    'click', function() {
3      var text = "abc"
4      for (i = 0; i < text.length; i++) {
5        console.log(text.charAt(i))
6      }
7    }
8  });

どうでしょうか?最後の部分に違和感を感じてもらえたらと思います。

第一線で活躍されている方でもたまに「Unexpected token」エラーは出してしまいます。重要なのは、出しにくくする工夫とエラーが出た時に直ぐに原因を特定する事が出来るか?になるかと思いますので、今回の記事を参考にしてみて下さい。
 

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。