SE

JavaScriptでプログラミングをしていてうごかなくなったときの対処方法について教えてください。

PM

分かりました。それでは、JavaScriptでプログラミングをしてい動かなくなったときに出るUnexpected tokenについてご紹介します。

Unexpected tokenとは？

Unexpected tokenとはJavaScriptで発生するエラーメッセージです。JavaScriptでプログラミングをしていると、これが出て動かないことがよくあります。Unexpected tokenは直訳すると「予期しないトークンがあります」という意味で、漠然としていて原因がわかりにくいのです。

この記事ではどういうケースでUnexpected tokenが発生しやすいのかと、他の良く出るエラーを解説します。エラーに悩まされている人は是非ご覧下さい。

JavaScriptのエラーメッセージを見る方法

初心者の人はそもそもJavaScriptのエラーメッセージを見る方法がわからないでしょう。それを見る方法は、Google Chromeの場合は画面で右クリックして、メニューの「検証（I）」を選択します。するとDevToolsが起動します。

DevToolsの上にあるタブの「Console」をクリックしましょう。これでエラーメッセージを見ることができます。

Unexpected tokenを発生させる

では早速、Unexpected tokenをわざと発生させてみましょう。例えば以下のようなケースでこのエラーは発生します。

これを実行すると、DevToolsのConsoleに以下のようにエラーが出ます。

Uncaught SyntaxError: Unexpected token ‘;’ test.html:6

余計なトークンがあるとUnexpected tokenになる

上のメッセージの「test.html:6」は6行目でエラーが発生しているという意味で、「;」が予期しないトークンということです。これは「i < 5;;」の;（セミコロン）が1つ余計にあることが原因です。;を一つ取り除いて「i < 5;」とすれば、以下のように動作します。

No. 0
No. 1
No. 2
No. 3
No. 4

こういったタイプミスはよくあるので、Unexpected tokenは頻繁に発生します。ただこのようなケースはまだ分かりやすい方なのです。なおconsole.logはDevToolsのConsoleに出力をするメソッドです。

変数や関数の名前に注意

変巣や関数の名前に問題がある場合も、Unexpected tokenが出ます。

test-valも test-funcも「Unexpected token ‘-‘」が発生します。JavaScriptの変数や関数の名前に使える記号は$と_だけなので、test_valやtest_funcにしましょう。

何かが足りない時でも発生する

Unexpected tokenは余計な物がある時だけではなく、以下のように何かが足りない時にも出ます。これがやっかいなところです。

これを実行すると、以下のようなエラーが出ます。

Uncaught SyntaxError: Unexpected token ‘{‘

しかし{が余計と言われても、このif文の{は必要です。初心者はどうしたらよいかわからなくなってしまうでしょう。

上記のエラーは以下のように直せばOKです。)が足りなかったということです。

あるはずの)の前に{が出てきたので、{が余計だというUnexpected tokenのエラーが出てしまったということです。)が無いというエラーが出ればいいのにと思いますが、仕方がないのでしょう。

Unexpected end of inputは分かりにくい？

上記のサンプルに近い状況で、Unexpected end of inputというエラーが出る場合があります。以下のようなケースで発生します。

最後に}がありません、カッコの閉じ忘れです。この様に単純なプログラムであれば忘れることはまずありませんが、カッコが何重ものネストになっているとカッコを閉じ忘れることがあるので、このエラーを見ることが多くなるでしょう。

Uncaught ReferenceErrorはよく発生する

Uncaught ReferenceErrorも良く見かけるエラーです。以下のようなケースで発生します。

これを実行すると以下のエラーが出ます。

Uncaught ReferenceError: val is not defined

変数をvalueで宣言しているのに、その後にvalでアクセスしているので、そのような変数は無いですよというエラーが出ます。良くあるエラーですが、これはまだ分かりやすいでしょう。

Cannot read property ～ of undefinedはハマりやすい

Cannot read property～というエラーは何が間違っているのかわかりにくい場合があります。

これを実行すると、Consoleに「undefined」とだけ表示されます。エラーにはなりません。ところが、

この場合は以下のエラーが出ます。

Uncaught TypeError: Cannot read property ‘length’ of undefined

Cannot read property ～ of undefinedに要注意

JavaScriptはこのソースのstr.mojiのように存在しないプロパティにアクセスしてもエラーにはなりません。しかし、その存在しないプロパティのプロパティにアクセスするとこのCannot read property ～ of undefinedが出るのです。

str.mojiの時点でエラーにならないため、分かりにくく感じる人もいるでしょう。

また以下のようにオブジェクトの扱いで間違いをした場合もこのエラーが出ます。

エラーメッセージに惑わされないようにしよう

上のオブジェクトの例ではキーをobjKeyではなくobjeKeyと間違えて指定しているため、

Uncaught TypeError: Cannot read property ‘length’ of undefined

というエラーが出ます。しかしlengthというプロパティは本来はあるので、このエラーを見て、あるはずのプロパティがなぜないことで混乱しやすいのです。

配列でもわかりにくいエラーが発生する

配列でも同様にCannot read property～が発生します。

このサンプルは存在しない5番目にアクセスしていますが、ただアクセスするだけならundefinedでエラーにはなりません。しかし.lengthにアクセスすると、

Uncaught TypeError: Cannot read property ‘length’ of undefined

というエラーになります。この場合もlengthというプロパティ自体は存在するので、エラーメッセージからは読み取りづらいです。

SE

なるほど、そういうことですね。Unexpectedtokenについてよく分かりました。

PM

Unexpectedtokenのメッセージが間違った箇所を適切に指摘しない場合についてもご紹介しましたのでご参考ください。

Unexpected tokenなどのエラーに注意しよう

Unexpected tokenなどのJavaScriptのエラーを解説しましたがご理解頂けましたでしょうか。慣れてくれば的外れに感じるエラーメッセージも、気にならなくなってくるでしょう。