JavaScriptのビット演算子の使い方を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのビット演算子の使い方について解説しています。ビット演算子はビット同士の演算を行う演算子です。ビット演算子の種類とそれぞれの書き方、使い方を覚えましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのビット演算子の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
ビット演算子の使い方について詳しく説明していくね！
お願いします！
ビット演算子とは
コンピュータは根本的には0と1のビットと呼ばれる2進数ですべてのデータを取り扱っています。
ビット演算子とは、その0と1のビット同士の演算をするための演算子です。
ビット演算子の種類
ビット演算子には以下の7種類があります。
・ビットごとのAND
使用方法：a & b
オペランドの対応するビットがともに 1 である各ビットについて 1 を返します。
・ビットごとのOR
使用方法：a | b
オペランドの対応するビットがどちらかまたはともに 1 である各ビットについて 1 を返します。
・ビットごとのXOR
使用方法： a ^ b
オペランドの対応するビットがどちらか一方のみ 1 である各ビットについて 1 を返します。
・ビットごとのNOT
使用方法：~ a
オペランドの各ビットを反転します。
・左シフト
使用方法： a << b
2 進表現の a を b (< 32) ビット分だけ左にシフトします。右から 0 を詰めます。
・符号を維持する右シフト
使用方法： a >> b
2 進表現の a を b (< 32) ビット分だけ右にシフトします。あふれたビットは破棄します。
・0埋め右シフト
使用方法： a >>> b
2 進表現の a を b (< 32) ビット分だけ右にシフトします。あふれたビットは破棄し、左から 0 を詰めます。
ビット演算子の使い方
ビット演算子はどのような場面で使うのがいいでしょうか。
たとえばAND演算子は以下のように複数のフラグを持たせたflagsの中から特定のビットが立っているかを確認することが出来ます。
var flags = 0b0011;
var flagA = 0b0001;
var flagB = 0b0010;
if (flags & flagA) {
console.log("flagA");
}
if (flags & flagB) {
console.log("flagB");
}
実際に書いてみよう
それではビット演算子を使ったプログラムを実際に書いてみましょう。
今回はそれぞれのビット演算子を使い、実際にどのように結果が出力されるのかを確認してみましょう。
AND演算子：
console.log(0b0 & 0b1); // 片方のみビットが立っているので0が出力される
console.log(0b1 & 0b1); // 両方ビットが立っているので1が出力される
OR演算子：
console.log(0b0 | 0b1); // 片方のビットが立っているので1が出力される
console.log(0b1 | 0b1); // 両方ビットが立っているので1が出力される
XOR演算子：
console.log(0b0 ^ 0b1); // 片方のみビットが立っているので1が出力される
console.log(0b1 ^ 0b1); // 両方ビットが立っているので0が出力される
NOT演算子：
console.log( ~ 0b0); // 0の補数である-1が出力される
console.log( ~ 0b1); // 1の補数である-2が出力される
左シフト：
console.log( 0b0001 << 1); // 0001を左に1ビットシフトし、0010となり10進数表記の2が出力される
符号を維持する右シフト：
console.log( 0b0010 >> 1); // 0010を右に1ビットシフトし、0001となり10進数表記の1が出力される
0埋め右シフト：
console.log( 0b0010 >>> 1); // 0010を右に1ビットシフトし、0001となり10進数表記の1が出力される
まとめ
さて今回のJavasciptによるビット演算子の使い方はいかがでしたでしょうか。
Webアプリケーションを作る場合にはあまり使うことはありませんが、ビット演算子を使うことが出来ると、ビット単位での値の操作が行えるので様々な場面に役立つと思います。
監修してくれたメンター
| 黒木一志（くろきかつし）
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
