JavaScriptの変数宣言とイベント発火でよく見るエラー集
・JavaScriptで変数を宣言する時にvarではなくletが良いと聞いたけど、それって何が理由でそう言われてるんだっけ……?
・関数の宣言をしたいのになぜかしょっちゅう見たことがあるエラーが表示される……これ何だっけ…
よく見かけるけれど、つい忘れがちな部分を備忘録としてまとめました。
変数の型について
変数の型 | const | let | var |
---|---|---|---|
変数の代入 | × | ○ | ○ |
変数の再宣言 | × | × | ○ |
ブロックスコープ | ○ | ○ | × |
関数スコープ | ○ | ○ | ○ |
constは定数(固定された値)を宣言する際に使用する。
変数の宣言は基本的にletを使用する。
varの使用は非推奨。
変数の再宣言とは
letで変数を再宣言した場合
let a = 1;
let a = 10;
console.log(a) // Uncaught SyntaxError: Identifier 'a' has already been declared
「既にその変数は宣言されています」とエラー文が出力される。
varで変数を再宣言した場合
var b = 1;
var b = 10;
console.log(b); // 10
後から宣言された値「10」が出力される。
ブロックスコープとは
{ }で囲まれた範囲。forやifなども含む。
関数スコープとは
function などで宣言された範囲。
同じ名前で変数が再宣言されてしまうこと、関数スコープのみでしか使用できないので影響範囲が広いことからvarでの変数宣言は非推奨となっている。
イベントの発火について
クリックした際にイベントが発火する処理を書きたい場合、HTMLの属性でイベントの発火を指定しない。
ダメなコード例
<div id=”btn” onclick = “関数名() ”>
イベント発火の処理をしたい場合はaddeventlistener (‘ トリガーになる動作 ’ , 関数名() ); を使用してJavaScript側に記載する。
理由
HTMLは文章構造を定義するためのものなので、JavaScriptの動作を記載してしまうと役割が混合してしまい、メンテナンスや変更があった際にコードの可読性やメンテナンス性が下がるため。
エラー文が出力される
Cannot read properties of null
「プロパティが不足しています」と言う時に表示されるエラー文。
指定したDOM要素(idやクラスなど)がない場合に発生する事が多い。
解決策
要素がちゃんと宣言されているか、有効なスコープ内に宣言がされているかを確認する。
hoge.addEventListener is not a function
表示されるケースは以下のようなケース。
<input type="checkbox" name="hoge" id="dog">犬
<input type="checkbox" name="hoge" id="cat" checked>猫
const hoge = document.getElementsByClassName('hoge');
hoge.addEventListener('change',check);
function check(){
let cats = document.getElementById('cat');
cats.checked = false;
}
document.getElementsByClassNameでDOM要素を取得すると、idと違ってname属性は複数あるためHTMLcollectionという配列のような形で要素が取得されてしまうため、addEventListenerでイベント発火ができない。
解決策
document.getElementsByIdなど、複数の要素が取得できないものを使用する。
DOM要素の追加について
inner HTMLは非推奨である。
理由
- フォームで入力された内容をinnerHTMLで追加されるとバグを起こす可能性がある。
- SQLインジェクションなどの危険性もある。
なぜなら……タグの中にタグが追加される危険性あるから。
解決策
createElementメソッドはJavaScriptのオブジェクト形式でHTML要素を作成するようにする。
配列や関数についてもまた別途まとめて行きたい所存です。