このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

JavaScript ビット演算・ビットマスクについてまとめてみました。

JavaScript

2016.03.15

この記事は最終更新日から1年以上が経過しています。

479
どもです。

最近、記事もJavaScriptも書いてないなぁ。と思ったので、なんかJavaScriptについて書きます。

選んだのが、ビット演算・ビットマスクと言う事で、全然真新しくも無く、使いどころの少ない事柄で全く申し訳ないのですが、まぁいいですよね。

まとめていないなと思ったので、また今更感たっぷりなんですがまとめてみます。

通常のWebサイトや、Webサービスを作成する際は、ほとんど使用するシーンも無く、私の経験上、ビット演算など使っていると周りから煙たがれるかと思います(笑)

本当に必要なシーンならともかく、「え、ここでいるか?」って言うのかあった事もありまして(笑)

実際、煙たがっていたのも事実です(笑)

(なんか、書けますよ。って事をアピールしたかったのでしょうね(笑))

と、ビット演算子を利用するシーンは少ない印象ではありますが、よくあるのがカラーコードを扱ったり、ゲーム制作の現場ではビットマスクなどを用いた演算を結構利用する事が多いですね。

詳細なんですが、はっきり言いまして、こちらのページにほとんど記載されていますが、

JavaScript | MDN

ビット演算子

ビット演算子・ビットマスクって何??って方向けに分かりやすくまとめられればと思います。

ビット演算子

ビット演算子ではそのオペランドを 10 進数や 16 進数や 8 進数の数値ではなく、32 ビットの集合(0 と 1)として 扱います。

と、ありますね。

そうですね。ビット演算子は2進数の計算となります。

2進数とは「0」と「1」の2個の数字を使って数を表現します。

その2進数の計算がビット演算子となります。

演算子 使用方法 説明
ビットごとの AND a & b オペランドの対応するビットがともに 1 である各ビットについて 1 を返します。
ビットごとの OR a | b オペランドの対応するビットがどちらかまたはともに 1 である各ビットについて 1 を返します。
ビットごとの XOR a ^ b オペランドの対応するビットがどちらか一方のみ 1 である各ビットについて 1 を返します。
ビットごとの NOT ~ a オペランドの各ビットを反転します。
左シフト  a << b  2 進表現の ab (< 32) ビット分だけ左にシフトします。右から 0 を詰めます。
符号を維持した右シフト  a >> b  2 進表現の ab (< 32) ビット分だけ右にシフトします。溢れたビットは破棄します。
0 埋め右シフト  a >>> b  2 進表現の ab (< 32) ビット分だけ右にシフトします。溢れたビットは破棄し、左から 0 を詰めます。

まるっと、引用で申し訳ないのですが、上記がビット演算子となります。

今回は、「AND」「OR」「XOR」「NOT」に注目して書いていきます。

aとbの2つの2進数をビット演算子で演算した例です。

a b 論理積 AND(a&b) 論理和OR(a | b) 排他的論理和XOR(a^b)
1 1 1 1 0
1 0 0 1 1
0 1 0 1 1
0 0 0 0 0

 

a 論理否定NOT(~a)
1 0
0 1

うー。わかんないよー。って方に少し分かりやすく噛み砕いて書いていきますね。

まず、ビット演算子に入る前に、数値リテラルについて復習しておきます。

ヘキサリテラル

最先頭に『0x』 で、16 進数表記となります。

// 16 進数表記で数値を作成する
var value = 0x00000112; //274
オクタルリテラル(非推奨仕様)

最先頭に『0』 で、8 進数表記となります。

// 8 進数表記で数値を作成する(非推奨)
var value = 021; //17

非推奨の為、strict モードでは使用できません。

 

オクタルリテラル

最先頭に『0o』 で、8 進数表記となります。

// 8 進数表記で数値を作成する
var value = 0o0021; //17

新仕様の為、一部ブラウザで動作。

バイナリリテラル

最先頭に『0b』 で、2 進数表記となります

