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要素を作成するようにする。

配列や関数についてもまた別途まとめて行きたい所存です。