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

JavaScriptで0と1を反転する方法のイメージJS
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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>

●注意点と対処法

0と1以外の値が入力された場合、上記の方法で正しく反転できないことがあります。

そのような場合は、値のチェックを行い、適切なエラー処理を実装することが重要です。

まとめ

この記事では、JavaScriptで0と1を反転させる5つの方法(ブール演算子、条件演算子、ビット演算子、算術演算子、配列を使った反転)と、それらを応用した実用的な例(チェックボックスの状態を反転させる、スイッチのオン・オフを切り替える)を紹介しました。

それぞれの方法には特徴があり、状況に応じて適切なものを選択することが重要です。

また、入力値が0と1以外の場合には、エラー処理を実装することが求められます。

これらの方法を理解し、実践的なスキルを身につけることで、JavaScriptのプログラミング力が向上するでしょう。

今後もJavaScriptを学び続け、さらなるスキルアップを目指してください。