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

はじめに
●JavaScriptのXOR演算子とは
- ○XOR演算子の基本
●XOR演算子の使い方
●注意点と対処法
●応用例とサンプルコード
- ○サンプルコード6：ビットマスクを利用したデータの圧縮
- ○サンプルコード7：XORを活用した画像処理
まとめ

はじめに

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

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

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

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

●JavaScriptのXOR演算子とは

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

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

○XOR演算子の基本

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

A ^ A = 0
A ^ 0 = A
A ^ B = B ^ A
(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>