JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでブール値（true/false）を切り替える方法をわかりやすく解説

JavaScriptでブール値（true / false）を切り替える（トグルする）最も簡単な方法は、論理NOT演算子「!」を使うことです。現在の値の前に「!」を付けて代入し直すだけで、trueとfalseを相互に反転できます。

ブール値を切り替える基本構文

let boolVal = true;
boolVal = !boolVal; // false に反転する

! 演算子は真偽値を反転させる働きがあるため、ボタンのクリックで表示・非表示を切り替えるUIや、ON / OFF スイッチの実装などで頻繁に利用されます。

実装例

以下は、ボタンをクリックするたびにブール値を切り替え、その結果を画面に表示するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-weight: 500;
        font-size: 18px;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>Toggle a boolean using JavaScript</h1>
<div class="result"></div>
<button class="Btn">Toggle</button>
<h3>Click on the above button to toggle the above boolean value</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let boolVal = true;
    resEle.innerHTML = boolVal;
    BtnEle.addEventListener("click", () => {
        boolVal = !boolVal;
        resEle.innerHTML = boolVal;
    });
</script>
</body>
</html>

コードの解説

  • let boolVal = true; — 切り替え対象となるブール値の変数を、初期値 true で宣言します。
  • boolVal = !boolVal; — クリックイベントが発生するたびに、変数の値が反転します（true ⇄ false）。
  • resEle.innerHTML = boolVal; — 反転後の値を取得して、画面上の表示に即座に反映します。

実行結果

ページを読み込んだ直後は、初期値である「true」が表示されています。

JavaScriptでブール値（true/false）を切り替える方法をわかりやすく解説

Toggleボタンをクリックすると、次のように値が「false」に切り替わります。

JavaScriptでブール値（true/false）を切り替える方法をわかりやすく解説

さらにクリックを続ければ、その都度「true」「false」と交互に切り替わることが確認できます。

その他の切り替え方法

「!」演算子以外にも、ブール値を反転させる書き方はいくつか存在します。

三項演算子を使う方法

boolVal = boolVal ? false : true;

XOR（排他的論理和）を使う方法

boolVal ^= 1; // ビット演算により true ⇄ false を反転

どの方法でも結果は同じですが、コードが最も短く、意図も明確に伝わるため、実務では「!」演算子を使った書き方が推奨されます。

  1. JavaScriptでフォームをリセット・クリアする方法｜reset()メソッドの使い方を解説

    JavaScriptを使ってフォームをリセットまたはクリアしたい場合は、reset()メソッドを使用します。このメソッドは、フォームに用意された「リセットボタン」をクリックしたときとまったく同じように動作し、フォーム内のすべての入力要素（テキストボックス、パスワード欄、チェックボックス、ラジオボタンなど）の値を初期状態に戻します。reset()メソッドの基本reset()メソッドは、対象のform要素に対して呼び出すだけで使えます。なお、リセットとは「空にする」ことではなく、HTMLのvalue属性などで指定された初期値（デフォルト値）に戻すという点に注意してください。初期値が設定されていない

  2. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>