JavaScriptの復習③

はじめに

今回は、Chapter4の復習をまとめていきます。これを踏まえて、CSSのクラスを切り替えで出来ることを考えます。

背景色を切り替える

See the Pen 背景色を切り替える by Uka Suzuki (@uukasuzuki_) on CodePen.

JavaScriptのコード解説

const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  document.body.classList.toggle("dark-theme");
  if (btn.textContent === "ダークモードにする") {
    btn.textContent = "ライトモードにする";
  } else {
    btn.textContent = "ダークモードにする";
  }
});

上記のコードを分解すると、下記の通りになります。

const btn = document.querySelector("#btn");

• HTMLドキュメント内にあるidがbtnである要素を取得し、それを変数btnに格納しています。.querySelector メソッドを使って、CSS セレクタ（ここでは #btn）に一致する最初の要素を選択しています。

btn.addEventListener("click", () => {

• btn.addEventListener("click", () => { は、ボタンのような btn 要素に対して「クリックイベント」が発生したときに、指定された処理（関数）を実行するためのコードです。

document.body.classList.toggle("dark-theme");

• document.body.classList.toggle("dark-theme");は、body 要素に対してクラス名 "dark-theme" を付けたり外したりするコードです。

• classList.toggle("dark-theme"): "dark-theme" というクラスが body 要素にすでに存在している場合はそのクラスを削除し、存在していない場合はクラスを追加します。

if (btn.textContent === "ダークモードにする") {
    btn.textContent = "ライトモードにする";
} else {
    btn.textContent = "ダークモードにする";
}

• if (btn.textContent === "ダークモードにする")は、btnのテキスト内容 (textContent)が "ダークモードにする"と等しいかをチェックします。

• btn.textContent = "ライトモードにする";は、もしボタンのテキストが "ダークモードにする"であれば、これを "ライトモードにする"に変更します。

• else { btn.textContent = "ダークモードにする"; }は、テキストが "ダークモードにする" でない場合は、テキストを "ダークモードにする"に戻します。
  
  このif~else文の構成を簡略化して、分かりやすくしたコードが以下の通りになります。

if (条件) {
  // 条件が true の場合に実行される処理
} else {
  // 条件が false の場合に実行される処理
}

• if(条件)の条件の部分には、trueまたはfalseになる評価式（論理式）を記述します。ここがtrueの場合、ifブロック内の処理が実行されます。
  
  elseは、ifの条件がfalseだった場合、実行される処理をelseブロック内に記述します。

比較演算子の種類

演算子	意味	例
A === B	AとBが厳密に等しいか	5 === '5'は「false」
A == B	AとBが等しいか	5 == '5'は「true」
A > B	AがBを超えるか	5 > 3 は「true」
A < B	AがB未満か	3 < 5 は「true」
A >= B	AがB以上か	5 >= 3 は「true」
A <= B	AがB以下か	3 <= 5 は「true」
A !== B	AとBが厳密に等しくないか	5 !== '5'は「true」
A != B	AとBが等しくないか	5 != '6'は「true」

まとめ

今回は、if~else文の詳細についてまとめました。次回も引き続き、CSSでの切り替えや非表示について書き留めていきます。