JavaScriptでXORを使いこなす!5つの実践例とコツ

JavaScriptでXOR演算子を使いこなす方法を解説する記事のイメージJS
この記事は約9分で読めます。

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

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

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

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

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

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

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

はじめに

この記事を読めば、JavaScriptでXOR演算子を使いこなすことができるようになります。

XOR演算子は、初心者にとっては少し難しいかもしれませんが、実は非常に便利な機能を持っています。

この記事では、XOR演算子の基本から、実践的な使い方、応用例までをわかりやすく解説します。

サンプルコードも豊富に用意しているので、ぜひ実際に試してみてください。

●JavaScriptのXOR演算子とは

XOR演算子は、ビット単位での排他的論理和を表す演算子で、JavaScriptでは”^”(キャレット)で表現されます。

XORとは、Exclusive OR(排他的論理和)の略で、2つのビットが異なる場合に1、同じ場合に0を返す演算です。

○XOR演算子の基本

XOR演算子は、次のような性質を持っています。

  1. A ^ A = 0
  2. A ^ 0 = A
  3. A ^ B = B ^ A
  4. (A ^ B) ^ C = A ^ (B ^ C)

これらの性質を利用することで、さまざまな応用が可能です。

●XOR演算子の使い方

ここでは、XOR演算子を使った実践的な例を紹介します。

○サンプルコード1:XOR演算子で2つの数字の入れ替え

このコードでは、XOR演算子を使って2つの数字を入れ替える方法を紹介しています。

この例では、aとbの値を入れ替えています。

let a = 5;
let b = 10;

a = a ^ b;
b = a ^ b;
a = a ^ b;

console.log(a); // 10
console.log(b); // 5

○サンプルコード2:XORを用いたパリティチェック

このコードでは、XORを使ってパリティチェックを行う方法を紹介しています。

この例では、1ビットごとにXORを計算し、奇数の1がある場合には1、偶数の場合には0を返します。

function parityCheck(n) {
  let parity = 0;
  while (n) {
    parity ^= n & 1;
    n >>= 1;
  }
  return parity;
}

console.log(parityCheck(7)); // 1
console.log(parityCheck(10)); // 0

○サンプルコード3:XORを利用した暗号化・復号化

このコードでは、XOR演算子を使って文字列の暗号化と復号化を行う方法を紹介しています。

この例では、秘密キーとして同じキーを使用して、文字列を暗号化し、再び復号化しています。

function xorCipher(input, key) {
  let output = "";
  for (let i = 0; i < input.length; i++) {
    output += String.fromCharCode(input.charCodeAt(i) ^ key.charCodeAt(i % key.length));
  }
  return output;
}

let text = "こんにちは";
let secretKey = "秘密キー";

let encrypted = xorCipher(text, secretKey);
let decrypted = xorCipher(encrypted, secretKey);

console.log(encrypted);
console.log(decrypted); // こんにちは

○サンプルコード4:XORを使った独自のハッシュ関数

このコードでは、XOR演算子を用いて独自のハッシュ関数を作成する方法を紹介しています。

この例では、文字列の各文字をXORして最終的なハッシュ値を生成しています。

function xorHash(input) {
  let hash = 0;
  for (let i = 0; i < input.length; i++) {
    hash ^= input.charCodeAt(i);
  }
  return hash;
}

let text1 = "Hello, World!";
let text2 = "Hello, JPSM";

console.log(xorHash(text1));
console.log(xorHash(text2));

○サンプルコード5:XORを活用したデータのエラー検出

このコードでは、XORを使ってデータのエラー検出を行う方法を紹介しています。

この例では、送信データと検査用のパリティビットをXORし、エラーが発生しているかどうかを確認しています。

function xorErrorDetection(data, parity) {
  let result = 0;
  for (let i = 0; i < data.length; i++) {
    result ^= data[i];
  }
  return result === parity;
}

let data = [1, 0, 1, 1, 0];
let parity = 1;

console.log(xorErrorDetection(data, parity)); // true

●注意点と対処法

XOR演算子は強力なツールである一方で、適切な使い方をしないとセキュリティ上の問題が生じることがあります。

暗号化やハッシュ関数の実装には十分注意し、必要であれば専門家の意見を求めることが重要です。

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

XOR演算子は、さまざまな応用が可能です。

○サンプルコード6:ビットマスクを利用したデータの圧縮

このコードでは、ビットマスクとXOR演算子を使ってデータの圧縮を行う方法を紹介しています。

この例では、2つの異なるデータセットを1つの変数に格納し、それぞれのデータを取り出す方法を説明しています。

function compressData(data1, data2) {
  return (data1 << 4) | data2;
}

function extractData1(compressedData) {
  return compressedData >> 4;
}

function extractData2(compressedData) {
  return compressedData & 0b1111;
}

let data1 = 5; // 0b0101
let data2 = 10; // 0b1010

let compressedData = compressData(data1, data2);
console.log(compressedData); // 90

console.log(extractData1(compressedData)); // 5
console.log(extractData2(compressedData)); // 10

○サンプルコード7:XORを活用した画像処理

このコードでは、XOR演算子を使って画像の特定の部分の色を反転させる方法を紹介しています。

この例では、HTMLのcanvas要素を使って画像を描画し、マウスでドラッグした範囲の色を反転させています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>XORを活用した画像処理</title>
  <style>
    canvas { border: 1px solid black; }
  </style>
</head>
<body>
  <canvas id="canvas" width="300" height="200"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // 画像を描画
    const img = new Image();
    img.src = 'sample.jpg';
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

    // ドラッグ開始位置を保存
    let startX, startY;
    canvas.addEventListener('mousedown', (e) => {
      startX = e.clientX;
      startY = e.clientY;
    });

    // ドラッグ終了位置で画像の色を反転
    canvas.addEventListener('mouseup', (e) => {
      let endX = e.clientX;
      let endY = e.clientY;

      // 選択範囲の画像データを取得
      const imageData = ctx.getImageData(startX, startY, endX - startX, endY - startY);

      // 画像データの色を反転
      for (let i = 0; i < imageData.data.length; i += 4) {
        imageData.data[i] ^= 255; // Red
        imageData.data[i + 1] ^= 255; // Green
        imageData.data[i + 2] ^= 255; // Blue
      }

      // 反転した画像データを描画
      ctx.putImageData(imageData, startX, startY);
    });
  </script>
</body>
</html>

まとめ

本記事では、JavaScriptのXOR演算子について紹介し、その基本的な使い方や応用例を説明しました。

XOR演算子は、データの操作やエラー検出、暗号化など幅広い用途に利用できるため、プログラミングにおいて非常に便利なツールです。

ただし、適切な使い方をしないとセキュリティ上の問題が生じることがあるため、注意して利用しましょう。