JavaScriptで0と1を反転させる方法5選

はじめに
●JavaScriptで0と1を反転させる方法
●応用例とサンプルコード
- ○応用例1：チェックボックスの状態を反転する
- ○応用例2：スイッチのオン・オフを切り替える
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptで0と1を反転させる方法が5つも身につきます。

初心者でも簡単に理解できるように解説していますので、ぜひチャレンジしてみてください。

さらに、応用例とサンプルコードも用意していますので、実践的なスキルも身につけられます。

●JavaScriptで0と1を反転させる方法

ここでは、JavaScriptで0と1を反転させる方法を5つ紹介します。

それぞれの方法にサンプルコードを用意しているので、ぜひ試してみてください。

○方法1：ブール演算子を使った反転

この方法では、ブール演算子「!」を使って0と1を反転させるコードを紹介します。

この例では、0と1をブール値に変換して反転させ、再び数値に戻しています。

function reverse(value) {
  return Number(!Boolean(value));
}

console.log(reverse(0)); // 1
console.log(reverse(1)); // 0

○方法2：条件演算子を使った反転

この方法では、条件演算子「?」を使って0と1を反転させるコードを紹介します。

この例では、条件演算子で値が0なら1を、1なら0を返すようにしています。

function reverse(value) {
  return value === 0 ? 1 : 0;
}

console.log(reverse(0)); // 1
console.log(reverse(1)); // 0

○方法3：ビット演算子を使った反転

この方法では、ビット演算子「^」を使って0と1を反転させるコードを紹介します。

この例では、ビット演算子で値を1と排他的論理和（XOR）させることで、0と1を反転させています。

function reverse(value) {
  return value ^ 1;
}

console.log(reverse(0)); // 1
console.log(reverse(1)); // 0

○方法4：算術演算子を使った反転

この方法では、算術演算子「-」を使って0と1を反転させるコードを紹介します。

この例では、1から値を引くことで、0と1を反転させています。

function reverse(value) {
  return 1 - value;
}

console.log(reverse(0)); // 1
console.log(reverse(1)); // 0

○方法5：配列を使った反転

この方法では、配列を使って0と1を反転させるコードを紹介しています。

この例では、値をインデックスとして配列の要素を参照し、反転させた値を取得しています。

function reverse(value) {
  const array = [1, 0];
  return array[value];
}

console.log(reverse(0)); // 1
console.log(reverse(1)); // 0

●応用例とサンプルコード

ここでは、0と1を反転させる方法を応用した実用的な例を2つ紹介します。

それぞれの応用例にサンプルコードを用意しているので、ぜひ試してみてください。

○応用例1：チェックボックスの状態を反転する

この例では、チェックボックスの状態を反転させるコードを紹介しています。

チェックボックスの状態が0（チェックなし）なら1（チェックあり）に、1なら0に反転させます。

<!DOCTYPE html>
<html>
  <body>
    <input type="checkbox" id="myCheckbox" />
    <button onclick="reverseCheckbox()">反転</button>
    <script>
      function reverseCheckbox() {
        const checkbox = document.getElementById("myCheckbox");
        checkbox.checked = !checkbox.checked;
      }
    </script>
  </body>
</html>

○応用例2：スイッチのオン・オフを切り替える

この例では、スイッチのオン・オフを切り替えるコードを紹介しています。

スイッチの状態が0（オフ）なら1（オン）に、1なら0に反転させます。

<!DOCTYPE html>
<html>
  <body>
    <button id="mySwitch" onclick="toggleSwitch()">オフ</button>
    <script>
      function toggleSwitch() {
        const switchElement = document.getElementById("mySwitch");
        if (switchElement.textContent === "オン") {
          switchElement.textContent = "オフ";
        } else {
          switchElement.textContent = "オン";
        }
      }
    </script>
  </body>
</html>