.NET開発者のためのブログメディア
Unexpected tokenとは？Unexpected tokenの対処法を紹介！
- 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をわざと発生させてみましょう。例えば以下のようなケースでこのエラーは発生します。
|
1
2
3
4
|
for (let i = 0; i < 5;; ++i) {
console.log('No. ' + i);
}
|
これを実行すると、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が出ます。
|
1
2
3
4
5
6
7
8
9
|
var test-val = 3;
console.log(test-val);
function test-func() {
console.log('test');
}
test-func();
|
test-valも test-funcも「Unexpected token ‘-‘」が発生します。JavaScriptの変数や関数の名前に使える記号は$と_だけなので、test_valやtest_funcにしましょう。
何かが足りない時でも発生する
Unexpected tokenは余計な物がある時だけではなく、以下のように何かが足りない時にも出ます。これがやっかいなところです。
|
1
2
3
4
5
|
var val = 5;
if ((1 <= val) && (val <= 10) {
console.log(val + 'は1から10の間です。');
}
|
これを実行すると、以下のようなエラーが出ます。
Uncaught SyntaxError: Unexpected token ‘{‘
しかし{が余計と言われても、このif文の{は必要です。初心者はどうしたらよいかわからなくなってしまうでしょう。
上記のエラーは以下のように直せばOKです。)が足りなかったということです。
|
1
2
|
if ((1 <= val) && (val <= 10)) {
|
あるはずの)の前に{が出てきたので、{が余計だというUnexpected tokenのエラーが出てしまったということです。)が無いというエラーが出ればいいのにと思いますが、仕方がないのでしょう。
Unexpected end of inputは分かりにくい？
上記のサンプルに近い状況で、Unexpected end of inputというエラーが出る場合があります。以下のようなケースで発生します。
|
1
2
3
4
|
var val = 5;
if ((1 <= val) && (val <= 10)) {
console.log(val + 'は1から10の間です。');
|
最後に}がありません、カッコの閉じ忘れです。この様に単純なプログラムであれば忘れることはまずありませんが、カッコが何重ものネストになっているとカッコを閉じ忘れることがあるので、このエラーを見ることが多くなるでしょう。
Uncaught ReferenceErrorはよく発生する
Uncaught ReferenceErrorも良く見かけるエラーです。以下のようなケースで発生します。
|
1
2
3
4
5
|
var value = 5;
if ((1 <= val) && (val <= 10)) {
console.log(val + 'は1から10の間です。');
}
|
これを実行すると以下のエラーが出ます。
Uncaught ReferenceError: val is not defined
変数をvalueで宣言しているのに、その後にvalでアクセスしているので、そのような変数は無いですよというエラーが出ます。良くあるエラーですが、これはまだ分かりやすいでしょう。
Cannot read property ～ of undefinedはハマりやすい
Cannot read property～というエラーは何が間違っているのかわかりにくい場合があります。
|
1
2
3
|
var str = 'あいうえお';
console.log(str.moji);
|
これを実行すると、Consoleに「undefined」とだけ表示されます。エラーにはなりません。ところが、
|
1
2
3
|
var str = 'あいうえお';
console.log(str.moji.length);
|
この場合は以下のエラーが出ます。
Uncaught TypeError: Cannot read property ‘length’ of undefined
Cannot read property ～ of undefinedに要注意
JavaScriptはこのソースのstr.mojiのように存在しないプロパティにアクセスしてもエラーにはなりません。しかし、その存在しないプロパティのプロパティにアクセスするとこのCannot read property ～ of undefinedが出るのです。
str.mojiの時点でエラーにならないため、分かりにくく感じる人もいるでしょう。
また以下のようにオブジェクトの扱いで間違いをした場合もこのエラーが出ます。
|
1
2
3
4
|
var obj = { objKey: 'objValue' };
console.log(obj['objeKey']);
console.log(obj['objeKey'].length);
|
エラーメッセージに惑わされないようにしよう
上のオブジェクトの例ではキーをobjKeyではなくobjeKeyと間違えて指定しているため、
Uncaught TypeError: Cannot read property ‘length’ of undefined
というエラーが出ます。しかしlengthというプロパティは本来はあるので、このエラーを見て、あるはずのプロパティがなぜないことで混乱しやすいのです。
配列でもわかりにくいエラーが発生する
配列でも同様にCannot read property～が発生します。
|
1
2
3
4
|
var ary = [0, 1, 2, 3, 4];
console.log(ary[5]);
console.log(ary[5].length);
|
このサンプルは存在しない5番目にアクセスしていますが、ただアクセスするだけならundefinedでエラーにはなりません。しかし.lengthにアクセスすると、
Uncaught TypeError: Cannot read property ‘length’ of undefined
というエラーになります。この場合もlengthというプロパティ自体は存在するので、エラーメッセージからは読み取りづらいです。
- SE
- なるほど、そういうことですね。Unexpectedtokenについてよく分かりました。
- PM
- Unexpectedtokenのメッセージが間違った箇所を適切に指摘しない場合についてもご紹介しましたのでご参考ください。
Unexpected tokenなどのエラーに注意しよう
Unexpected tokenなどのJavaScriptのエラーを解説しましたがご理解頂けましたでしょうか。慣れてくれば的外れに感じるエラーメッセージも、気にならなくなってくるでしょう。
Search キーワード検索
Popular 人気の記事
reccomended おすすめ記事
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)