バイナリと基数変換ガイド:ビット演算からデータエンコーディングまでの視覚的理解

開発ツール

基数システムの基礎

よく使う4つの基数

基数 底 数字 プレフィックス 例
2進数 2 0,1 0b 0b1010 = 10
8進数 8 0-7 0o 0o12 = 10
10進数 10 0-9 なし 10
16進数 16 0-9,A-F 0x 0xA = 10

変換方法

任意の基数 → 10進数

2進数 1010 → 1×2³ + 0×2² + 1×2¹ + 0×2⁰ = 8 + 0 + 2 + 0 = 10
16進数 FF → 15×16¹ + 15×16⁰ = 240 + 15 = 255

10進数 → 任意の基数

10 → 2進数:
10 ÷ 2 = 5 余り 0
5 ÷ 2 = 2 余り 1
2 ÷ 2 = 1 余り 0
1 ÷ 2 = 0 余り 1
下から上へ読む:1010

255 → 16進数:
255 ÷ 16 = 15 余り 15
15 ÷ 16 = 0 余り 15
下から上へ読む:FF

JavaScriptでの基数変換

// parseIntで10進数に変換
parseInt('1010', 2)    // 10
parseInt('FF', 16)     // 255
parseInt('12', 8)      // 10

// toStringで目的の基数に変換
(10).toString(2)       // "1010"
(255).toString(16)     // "ff"
(255).toString(8)      // "377"

// リテラル
0b1010   // 10
0o12     // 10
0xFF     // 255

ビット演算の実践

6つのビット演算

演算 記号 例 結果
AND & 0b1100 & 0b1010 0b1000 (8)
OR | 0b1100 | 0b1010 0b1110 (14)
XOR ^ 0b1100 ^ 0b1010 0b0110 (6)
NOT ~ ~0b1100 -0b1101 (-13)
左シフト << 0b0011 << 2 0b1100 (12)
右シフト >> 0b1100 >> 2 0b0011 (3)

応用1:権限システム

const PERMISSIONS = {
  READ:    1 << 0,  // 0b0001 = 1
  WRITE:   1 << 1,  // 0b0010 = 2
  DELETE:  1 << 2,  // 0b0100 = 4
  ADMIN:   1 << 3,  // 0b1000 = 8
};

// 権限の組み合わせ
const editor = PERMISSIONS.READ | PERMISSIONS.WRITE;  // 0b0011 = 3
const admin = PERMISSIONS.READ | PERMISSIONS.WRITE | PERMISSIONS.DELETE | PERMISSIONS.ADMIN;  // 0b1111 = 15

// 権限のチェック
function hasPermission(userPermissions: number, permission: number): boolean {
  return (userPermissions & permission) === permission;
}

hasPermission(editor, PERMISSIONS.READ);    // true
hasPermission(editor, PERMISSIONS.DELETE);  // false
hasPermission(admin, PERMISSIONS.ADMIN);    // true

// 権限の追加
function addPermission(userPermissions: number, permission: number): number {
  return userPermissions | permission;
}

// 権限の削除
function removePermission(userPermissions: number, permission: number): number {
  return userPermissions & ~permission;
}

応用2:フラグビット

const FLAGS = {
  BOLD:      1 << 0,  // 1
  ITALIC:    1 << 1,  // 2
  UNDERLINE: 1 << 2,  // 4
  STRIKETHROUGH: 1 << 3, // 8
};

// 設定:太字 + 斜体
let style = FLAGS.BOLD | FLAGS.ITALIC;  // 3

// 下線の切り替え
style ^= FLAGS.UNDERLINE;  // 7(下線を追加)
style ^= FLAGS.UNDERLINE;  // 3(下線を削除)

応用3:RGBカラー

// RGB → 数値
function rgbToNumber(r: number, g: number, b: number): number {
  return (r << 16) | (g << 8) | b;
}

// 数値 → RGB
function numberToRgb(n: number): { r: number; g: number; b: number } {
  return {
    r: (n >> 16) & 0xFF,
    g: (n >> 8) & 0xFF,
    b: n & 0xFF,
  };
}

rgbToNumber(255, 128, 0);     // 0xFF8000 = 16744448
numberToRgb(0xFF8000);        // { r: 255, g: 128, b: 0 }

応用4:高速計算

// 2の冪乗の乗算
n * 2     === n << 1
n * 4     === n << 2
n * 8     === n << 3

