JavaScriptのコードを実行する際、意図した通りに動作しないことが良く起こります。しかし、コンソールに表示されるエラーメッセージを読み解くことで、問題を解決できる場合がほとんどです。

今回は、エラーの読み取り方を知るために、エラーの種類とその内容を見ていきます。

エラーの種類

JavaScriptのエラーには色々なタイプのものがあり、容易に理解できるものばかりではありません。追求すればするほどエラーを細かく分けることができるのも事実です。

しかし、大きく分類するとJavaScriptのエラーには、構文エラーと論理エラーに分けることができます。エラーが発生している場合、大半の場合がどちらかの誤りであることが多いため、まずは2つの種類のエラーについて知っておくと良いでしょう。

構文エラー

構文エラーは、コードの文法が間違っている時に発生するエラーです。

プログラムが全く動作しなかったり、途中で止まってしまうような場面で発生しやすく、通常はエラーメッセージが表示されます。

開発ツールを使いながらエラーメッセージに見慣れてくると、修正も段々と慣れていきます。

構文エラーの例

次のコードは、数値をコンソールに表示させる関数です。

console.log(1); // 1

通常であればこのように表示されます。

log1

しかし、関数呼び出しの)をつけ忘れていた場合、次の構文エラーが表示されます。

console.log(1; // SyntaxError: missing ) after argument list

syntaxerror1

このエラーメッセージは、SyntaxErrorという種類のエラーで、関数呼び出しのための)が足りないということを指摘しています。

また、変数や関数などの識別子を間違えて記述すると構文エラーとなります。例えば、関数を作成するためのfunctionをfuctionとタイプミスしてしまった場合です。

fuction sayHi() { 
  console.log('こんにちは');
}
console.log(sayHi()); // SyntaxError: Unexpected identifier

syntaxerror2

このエラーもSyntaxErrorで、予期しない関数の識別子が指定されていることを指摘しています。
fuctionは、関数宣言のキーワードではないため、このような文法は認められないことになります。

もちろんエラー箇所を修正するとエラーは無くなり、関数を実行した結果（'こんにちは'）が表示されます。

// fuction → functionへ修正
function sayHi() {
  console.log('こんにちは');
}
console.log(sayHi()); // SyntaxError: Unexpected identifier

log2

このようなタイプミスは、エディターの修正機能や警告機能を使って防ぐことができます。

論理エラー

論理エラーは、プログラムが意図的した通りに動かないエラーです。

プログラム実行中に発生するため、実行時エラーやランタイムエラーと呼ばれることもあります。プログラム自体は動いているため、コードの構文が間違っているのではなく、別のものが原因でエラーが発生していることになります。

直接的なエラーメッセージが表示されないため、構文エラーよりも解決する難易度は高くなりやすいです。

論理エラーの例

次のコードは、変数に代入した値をコンソールに表示させる関数です。

let value = 'Hello!';
console.log(value);

通常であれば、このように'Hello!'と出力されるはずです。

log3

しかし、存在しない変数をコンソールに出力しようとすると次のエラーが発生します。

let value = 'Hello!';
console.log(val); //  ReferenceError: val is not defined

referenceerror1

このエラーメッセージは、ReferenceErrorという種類で、宣言されていない変数を参照しようとしたために発生しています。実際には、すでに宣言されている変数valueを使っているのではなく、変数valを使っていることが分かります。しかし、変数valは未定義のため、値を参照することができずにエラーが起きてしまいます。

以下は、if文を使った条件分岐のコードです。

let num = 5;

if (num > 10) {
  console.log('10より大きいです');
}

構文に誤りはありませんが、変数numは10より小さい数値です。しかし、if文の条件式には変数numが10より大きいと書かれています。

このコードを実行してみると、if文の条件式の評価がfalseとなるため何も表示されません。エラー文そのものも表示されないことが分かります。

noerror

このように、論理エラーの場合は構文自体は合っているため、実際に実行してみないと原因が分かりません。また、実行してみてもパッと見ただけでは原因を見つけられない場合が良くあります。処理の数だけエラーの種類もあるため、修正の難易度も上がります。

論理エラーに遭遇した時には、まずコードの周りを良く確認し、解決できなければ検索する癖を付けておくことが大切です。JavaScriptは良く使われている言語だけあり、Webで検索すると類似するエラーの解決方法を見つけられることがあります。

まとめ

今回は、JavaScriptのエラーの種類について解説しました。

慣れないうちはエラーを解決するのに時間がかかってしまうかもしれませんが、慌てる必要はありません。エラーが出てる場合は、エラー文からヒントを得ることができるため、むしろラッキーと思って良いほどです。

自力で解決ができない場合には、Web上で検索するとエラーリファレンスや類似するエラーを見つけられることがあるため、活用していきましょう。

JavaScriptエラーの関連記事

・Console API