JavaScriptでバイナリデータを扱う際に利用されるUint8Arrayでは、文字列の「2」と数字の「2」が同じように見えても、内部で保存されている値は異なります。console.logで表示した結果が「50」になる場合、それは文字コードとして保存された値を確認しているためです。
この記事では、Uint8Arrayで文字が数値として表示される仕組み、なぜ「2」が50になるのか、そして同じ表示結果を得るための正しい値の代入方法について解説します。
Uint8Arrayとはどのようなデータ型なのか
Uint8ArrayはJavaScriptのTypedArray（型付き配列）の一種で、8ビット符号なし整数を扱うためのデータ構造です。
通常の配列とは異なり、Uint8Arrayでは各要素に0〜255までの整数値を保存します。そのため、文字列そのものを保存するものではなく、文字コードやバイナリデータを扱う用途で利用されます。
例えば以下の場合、配列には数字の50が保存されています。
const data = new Uint8Array([50]);
この50という値は、後述する文字コードでは文字「2」に対応します。
なぜ文字の2をUint8Arrayに入れると50になるのか
コンピューターでは文字をそのまま保存するのではなく、文字コードという数値に変換して保存します。
半角数字の「2」はASCIIコードでは10進数の50に割り当てられています。
| 文字 | 16進数 | 10進数 |
|---|---|---|
| 2 | 0x32 | 50 |
そのため、文字列の「2」をバイトデータとして扱う場合、内部的には50という数字になります。
つまり、Uint8Arrayで50と表示される場合は「数字の50」ではなく「文字2を表す文字コード50」である可能性があります。
Uint8Arrayに文字の2を保存して50と表示する方法
Uint8Arrayへ直接文字列を代入することはできません。Uint8Arrayは数値配列なので、文字コードに変換した値を入れる必要があります。
例えば以下のように記述すると、console.logで50が表示されます。
const data = new Uint8Array([0x32]);
console.log(data[0]);
実行結果。
50
0x32は16進数表記で、10進数に変換すると50になります。
文字列からUint8Arrayを作成する方法
実際のプログラムでは、文字列をそのまま数値へ変換するのではなく、文字コードへ変換してUint8Arrayへ格納することが多くあります。
例えばTextEncoderを利用すると、文字列からUTF-8形式のUint8Arrayを作成できます。
const encoder = new TextEncoder();
const data = encoder.encode(“2”);
console.log(data[0]);
この場合も結果は50になります。
TextEncoderは文字列をUTF-8のバイト列へ変換するため、文字「2」はUTF-8でもASCII互換の50として保存されます。
data = “2” と Uint8Array の違い
以下の2つは見た目は似ていますが、保存しているものがまったく違います。
| コード | 保存される内容 |
|---|---|
| data = “2” | 文字列の2 |
| new Uint8Array([2]) | 数値の2 |
| new Uint8Array([50]) | 文字コードとしての2 |
例えばnew Uint8Array([2])の場合、console.logすると2と表示されます。これは文字「2」ではなく、数値の2を保存しているためです。
一方、文字としての「2」を保存したい場合は、文字コードである50を入れる必要があります。
Uint8Arrayを扱うときに注意したいポイント
バイナリデータを扱う場合、表示される数字が人間の読む文字なのか、文字コードなのかを意識することが重要です。
例えばネットワーク通信やファイル読み込みでは、Uint8Arrayには文字そのものではなく、エンコードされたバイト列が入っています。そのため、表示結果だけを見ると意味が分かりにくいことがあります。
文字列へ戻したい場合は、TextDecoderを利用します。
const decoder = new TextDecoder();
console.log(decoder.decode(data));
このように、エンコードとデコードを意識するとUint8Arrayの値を正しく扱えるようになります。
まとめ
Uint8Arrayで文字「2」が50として表示されるのは、文字コードによる変換が行われているためです。ASCIIコードでは文字「2」が10進数50（16進数0x32）として表現されます。
Uint8Arrayへ文字の2を保存したい場合は、直接文字列を代入するのではなく、文字コードである50を指定するか、TextEncoderを利用して変換します。
Uint8Arrayは文字列ではなくバイトデータを扱う仕組みなので、「表示される数字が文字なのか、データそのものなのか」を意識することが、JavaScriptでバイナリ処理を理解するポイントになります。
コメント