JavaScriptで理解する2進数と10進数変換

基本情報技術者試験では、2進数や10進数の変換がよく出題されます。

ただ、基数変換は「試験のために暗記するもの」として覚えようとすると、少し退屈に感じるかもしれません。
しかし実際には、2進数の考え方はプログラミングの世界と深くつながっています。

たとえば、ビット演算、権限管理、文字コード、画像データ、色コードなどは、すべてコンピュータ内部の数値表現と関係しています。

この記事では、2進数と10進数の変換を、JavaScriptのサンプルコードを使いながら理解していきます。

2進数と10進数は「数の表し方」が違うだけ

私たちが普段使っている数は、ほとんどが10進数です。

10進数では、0から9までの数字を使い、10になると桁が1つ上がります。

たとえば、10進数の 123 は、次のように分解できます。

123 = 1 * 100 + 2 * 10 + 3 * 1

もう少し言い換えると、各桁には次のような重みがあります。

100, 10, 1

右から順に、1の位、10の位、100の位です。
これは、10進数が「10倍ごとに桁が上がる」仕組みだからです。

一方、2進数では使える数字が 0 と 1 だけです。
その代わり、2になると桁が1つ上がります。

たとえば、2進数の 1011 は、次のように考えます。

1011 = 1 * 8 + 0 * 4 + 1 * 2 + 1 * 1

計算すると、次のようになります。

8 + 0 + 2 + 1 = 11

つまり、2進数の 1011 は、10進数では 11 です。

ポイントは、2進数では右から順に、

1, 2, 4, 8, 16, 32 ...

という重みがついていることです。

2進数から10進数に変換する考え方

2進数を10進数に変換するときは、各桁の重みを足していきます。

例として、2進数の 1011 を10進数に変換してみます。

1 0 1 1
↓ ↓ ↓ ↓
8 4 2 1

1 が立っている桁だけを足すので、

8 + 2 + 1 = 11

となります。

基本情報技術者試験では、このように「各桁の重みを足す」考え方を押さえておけば、2進数から10進数への変換は解きやすくなります。

JavaScriptでは、2進数の文字列を10進数に変換する場合、parseInt() を使えます。

const decimal = parseInt('1011', 2);

console.log(decimal); // 11

parseInt() の第2引数に 2 を指定している点が重要です。
これは「この文字列を2進数として解釈してください」という意味です。

ただ、試験対策として理解を深めるなら、あえて自分で変換処理を書いてみるのもおすすめです。

const binaryToDecimal = (binary) => {
  let decimal = 0;

  for (let i = 0; i < binary.length; i++) {
    const digit = Number(binary[binary.length - 1 - i]);
    decimal += digit * 2 ** i;
  }

  return decimal;
};

console.log(binaryToDecimal('1011')); // 11

このコードでは、右端の桁から順に見ています。

右端は 2^0、その左は 2^1、さらに左は 2^2 というように、桁が左に進むほど重みが大きくなります。

2 ** 0 // 1
2 ** 1 // 2
2 ** 2 // 4
2 ** 3 // 8

このようにコードで書いてみると、2進数から10進数への変換は「各桁に2の累乗を掛けて足す処理」だと分かります。

10進数から2進数に変換する考え方

次に、10進数を2進数に変換してみましょう。

10進数から2進数に変換するときは、対象の数を2で割り、余りを記録していきます。
そして、最後に余りを下から読みます。

たとえば、10進数の 11 を2進数に変換します。

11 ÷ 2 = 5 余り 1
5  ÷ 2 = 2 余り 1
2  ÷ 2 = 1 余り 0
1  ÷ 2 = 0 余り 1

余りを下から読むと、

1011

になります。

つまり、10進数の 11 は、2進数では 1011 です。

JavaScriptでは、数値を2進数の文字列に変換する場合、toString(2) を使えます。

const binary = (11).toString(2);

console.log(binary); // "1011"

toString() の引数に 2 を指定すると、2進数表記の文字列に変換できます。

こちらも、自力で変換処理を書くと理解しやすくなります。

const decimalToBinary = (decimal) => {
  if (decimal === 0) {
    return '0';
  }

  const remainders = [];
  let current = decimal;

  while (current > 0) {
    remainders.push(current % 2);
    current = Math.floor(current / 2);
  }

  return remainders.reverse().join('');
};

console.log(decimalToBinary(11)); // "1011"

このコードでは、current % 2 で2で割った余りを求めています。
そして、Math.floor(current / 2) で商を求め、次の計算に進みます。

最後に reverse() で余りの順番を反転し、join('') で文字列にしています。

試験で手計算するときの「2で割った余りを下から読む」という手順を、そのままJavaScriptで表現した形です。

試験ではここを押さえれば十分

1つ目は、2進数から10進数への変換です。

これは、右から順に、

1, 2, 4, 8, 16, 32, 64, 128 ...

という重みを割り当て、1 が立っている桁だけを足します。

たとえば、1101 であれば、

8 + 4 + 1 = 13

なので、10進数では 13 です。

2つ目は、10進数から2進数への変換です。

これは、2で割った余りを順番に記録し、最後に下から読みます。

どちらも、仕組みを理解すれば難しい計算ではありません。

また、よく使う2の累乗は覚えておくと便利です。

2^0 = 1
2^1 = 2
2^2 = 4
2^3 = 8
2^4 = 16
2^5 = 32
2^6 = 64
2^7 = 128
2^8 = 256

特に 8、16、32、64、128、256 あたりは、基本情報だけでなく実務でもよく見かけます。

実務ではどこで使うのか

2進数や基数変換は、試験だけの知識ではありません。

たとえば、ビット演算を使うと、複数のON/OFF状態を1つの数値で管理できます。

権限管理を例にすると、

閲覧権限: 1
編集権限: 2
削除権限: 4
管理権限: 8

のように、それぞれの権限に2の累乗を割り当てることがあります。

このとき、閲覧権限と編集権限を持っているユーザーは、

1 + 2 = 3

として表現できます。

この 3 を2進数で見ると、

0011

となり、閲覧と編集のビットが立っている状態だと考えられます。

また、Webエンジニアに身近な例では、色コードや文字コードも数値表現と関係しています。

CSSでよく見るカラーコードの #ffffff や #000000 は16進数ですが、16進数も2進数と相性のよい表現です。

つまり、2進数を理解しておくと、コンピュータが内部でどのようにデータを扱っているのかを少しイメージしやすくなります。

普段のWeb開発で毎日2進数を直接書くことは少ないかもしれません。
しかし、ビット演算、バイナリデータ、文字コード、画像処理、低レイヤー寄りのデバッグなどでは、2進数の考え方が役に立ちます。

まとめ：基数変換は「暗記」より「手を動かす」と理解しやすい

今回は、JavaScriptを使って2進数と10進数の変換を確認しました。

2進数と10進数は、数の表し方が違うだけです。

2進数から10進数に変換するときは、各桁の重みを足します。
10進数から2進数に変換するときは、2で割った余りを下から読みます。

JavaScriptでは、次のように簡単に変換できます。

parseInt('1011', 2); // 11

(11).toString(2); // "1011"

ただし、試験対策としては、関数の使い方だけを覚えるよりも、変換の仕組みを理解することが大切です。

実際にコードを書いてみると、基数変換は単なる暗記ではなく、コンピュータの数値表現につながる知識だと分かります。

基本情報技術者試験の学習では、こうした仕組みをプログラムで確認しながら進めると、試験知識を実務にもつなげやすくなります。