JavaScriptでビット演算子を使用する
イントロダクション
JavaScriptでのビット演算子はほとんど注目されていませんが、実際には非常に強力で幅広い用途があります。数値計算や変換の高速化に役立ちます。これらを活用して、特定の複雑なコーディングシナリオを置き換え、コードを読みやすくすることができます。
このチュートリアルの終わりまでに、ビット演算子の基本的な理解、ビット演算子とは何か、そしてそれをどのように使用するかを得ることができます。
前提条件
このガイドを始める前に、以下のものが必要です。
概念的な必要条件
- Very basic understanding about what is binary.
- How the logical “and” and “or” operators work and the outcomes of using them.
- Understanding of operators and operands.
技術的な前提条件
- [How to use the Javascript developer console][https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console]
- [How to code in Javascript][https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript]
Javascriptでのバイナリの動作原理
ビット演算子はバイナリレベルで動作するため、JavaScriptがバイナリ変換に提供するものを理解することが重要です。聞こえるほど難しくありませんので、信じてください。
以下のように、toString()関数を使用して任意の数字を文字列に変換することができます。
var n = 2;
console.log(n.toString());
2
toString関数は、ベースを指定するために使用できる引数（ラディックスと呼ばれる）を1つ持っています。ベースは変換の対象を決定します。バイナリを取得するためには「2」を、8進数を取得するためには「8」を、16進数を取得するためには「16」を渡すことができます。デフォルトでは、10であり、したがって10進数値が返されます。
var num = 18;
var binaryText = num.toString(2);
console.log(binaryText);
10010
私たちが見るように、数値18はバイナリ文字列「10010」に変換されました。
Note
parseInt(“バイナリ文字列”,2);
したがって、私たちの場合、「10010」を数値18に変換するには、以下のコードを使用できます。
var num = 18;
var binaryText = num.toString(2);
console.log(binaryText);
console.log(parseInt(binaryText));
出力結果
10010
18
これはJavaScriptでバイナリ変換がどのように動作するかの非常に基本的な内容について説明しています。バイナリ変換を知らなくても、ビット演算子で作業することができます。しかし、ビット演算子の結果がどのように計算されるのかを理解できない場合もあります。それでは、実際に試してみましょう。
ビット演算子を使用する
このチュートリアルでは、ビット演算の基本的な数値を考えてみましょう。使用する数値は1、2、3です。それぞれの数値に対するバイナリ数のリストを以下に示します。
１ → ００１
2 → 010
2を010に変換する
３→０１１
Note
ビットごとのAND演算子(&)
ビット単位のAND演算子は、記号「&」を使用して行うことができます（注意：非バイナリ変数間の論理AND演算には二重の「&&」を使用します）。
ビットに対して「&」が返すものは以下の通りです。
0と0をかけると、0になります。
１と０を足すと、０になります。
1＋1＝1
これは私たちの論理 AND 演算に非常に似ています。両方の条件が真の場合は真を返し、それ以外の場合は偽を返します。この場合、真は1に置き換えられ、0は偽に相当します。
JavaScriptは、各バイナリビットを比較して結果のバイナリ数を生成します。以下の表は、数1と数3のビットごとの論理積（AND）を示しています。
| Number | Binary equivalent | Binary Bits | ||
|---|---|---|---|---|
| 1 | 001 | 0 | 0 | 1 |
| & | & | & | & | & |
| 3 | 011 | 0 | 1 | 1 |
| Result = 1 | 0 & 0 = 0 | 0 & 1 = 0 | 1 & 1 = 1 |
結果の文字列001を10進数に変換すると、「1」が出力されます。したがって、「1」と「3」の結果は「1」です。JavaScriptでは内部的にビット演算子を認識し、1と3をバイナリ形式に変換し、各ビットに対してビットごとのAND演算を適用し、結果のバイナリ文字列を10進数に変換します。F12を押してブラウザのコンソールに入力することで、すばやく試すことができます。
console.log(1&3);
ビット毎 OR（|）
ビット演算のORは「|」というシンボルを使用します。
「|」は、ビットに対して次のように返します。
0＋0＝0
1 | 0 = 1
1と0の論理和は1です。
1＋1＝1
これは、論理の OR 演算に似ています。どれか一つの条件が真であれば真を返し、そうでなければ偽を返します。この場合、真は1に置き換えられ、0は偽に等しいとされます。
以下の表は、数1と3のビット単位のORを示しています。
| Number | Binary equivalent | Binary Bits | ||
|---|---|---|---|---|
| 1 | 001 | 0 | 0 | 1 |
| | | | | | | | | | |
| 3 | 011 | 0 | 1 | 1 |
| Result = 3 | 0 | 0 = 0 | 0 | 1 = 0 | 1 | 1 = 1 |
結果の文字列011を10進数に変換すると、出力は「3」となります。したがって、「1」 | 「3」の結果は「3」となります。JavaScriptは内部的にビット演算子を認識し、1と3を2進数に変換し、各ビットに対してビットORを適用して、得られた2進数の文字列を10進数に変換します。
ビット単位の排他的論理和(XOR)
ビット演算子 XOR のシンボルは「^」です。
ビットに対して「^」を適用した結果は以下の通りです。
0の0乗は0です。
1 ^ 0 = 1
1の0乗は1です。
1 ^ 1 = 0
1と1のXORは0です。
XOR（排他的論理和）のルールは、両方のビットが異なる場合は「1」を、そうでない場合は「0」を返すことです。1と3の間のXORは2を返します。以下に説明します：
| Number | Binary equivalent | Binary Bits | ||
|---|---|---|---|---|
| 1 | 001 | 0 | 0 | 1 |
| ^ | ^ | ^ | ^ | ^ |
| 3 | 011 | 0 | 1 | 1 |
| Result = 2 | 0 ^ 0 = 0 | 0 ^ 1 = 1 | 1 ^ 1 = 0 |
ビットシフト左 (<<)
構文: 数字 << 位置
シフト演算子の左側の数字は実際の数字を表し、演算子の右側はシフトする位置を表します。例えば、「5 << 2」とすると、JavaScriptに対して数字5を左に2つシフトするように指示します。以下はJavaScriptが実際にシフト左操作を行う方法です。
- It converts the number to the binary equivalent. In our case, number 5 will be converted to binary form that is – 101.
- Adds two 00s to the right of the binary string. This will result in 10100 for number 5.
- Convert the binary string to a decimal number. In our case, it will be 20. So, js console.log(5<<2); will result in number 20.
ビットシフト演算子右移動 (>>)
構文：数値 >> 位置
右シフト演算子は、右側から2進数を削除します。削除される数は何個ですか？おそらくすでにお気づきかもしれませんが、位置として指定された数です。
ここに例を挙げます。5を2とします。
- JavaScript will convert 5 to binary equivalent. 101 in our case.
- Remove two numbers from the right side. This will result in 101.
- Convert the result into decimal. The result will be 1 in our case.
結論
ビット演算子は最初はとても複雑に聞こえますが、基礎を理解すれば非常に簡単です。私たちは「.toString(2)」メソッドを使って任意の数を2進数に変換することができます。変換することで、ビット演算子の出力を理解するのに役立ちます。すべてのビット演算子は、オペランドを2進数形式に変換してからビットレベルで動作します。
- Bitwise AND returns 1 if both the bits are 1 else 0.
- Bitwise OR returns 1 if at least one of the bits is 1 else 0.
- Bitwise XOR only returns 1 if both operands are different. Otherwise returns 0.
- Shift left adds 0s in the end mentioned in the second operand and shift right just removes bits mentioned as the second operands.
この短い紹介が、ビット演算子の理解と、その結果がどのように計算されるかを理解するのに役立ったことを願っています。
