JavaScriptで2進数を扱う方法：変換・計算・ビット演算の基本

2026年5月24日

数値操作・数学計算

JavaScriptは、Webブラウザ上で動作するスクリプト言語として誕生しましたが、現在ではサーバーサイドやIoTデバイスの制御など、幅広い分野で活用されています。

プログラミングの世界において、コンピュータの根本的なデータ形式である「2進数」を理解することは、パフォーマンスの最適化やバイナリデータの操作において非常に重要です。

JavaScriptにおいても、画像処理や音声データの解析、ネットワーク通信のプロトコル実装など、低レイヤーの処理を行う際には2進数の知識が不可欠となります。

本記事では、JavaScriptで2進数を扱うための基礎知識から、相互変換の方法、ビット演算のテクニック、そして実戦的な活用例までを詳しく解説します。

初心者の方から、より深くJavaScriptを極めたい中級者の方まで、幅広く役立つ内容を目指して執筆いたしました。

目次 [ close ]

JavaScriptにおける2進数の基本概念

JavaScriptでは、通常、数値は10進数として扱われますが、内部的にはすべての数値が浮動小数点数（IEEE 754準拠）として保持されています。

しかし、開発者が直感的に2進数を扱えるように、2進リテラルという記法が用意されています。

2進数リテラルの書き方

JavaScriptで2進数を直接記述するには、数値の先頭に0bまたは0B（Binaryの略）を付けます。

例えば、10進数の「10」を2進数で表現したい場合は、0b1010と記述します。

JavaScript

// 2進リテラルを使用した変数定義
const binaryValue = 0b1010;

// コンソールに出力すると10進数で表示される
console.log(binaryValue);

実行結果

このように、ソースコード上で2進数として記述しても、プログラム内部では数値として処理されるため、計算などにはそのまま利用可能です。

大文字の0Bも使用可能ですが、一般的には小文字の0bが好んで使われる傾向にあります。

2進数が必要とされる背景

なぜ、現代の高水準言語であるJavaScriptで2進数を意識する必要があるのでしょうか。

それは、メモリ効率や実行速度の向上が主な理由です。

例えば、大量のフラグ情報を1つの数値の中にビットとして詰め込むことで、メモリの節約が可能になります。

また、ハードウェアに近い領域での開発や、暗号化アルゴリズムの実装においても、ビット単位の操作は避けて通れません。

10進数と2進数の相互変換

JavaScriptで最も頻繁に行われる操作の一つが、10進数と2進数の文字列変換です。

ユーザーインターフェースに2進数を表示したり、外部データを読み取ったりする際に重要となります。

Number.prototype.toStringメソッドによる変換

数値を2進数の文字列に変換するには、toStringメソッドを使用します。

このメソッドの第一引数に基数（Radix）として「2」を指定することで、簡単に2進数表記の文字列が得られます。

JavaScript

const decimalNum = 255;

// toString(2)で2進数文字列に変換
const binaryStr = decimalNum.toString(2);

console.log(binaryStr);

実行結果

11111111

この方法は非常にシンプルですが、返り値は「文字列」である点に注意してください。

数値として計算を続けたい場合は、変換後の値をそのまま使うのではなく、表示用として割り切るのが一般的です。

ゼロパディングによる桁の揃え方

2進数を表示する際、「8ビット形式」や「16ビット形式」のように桁数を揃えたい場合があります。

その際には、文字列メソッドのpadStartを組み合わせるのが便利です。

JavaScript

const num = 5;
// 8桁になるまで先頭を"0"で埋める
const paddedBinary = num.toString(2).padStart(8, '0');

console.log(paddedBinary);

実行結果

00000101

データの可読性を高めるために、パディング処理は実務で多用されるテクニックです。

parseInt関数による2進数から10進数への変換

逆に、2進数の文字列を数値（10進数）に戻したい場合は、parseInt関数を利用します。

第二引数に基数である「2」を明示的に指定することがポイントです。

JavaScript

const binString = "1101";

// 第二引数に2を指定して解析
const decimalResult = parseInt(binString, 2);

console.log(decimalResult);

実行結果

もし第二引数を省略してしまうと、ブラウザや環境によっては正しく解釈されないリスクがあるため、常に基数を指定する癖をつけることが推奨されます。

ビット演算子の活用

JavaScriptには、数値を2進数として扱い、ビット単位で操作するためのビット演算子が豊富に用意されています。

ビット演算を行う際、JavaScriptは数値を一時的に「32ビット符号付き整数」として扱います。

主要なビット演算子の種類

代表的なビット演算子を以下の表にまとめました。

演算子	名称	内容
&	論理積 (AND)	両方のビットが1の場合に1を返す
\|	論理和 (OR)	どちらかのビットが1の場合に1を返す
^	排他的論理和 (XOR)	ビットが異なる場合に1を返す
~	否定 (NOT)	ビットを反転させる

ビット論理演算のコード例

それぞれの演算子がどのように動作するか、具体的なコードで確認してみましょう。

JavaScript

const a = 0b1010; // 10
const b = 0b1100; // 12

// AND演算
console.log((a & b).toString(2)); 

// OR演算
console.log((a | b).toString(2));

// XOR演算
console.log((a ^ b).toString(2));

実行結果

1000
1110
0110

ビット演算の結果も数値として返されますが、toString(2)を呼び出すことで、ビットの状態を視覚的に確認できます。

シフト演算子による高速な計算

ビットを左右にずらすシフト演算は、2のべき乗の乗算や除算を高速に行う手法として知られています。

JavaScript

const val = 5; // 0b101

// 左シフト：ビットを1つ左へ（2倍にするのと同等）
console.log(val << 1); 

