このサイトは、只今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

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

CATEGORY LIST

LATEST NEWS

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US