メインコンテンツまでスキップ

よくあるミス JavaScript編

この章では、JavaScriptでよくあるミスを紹介します。

ブラウザのコンソールを確認しない​

JavaScriptのエラーは、ブラウザのコンソールに表示されます。そのため、エラーが発生したり、意図しない挙動になったときは、console.log()を使ったりして変数の中身を出力したりしたコンソールを確認してエラーの内容を把握しましょう。エラーの内容や、値の動きを把握することで、どこで何が問題なのかを特定しやすくなります。コンソールには、エラーの種類やエラーの出ている行番号などの情報が表示されるため、エラーを修正する際に役立ちます。 エラーの内容を調べたり、周りの人に聞くことで、簡単に解決することができます！

変数のスペルミス​

JavaScriptの変数は、スペルミスをするとエラーが発生します。例えば、let name = "Alice";と宣言した変数をconsole.log(nmae);と書いてしまうと、スペルミスのためにエラーが発生します。変数名はletやconstで宣言すると、予測変換に出てくるため、スペルミスを減らすことができます。

関数の引数のスペルミス​

getElementByIdやquerySelectorなどの関数の引数もスペルミスをするとエラーが発生します。例えば、document.getElementById("myElement");と書いているところをdocument.getElementById("myElment");とスペルミスしてしまうと、正しく要素を取得できず、エラーが発生します。関数の引数もスペルミスをしないように注意しましょう。

セミコロンの忘れ​

JavaScriptでは、行の終わりにセミコロンを付けることが一般的ですが、セミコロンを忘れるとエラーが発生することがあります。基本的にはなくても動きますが、保険程度につけておくといいかもしれません

同じ変数名を複数回宣言している​

同じ変数名を複数回宣言していると、どの変数がどの値を持っているのか分からなくなります。例えば、以下のようなコードがあります。

let name = "Alice";
let name = "Bob"; // これでエラーが発生します

このコードでは、nameという変数が2回宣言されているため、エラーが発生します。同じ変数名を複数回宣言すると、どの変数がどの値を持っているのか分からなくなり、バグの原因になることがあります。同じ変数名は1回だけ宣言するようにしましょう。

constに再代入している​

constで宣言した変数は、再代入することができません。例えば、以下のようなコードがあります。

const name = "Alice";
name = "Bob"; // これでエラーが発生します

このコードでは、nameという変数がconstで宣言されているため、再代入しようとするとエラーが発生します。constで宣言した変数は、再代入することができないため、注意しましょう。

inputなど、内容をページロード時にconstで取得・宣言してしまっている​

constで宣言した変数は、再代入することができません。そのため、constで宣言した変数に、ページロード時に取得した要素を代入してしまうと、その要素の内容を変更することができなくなります。 また、ページロード時は基本要素は空であるため、入力した内容を取得できなくなります。例えば、以下のようなコードがあります。

解決策​

イベントリスナーや関数を用いてvalueを取得するようにしましょう。

const inputElement = document.getElementById("myInput");
inputElement.addEventListener("input", function() {
    const inputValue = inputElement.value;
    console.log(inputValue);
});

このコードでは、inputElementという変数がconstで宣言されているため、再代入することができませんが、イベントリスナーを用いて、入力された内容を取得することができます。ページロード時に要素を取得しても、その要素の内容は空であるため、イベントリスナーや関数を用いて、入力された内容を取得するようにしましょう。

作成:2026-06-15 YGMS_yukkuri