プログラマーへの道 #25 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。

checkboxのイベントについて

checkboxのイベントを登録する際に "change" イベントを使いました。 値が変更されたときに発火するイベントのようなので、"click" イベントよりも適切かなと思っています。

HTMLElement: change イベント - Web API | MDN

Visual Studio Code のオートフォーマットについて

以下の記事で説明されています。 "Format On Save" にチェックを付けると保存時に自動的にインデントが揃うようになります。

VisualStudioCodeに自動整形機能があった - Qiita

イベントリスナーの外の変数を参照するプログラムについて

動画中の以下のコードでは、チェックボックスのイベントリスナー内で deleteAllMemos という変数を参照しています。 このようにイベントリスナー外の変数がHTML要素としての情報を持っていることがあります（今回は deleteAllMemos がチェックボックスの状態を持っていることになります）。 その場合は、インベントリスナー内でその変数を利用することによってイベントリスナーの処理を分岐することができます。

const deleteAllMemos = document.getElementById("id-delete-all-memos")
deleteAllMemos.addEventListener("change", (event) => {
  const checkboxes = document.getElementsByClassName("class-checkbox")
  if (checkboxes.length == 0) {
    return
  }

  Array.from(checkboxes).forEach((checkbox) => {
    //ここで deleteAllMemos を参照している。
    if (deleteAllMemos.checked == true) {
      checkbox.checked = true
    } else {
      checkbox.checked = false
    }
  })
})

一方で以下のように if 文の直前でチェックボックスのHTML要素を取得しても同じことができます。 動画ではHTML要素を取得する部分を一箇所にしておきたいと思ったので、↑の方法で実装しましたが、どちらでもいいと思います。

//省略

    const deleteAllMemos = document.getElementById("id-delete-all-memos")
    if (deleteAllMemos.checked == true) {
      checkbox.checked = true
    } else {
      checkbox.checked = false
    }

//省略