// 右シフト：ビットを1つ右へ（2で割って小数点以下切り捨てと同等）
console.log(val >> 1);

実行結果

10
2

特に、<<演算子は、特定のビット位置にフラグを立てる際によく使われます。

2進数を用いた実戦的なテクニック

理論だけでなく、実際の開発シーンで2進数がどのように使われるかを見ていきましょう。

ビットマスクによるフラグ管理

複数の状態（フラグ）を1つの数値で管理する手法は、ビットマスクと呼ばれます。

例えば、ユーザーの権限（閲覧、編集、削除）を個別の真偽値ではなく、1つの整数で表現できます。

JavaScript

// 権限の定義
const READ    = 0b001;
const WRITE   = 0b010;
const DELETE  = 0b100;

// 現在のユーザー権限（閲覧と編集を許可）
let userAuth = READ | WRITE;

// 権限のチェック（READ権限があるか）
const canRead = (userAuth & READ) !== 0;
console.log("読み取り権限:", canRead);

// 権限の削除（WRITE権限を消す）
userAuth = userAuth & ~WRITE;
console.log("編集権限消去後の状態:", userAuth.toString(2));

実行結果

読み取り権限: true
編集権限消去後の状態: 1

このようにビット単位でフラグを扱うことで、データの送受信量を最小限に抑えつつ、複雑な条件判定を高速に行うことが可能になります。

BigIntによる巨大な2進数の扱い

JavaScriptの標準的な数値型（Number）は、53ビットを超える整数の精度を保証できません。

それ以上の巨大なビット列を扱う場合は、BigIntを使用します。

BigIntのリテラルは、数値の末尾にnを付けるか、0bから始まる2進表記の末尾にnを付けます。

JavaScript

// 64ビットを超える巨大な2進数
const hugeBinary = 0b1010101010101010101010101010101010101010101010101010101010101010n;
console.log(hugeBinary);

実行結果

12297829382473034410n

暗号学的な計算や、64ビット整数のIDを扱う際には、BigIntとビット演算の組み合わせが必須となります。

バイナリデータの操作：ArrayBufferとTypedArray

JavaScriptで「生の2進数データ」そのものを扱う場合、ArrayBufferとTypedArray（型付き配列）が登場します。

これらは、画像ファイルやネットワークパケットといったバイナリデータを効率的に操作するための仕組みです。

Uint8Arrayによるバイト単位の操作

Uint8Arrayは、各要素が8ビット（1バイト）の符号なし整数として扱われる配列です。

これは、2進数データを直接読み書きする際の最も基本的なツールです。

JavaScript

// 4バイトのメモリ領域を確保
const buffer = new ArrayBuffer(4);
const view = new Uint8Array(buffer);

// 2進数形式で値を代入
view[0] = 0b11111111; // 255
view[1] = 0b00001111; // 15

console.log(view);

実行結果

Uint8Array(4) [ 255, 15, 0, 0 ]

Web APIの中には、ファイルの読み込み（FileReader）やフェッチ（fetch）のレスポンスとして、これらのバイナリ形式を返すものが多く存在します。

DataViewによる高度な解析

エンディアン（バイト順）を意識する必要がある複雑なバイナリ構造を解析する場合、DataViewが役立ちます。

DataViewを使用すると、同じメモリ領域に対して、8ビット、16ビット、32ビットといった異なる単位でアクセスできます。

JavaScript

const buffer = new ArrayBuffer(4);
const dv = new DataView(buffer);

// 16ビット整数として値を書き込む（ビッグエンディアン）
dv.setUint16(0, 0x1234, false);

console.log(dv.getUint8(0).toString(16)); // 先頭1バイトを確認

実行結果

このように、JavaScriptは高級言語でありながら、低レベルなバイナリ操作も強力にサポートしているのです。

デバッグと注意点

2進数を扱うプログラムを書く際には、いくつか注意すべき落とし穴があります。

負の数の表現と補数

JavaScriptのビット演算は、数値を「2の補数形式」の32ビット整数として扱います。

そのため、最上位ビットが1になると、数値が負として解釈されることがあります。

特に、NOT演算子（~）を使用した際に予想外の数値（例：~0が-1になる）が返ってくるのは、この仕様によるものです。

ビット演算の優先順位

ビット演算子は、比較演算子（==や===）よりも優先順位が低い場合があります。

意図しない挙動を防ぐために、ビット演算を行う箇所は積極的に括弧 () で囲むことを推奨します。

JavaScript

// 誤りやすい例
if (status & FLAG === FLAG) { ... }

// 正しい例
if ((status & FLAG) === FLAG) { ... }

単純な記述ミスが深刻なバグに繋がるため、常に優先順位を意識したコーディングが求められます。

まとめ

JavaScriptにおける2進数の扱いは、一見すると難解に思えるかもしれません。

しかし、本記事で紹介した変換方法やビット演算の基本を押さえることで、アプリケーションのパフォーマンスを劇的に改善したり、より高度なデータ処理を実現したりできるようになります。

特に、toString(2)による可視化や、ビットマスクによる効率的な状態管理は、日常的なプログラミングでも非常に役立つスキルです。

また、大規模なデータを扱う際には、TypedArrayやBigIntといった現代的なJavaScriptの機能を組み合わせることが成功の鍵となります。

2進数の世界をマスターすることは、コンピュータがどのようにデータを処理しているかという本質的な理解にも繋がります。

本記事の内容を参考に、ぜひご自身のプロジェクトでもビットレベルの操作を取り入れてみてください。

JavaScriptという言語の持つ、真の柔軟性と強力なパワーを実感できるはずです。