// 2 進数表記で数値を作成する
var value = 0b0010; //2

一部のブラウザで動作します。

 

論理演算子

& (ビットごとの AND)

まずは、「AND」から。

論理積ANDは、「どちらも1の場合1。それ以外0」です。

a b 論理積 AND(a&b)
1 1 1
0 1 0

1010 & 1100 = 1000 (2進数)

となります。

10(10進数) = 1010(2進数)

12(10進数) = 1100(2進数)

10 & 12 = 1000(2進数)= 8(10進数)

となります。

| (ビットごとの OR)

論理和OR(a | b)はどちらか、1の場合1となります。

a b 論理和OR(a | b)
0 0 0
0 1 1

1010 | 0011 = 1011(2進数)

となります。

10(10進数) = 1010(2進数)

3(10進数) = 0011(2進数)

10 | 3 = 1011(2進数)= 11(10進数)

となります。

^ (ビットごとの XOR)

排他的論理和XORは「どちらか異なる場合 1となります」

a b 排他的論理和XOR(a^b)
1 1 0
1 0 1

1010 ^ 0011 = 1001(2進数)

となります。

10(10進数) = 1010(2進数)

3(10進数) = 0011(2進数)

10 ^ 3 = 1001(2進数)= 9(10進数)
となります。

~ (ビットごとの NOT)

最後、論理否定NOTは、「全てのビットを反転させます」

a 論理否定NOT(~a)
1 0
0 1

9 (10 進数) = 1001 (2 進数)
~9 (10 進数) = 0110 (2 進数) = -10 (10 進数)

ビットマスク

ビット演算子について、ザッとではありますが、振り返ってみました。

では、「どこで使うの?」と疑問も上がってくるかと思います。

実際に使うシーンは一つの変数で、バイナリフラグとして持つ、「ビットマスク」がゲーム制作の現場で使用されたりします。

ビットマスクとは、通常「真(true)」「偽(false)」を表す bool型は2種類しかなく「真(true)1」「偽(false)0」で表現する事ができます。

この「0」「1」の1ビットの数値を用いて、1つの変数で複数のフラグを表現するのが、「ビットマスク」となります。

では、ビットマスクの定義例を。

定数名 2進数 10進数 16進数 概要
NONE 00000000 0 0x0000 何も飼っていない
CAT 00000001 1 0x0001 猫を飼っている
DOG 00000010 2 0x0002 犬を飼っている
BIRD 00000100 4 0x0004 鳥を飼っている

このような定数が定義されていたとします。

ビットマスクに使うのは「論理積AND」と「論理和OR」となります。

ある変数に「CAT」のフラグを立てる時は、「OR」を用いてフラグをtrueにします。

man = man | CAT;

これは、以下のように記述できます。

man |= CAT;

逆にフラグが立っているか判定の場合は「AND」を用いて判定します。

if((man & CAT) != 0) {
処理..
}

猫と犬を飼っている場合のみ処理を行う場合は、

if ((man & CAT) && (man & DOG)) {
  処理..
}

みたいな感じとなります。

 

猫か犬を飼っているビットマスク変数を作成しようとすると、

var mask = CAT | DOG;

このように、「OR演算」を用いて作成する事ができます。

ビットマスクは 0 との AND 演算により、関係のないフラグをマスクします (それゆえ、”ビットマスク” という用語になります)。

 

if (man & mask)  {
  処理..
}

 

と、言った感じに利用されます。

ザッとではありましたが、ビット演算子、ビットマスクに関して軽くまとめてみました。

通常のWebサイトやWebサービスではなかなか使う機会も少ないですが、覚えておいて損は無いかと思います。
(必要無いのに、むやみやたらに使うのはやめましょう(被害経験あり)(笑))

次は評価関数辺り書けて行ければと思う今日この頃です。

ではではー。

 

 

Comment

Related Article

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

2016.02.01

CATEGORY LIST

LATEST NEWS

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US