では、JavaScriptの ビット演算子とシフト演算子 を、プログラミング初心者向けにわかりやすく、例題付きで解説します。
1. ビット演算とは？
ビット演算とは 数字を2進数（0と1の並び）に変換して、1ビットずつ計算する演算 のことです。
普通の足し算や掛け算とは少し違いますが、コンピュータは内部で2進数で計算しているので便利な方法です。
1-1. ビット論理積（AND） &
ルール
対応するビットが 両方とも1のときだけ1 になります。
例：
10 (10進数) → 1010 (2進数)
6 (10進数) → 0110 (2進数)
1010 & 0110 = 0010 → 2 (10進数)
let a = 10;
let b = 6;
console.log(a & b); // 2
💡 覚え方: 「両方とも1じゃなきゃダメ！」
1-2. ビット論理和（OR） |
ルール
対応するビットが どちらか一方でも1 なら1になります。
例：
10 → 1010
6 → 0110
1010 | 0110 = 1110 → 14
console.log(a | b); // 14
💡 覚え方: 「どっちか1なら1！」
1-3. ビット排他的論理和（XOR） ^
ルール
対応するビットが 違う場合だけ1 になります。
例：
10 → 1010
6 → 0110
1010 ^ 0110 = 1100 → 12
console.log(a ^ b); // 12
💡 覚え方: 「違うなら1、同じなら0！」
1-4. ビット論理否定（NOT） ~
ルール
すべてのビットを反転させます。0は1に、1は0に。
例：
10 → 1010
~10 → 0101 (ただしJavaScriptでは符号付き32ビットで計算されるので結果は-11)
console.log(~a); // -11
💡 注意: JavaScriptでは符号付き整数として扱うため、結果はマイナスになることがあります。
2. シフト演算とは？
シフト演算は ビットを左や右にずらす操作 です。
左にずらすと掛け算、右にずらすと割り算のような動きになります。
2-1. 左シフト <<
ルール
ビットを左にずらすと、右側に0が入ります。
let n = 5; // 5 → 0101
console.log(n << 1); // 10 → 1010
console.log(n << 2); // 20 → 10100
💡 覚え方: 「左に1つずらす = 2倍、左に2つずらす = 4倍」
2-2. 右シフト >>
ルール
ビットを右にずらします。符号（正負）は保持されます。
let m = 20; // 20 → 10100
console.log(m >> 1); // 10 → 1010
console.log(m >> 2); // 5 → 0101
💡 覚え方: 「右に1つずらす = 2で割る、右に2つずらす = 4で割る」
2-3. 符号なし右シフト >>>
ルール
右にずらすけど、正負に関係なく左端に0が入ります。負の数を扱うときに便利です。
let p = -8;
console.log(p >>> 1); // 大きな正の数に変わる
3. 初心者向けまとめ
| 演算子 | 役割 | 例 | 結果 |
|---|---|---|---|
& | AND | 10 & 6 | 2 |
| ` | ` | OR | 10 | 6 |
^ | XOR | 10 ^ 6 | 12 |
~ | NOT | ~10 | -11 |
<< | 左シフト | 5 << 1 | 10 |
>> | 右シフト | 20 >> 1 | 10 |
>>> | 符号なし右シフト | -8 >>> 1 | 2147483644 |
4. 練習問題
12 & 5は何になる？7 | 2は何になる？8 ^ 3は？~5は？3 << 2は？16 >> 3は？
5. 練習問題と解答・解説
問題 1
12 & 5 は何になる？
ステップ解説
- 12 → 1100（2進数）
- 5 → 0101（2進数）
- AND演算（両方1なら1）
1100
& 0101
= 0100
- 0100 → 4（10進数）
答え: 4 ✅
問題 2
7 | 2 は何になる？
ステップ解説
- 7 → 0111
- 2 → 0010
- OR演算（どちらか1なら1）
0111
| 0010
= 0111
- 0111 → 7
答え: 7 ✅
問題 3
8 ^ 3 は何になる？
ステップ解説
- 8 → 1000
- 3 → 0011
- XOR演算（違うなら1）
1000
^ 0011
= 1011
- 1011 → 11
答え: 11 ✅
問題 4
~5 は？
ステップ解説
- 5 → 0000 0101
- NOT演算（反転）
~0000 0101 = 1111 1010
- JavaScriptでは32ビット符号付き整数として計算するので → -6
答え: -6 ✅
問題 5
3 << 2 は？
ステップ解説
- 3 → 0011
- 左に2ビットシフト
0011 << 2 = 1100
- 1100 → 12
答え: 12 ✅
問題 6
16 >> 3 は？
ステップ解説
- 16 → 10000
- 右に3ビットシフト
10000 >> 3 = 00010
- 00010 → 2
答え: 2 ✅
視覚で覚えるポイント
- AND
&→ 両方1だけ11 & 0 = 0 1 & 1 = 1 - OR
|→ どちらか1なら11 | 0 = 1 0 | 0 = 0 - XOR
^→ 違うなら11 ^ 0 = 1 1 ^ 1 = 0 - NOT
~→ 反転 - 左シフト
<<→ 掛け算（2倍ずつ） - 右シフト
>>→ 割り算（2で割る）
💡 補足:
こうやって 2進数でビジュアル化 すると、なぜその答えになるかが直感的に理解できます。
次のステップでは、これを 動くアニメ（スライド式でビットが移動） にするとさらにわかりやすくなります。
6.ビット演算・シフト演算の練習課題（用途別）
- 奇数・偶数判定
- 問題: ビット演算を使って、数値が奇数かどうかを判定するにはどの演算子を使う？
- 答え:
&（AND） - 解説: 最下位ビットが1なら奇数、0なら偶数。
n & 1で判定できる。
- フラグ管理（特定のフラグをOFFにする）
- 問題: 既存の設定から特定のフラグをOFFにするにはどうする？
- 答え:
設定 & ~フラグ - 解説: NOTでフラグを反転し、ANDで適用することでそのビットだけ0にできる。
- 高速な掛け算（2のべき乗）
- 問題: 数値
5をビット演算で高速に×8するには？ - 答え:
5 << 3 - 解説: 左シフトは「×2^n」。
5 << 3は5 × 2^3 = 40。
- 問題: 数値
- 符号なし右シフトの挙動
- 問題: 負の数
-8 >>> 1の結果は？ - 答え:
2147483644 - 解説:
>>>は符号を無視して0で埋めるため、負の数も「大きな正の数」として解釈される。
- 問題: 負の数
- XORの特徴
- 問題: 2つの数値のビットが「異なるときだけ1」になる演算子は？
- 答え:
^（XOR） - 解説: 例：
1101 ^ 1001 = 0100。同じなら0、違えば1。