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が出力される
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
まとめ
さて今回のJavasciptによるビット演算子の使い方はいかがでしたでしょうか。
Webアプリケーションを作る場合にはあまり使うことはありませんが、ビット演算子を使うことが出来ると、ビット単位での値の操作が行えるので様々な場面に役立つと思います。
監修してくれたメンター
| 黒木一志（くろきかつし）
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
