idを使う場合にforループは必要ない理由~counterプログラムを作って感じた事〜

はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。前回投稿した記事と関連した内容になります。JavaScriptを使用して簡単なcounterプログラムを作った時に感じたidとforループの関係性についてまとめてみました。

JavaScriptで作ったcounterプログラムの概要

counterプログラムの内容は前回の記事と重複するため、リンクを貼らせて頂きます。

idとforループの関係性について

idとclassの使い方に迷っていた為、idとclassの使い方の違いと、それぞれに適した処理方法について詳しく考えていました。

1. idは一意である
HTMLのid属性は、1つのページ内で一意（ユニーク）でなければなりません。つまり、同じidを持つ要素が複数存在することは基本的に許されていません。
そのため、idを使う場合、1つの特定の要素に対して直接操作を行います。

今回、リセットボタンにid="js-reset-button"をつけました。idを使ってそのボタンだけを操作できるため、ループで複数の要素を回す必要はありません。

const resetButton = document.getElementById("js-reset-button");
resetButton.addEventListener("click", function() {
  // リセットボタンが押されたときの処理
});

このコードでは、getElementById()で1つの要素だけを取得できるため、特定の処理を簡単に適用できます。idが一意であることを活かして、処理がシンプルになるのです。

2. classは複数の要素に適用される
一方、class属性は複数の要素に共通して適用でき、同じクラスを持つ要素が複数存在するのが一般的です。この場合、同じクラスを持つ全ての要素に対して同じ処理を行うため、ループが必要になります。

例えば、class="js-button"を複数のボタンに設定し、全てのボタンにクリックイベントを追加したい場合、document.getElementsByClassName()を使って全てのボタンを取得し、ループで各要素に対してイベントを設定します。

const buttons = document.getElementsByClassName("js-button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    // ボタンがクリックされたときの処理
  });
}

このように、クラスを使って複数の要素に共通の処理を行いたい場合は、ループが必要になります。

まとめ

idは一意であるため、その要素に対して直接処理を行います。ループを使う必要はありません。
classは複数要素に共通して適用されるため、全ての要素に処理を行う場合はループが必要です。
idとclassを適切に使い分けることで、HTMLとJavaScriptのコードをシンプルかつ効率的に書くことができます。特定の要素にはidを、複数の要素に同じ処理をしたい場合はclassを使い、ループを活用する事が有効だと考えました。

最後までご覧いただき本当にありがとうございました！！