【初心者向け】JavaScriptでよくあるエラーと解決方法をわかりやすく解説

2024年7月7日

今回はJavaScriptでよくあるエラーと解消方法を分かりやすく解説します。

今まさにエラーにぶち当たっているという人がこの記事を読んで解決できれば幸いです。

では早速いってみましょう。

1. SyntaxError: Unexpected Token

「SyntaxError: Unexpected Token」は、コードの文法ミスやタイポが原因です。

// 間違った例
let message = 'Hello World

// 正しい例
let message = 'Hello World';

「ReferenceError: x is not defined」は、変数が宣言される前に使用されてしまっているのが原因です。

// 間違った例
console.log(x);
let x = 10;

// 正しい例
let x = 10;
console.log(x);

//変数は使用する前に宣言しましょう。

「TypeError: Cannot read property ‘x’ of undefined」は、オブジェクトのプロパティやメソッドにアクセスしようとしたとき、そのオブジェクトが undefined である場合に発生します。

// 間違った例
let user;
console.log(user.name);

// 正しい例
let user = {};
console.log(user?.name);

// 変数が undefined ではないことを確認してからプロパティにアクセスします。

「Uncaught RangeError: Maximum call stack size exceeded」は、無限ループや無限再帰が原因です。

// 間違った例
function recurse() {
    recurse();
}
recurse();

// 関数を呼び出し、呼び出されたらまた関数を呼び出す無限ループになっている。

// 正しい例
function recurse(n) {
    if (n <= 0) return;
    recurse(n - 1);
}
recurse(10);

// 再帰呼び出しの終了条件を適切に設定します。

「SyntaxError: Missing ‘}’ or ‘)’」の原因は、括弧の開き閉じが一致していないことです。

タイポみたいな感じですね。

// 間違った例
if (true {
    console.log('Hello');

// 正しい例
if (true) {
    console.log('Hello');
}

// 括弧を正しく閉じましょう。

エディタの自動補完によってミスが防がれることもありますが、

手動での操作を繰り返していく中では時々発生してしまいます。

凡ミスですが、ちょっとJSに慣れてくると難しいバグを探してしまって意外と見落とすので

初心を忘れずにこういったパターンがあることも覚えておきましょう。

「Unexpected Identifier」は、コードの文法が間違っているときに発生します。

// 間違った例
let 1variable = 'test';

// 変数名の最初に数字は入れられない

// 正しい例
let variable1 = 'test';

// 変数名を正しく指定します。

「Off-by-one Errors」は、ループやインデックス操作での境界条件の設定ミスです。

// 間違った例
let arr = [1, 2, 3, 4];
for (let i = 0; i <= arr.length; i++) {
    console.log(arr[i]);
}

// 正しい例
let arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

// 正しいループ条件を設定します。

「Using == instead of ===」は、型変換による比較の問題が発生している時に出ます。

// 間違った例
let num = 0;
if (num == '0') {
    console.log('Equal');
}

// ==では厳密なイコールとは言えない

let num = 0;
if (num === 0) {
    console.log('Equal');
}

// 型を厳密に比較するために === を使用します。

これらのエラーを避けるためには、

コードを書く際に注意深くチェックし、デバッガやコードエディタの支援機能を活用することが重要です。

また、単体テストやコードレビューを通じてバグを早期に発見することも有効ですね。

エディタなどで補完機能もありますが、人間が理解していないと根本的なエラー解決が難しくなってしまいます。

エラーに出会ったらこの記事を見て原因究明に使ってください！

結構見たことあるやつでした

よかったらシェアしてね！