Unexpected tokenとは？Unexpected tokenの対処法を紹介！
- システム
エンジニア - JavaScriptでプログラミングをしていてうごかなくなったときの対処方法について教えてください。
- プロジェクト
マネージャー - 分かりました。それでは、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というプロパティ自体は存在するので、エラーメッセージからは読み取りづらいです。
- システム
エンジニア - なるほど、そういうことですね。Unexpectedtokenについてよく分かりました。
- プロジェクト
マネージャー - Unexpectedtokenのメッセージが間違った箇所を適切に指摘しない場合についてもご紹介しましたのでご参考ください。
Unexpected tokenなどのエラーに注意しよう
Unexpected tokenなどのJavaScriptのエラーを解説しましたがご理解頂けましたでしょうか。慣れてくれば的外れに感じるエラーメッセージも、気にならなくなってくるでしょう。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
JavaScriptでのforEach文の使い方をご紹介！
JavaScriptでのforEachの使い方とは？ 今回は、JavaScriptでのforEach文の使い方について説明します。配列の要素を繰り返し処理する場合などに、forEach文を使用します。 for文とは違った […]
-
jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！
jQueryでのクリックイベント on(click) の使い方を紹介します！ 今回は、jQueryでのクリックイベントの使い方について説明します。 jQueryでクリックイベントを設定するには、on(click)を使用し […]
-
JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介
JavaScriptでのStringの使い方とは？ 今回は、JavaScriptでの文字列（String）の使い方について説明します。JavaScriptでは、文字列をダブルクォーテーション（”）で囲みます。 […]
-
JavaScriptのreplaceを解説します！replaceを使用した文字列の置換方法について簡単に紹介！
JavaScriptのreplaceとは？ JavaScriptで文字列の中のある単語を、別の単語に置き換えたいことはよくあると思います。そんな時に役立つのがreplaceメソッドです。replaceは最初に指定した文字 […]
-
Node.jsとは？｜Node.jsで出来ることやインストール方法について解説！
Node.jsとは？ Node.js（ノード・ジェイエス）とは、サーバーサイドで動くJavaScript実行環境のことです。 JavaScriptとは古くから存在する人気のプログラミング言語のことで、主にHTML/CSS […]