// 2の冪乗の除算(切り捨て)
n / 2     === n >> 1  // 正の数
Math.floor(n / 2) === n >> 1

// 奇数/偶数の判定
n & 1     // 0 = 偶数、1 = 奇数

// 2の冪乗の剰余
n % 4     === n & 3
n % 8     === n & 7
n % 16    === n & 15

// 2つの値の交換(一時変数なし)
a ^= b; b ^= a; a ^= b;

IEEE 754浮動小数点数

倍精度(64ビット)の構造

符号ビット(1)  指数部(11)      仮数部(52)
S              EEEEEEEEEEE     MMMMMMMMMMMM...MMMM

例:-12.375
符号:1(負数)
指数:10000000010(1026、バイアス除去後は3)
仮数:1001001100000000...0

精度の問題

// 有名な問題
0.1 + 0.2 === 0.3   // false!
0.1 + 0.2            // 0.30000000000000004

// 原因:0.1と0.2は2進数では無限循環小数
// 0.1 = 0.0001100110011...(循環)
// 0.2 = 0.0011001100110...(循環)

// 解決策
// 1. 整数演算を使う
(0.1 * 10 + 0.2 * 10) / 10  // 0.3

// 2. toFixedを使う
(0.1 + 0.2).toFixed(1)       // "0.3"

// 3. EPSILONで比較
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON  // true

特殊な値

Number.MAX_SAFE_INTEGER    // 9007199254740991 (2^53 - 1)
Number.MIN_SAFE_INTEGER    // -9007199254740991
Number.MAX_VALUE           // 1.7976931348623157e+308
Number.EPSILON             // 2.220446049250313e-16
Infinity                   // 正の無限大
-Infinity                  // 負の無限大
NaN                        // 非数

Base64エンコーディングとバイナリ

エンコードの仕組み

3バイト(24ビット)→ 4つのBase64文字(各6ビット)

例:"Man"
M = 77  = 01001101
a = 97  = 01100001
n = 110 = 01101110

連結:010011010110000101101110
分割:010011 010110 000101 101110
インデックス:19   22     5      46
文字:       T     W      F      u

結果:"TWFu"

ToolsKuでエンコード/デコード

  1. Base64エンコード/デコードツールを開く
  2. テキストまたはBase64文字列を入力
  3. 「エンコード」または「デコード」をクリック
  4. ファイルや画像のBase64変換にも対応

Hexエンコーディング

バイナリ → Hex対応表

0000 = 0    0100 = 4    1000 = 8    1100 = C
0001 = 1    0101 = 5    1001 = 9    1101 = D
0010 = 2    0110 = 6    1010 = A    1110 = E
0011 = 3    0111 = 7    1011 = B    1111 = F

主な用途

用途 例
カラーコード #FF8000
MACアドレス 00:1A:2B:3C:4D:5E
ハッシュ値 a1b2c3d4e5f6...
メモリアドレス 0x7fff5fbff8c0
バイナリの確認 xxd file.bin

ToolsKuで基数変換を行う

  1. 基数変換ツールを開く
  2. 数値を入力
  3. 入力の基数を選択
  4. すべての基数への変換結果を確認

よくある質問

JavaScriptのビット演算が32ビットしかサポートしないのはなぜ?

JavaScriptのビット演算は数値を32ビット符号付き整数に変換するため、32ビットを超える部分は切り捨てられます:

0xFFFFFFFF          // 4294967295(通常の数値)
0xFFFFFFFF | 0      // -1(int32変換後にオーバーフロー)

// 大きな数のビット演算にはBigIntが必要
(0xFFFFFFFFFn & 0xFFn).toString(16)  // "ff"

ファイルのバイナリ内容を確認するには?

# hexダンプ
xxd file.bin

# またはToolsKuのHexビューアを使用
# ファイルをアップロード → 16進数/2進数の内容を確認

まとめ

バイナリはコンピューティングの基礎です。権限システム、カラーエンコーディング、浮動小数点の精度、Base64エンコーディングはすべてこれに依存しています。基数変換とビット演算をマスターすれば、より高速で低レベルなコードを書けます。ToolsKuは基数変換やBase64エンコード/デコードなどのツールを提供しており、基数やエンコーディングの問題をすばやく処理できます。

#二进制#进制转换#位运算#数据可视化#教程