JavaScriptのビット演算子の使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのビット演算子の使い方について解説しています。ビット演算子はビット同士の演算を行う演算子です。ビット演算子の種類とそれぞれの書き方、使い方を覚えましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,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 を詰めます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

ビット演算子の使い方

ビット演算子はどのような場面で使うのがいいでしょうか。

たとえば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では、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。