JavaScript の型付き配列

最大限の柔軟性と効率性を達成するために、JavaScript の型付き配列では バッファー と ビュー に実装を分けています。バッファー（ArrayBuffer オブジェクトで実装）は、データの塊を表すオブジェクトです。これは特に形式がなく、またその中身にアクセスする手段を提供しません。バッファーに格納されている情報にアクセスするには、ビューを使用する必要があります。ビューはコンテキスト（データの種類、開始位置のオフセット、要素の数）を提供し、データを実際の型付き配列に返します。

ArrayBuffer は、一般的な固定長のバイナリーデータのバッファーを示すために使用するデータ型です。 ArrayBuffer の内容物を直接操作することはできません。代わりにバッファーを特定の形式で表現し、またバッファーの内容物を読み書きするために使用する、型付き配列のビューまたは DataView を作成します。

型付き配列のビューは自身を表現する名称を持ち、Int8、Uint32、Float64 などの一般的な数値型のビューを提供します。特別な型付き配列のビューとして Uint8ClampedArray があります。これは、値を 0 から 255 の間に制限します。例えば Canvas のデータ処理に役立ちます。

DataView は、任意のデータをバッファーに読み書きするためのゲッター/セッター API を提供する、低レベルインターフェイスです。これは、例えばさまざまな型のデータを扱う場合に役立ちます。型付き配列のビューは、プラットフォームのネイティブのバイト順 (Endianness) になります。DataView では、バイト順を制御できます。既定でははビッグエンディアンですが、ゲッター/セッターメソッドでリトルエンディアンに設定できます。

これらは、型付き配列を利用する API の例です。他にもありますが、常に追加されています。

FileReader.prototype.readAsArrayBuffer()

FileReader.prototype.readAsArrayBuffer() メソッドは、指定した Blob または File の内容物の読み取りを開始します。

XMLHttpRequest.prototype.send()

XMLHttpRequest のインスタンスの send() メソッドが、型付き配列と ArrayBuffer オブジェクトを引数としてサポートしました。

ImageData.data

これは 0 から 255 の間の整数値である、RGBA データを持つ一次元配列を表す Uint8ClampedArray です。

始めにバッファーの作成が必要であり、ここでは 16 バイト固定長とします。

const buffer = new ArrayBuffer(16);

これで、全体が 0 で初期化されたメモリー領域ができました。しかし、そのバッファーに対してできることはあまりありません。バッファーが実際に 16 バイトの大きさであることを確認する程度のことはできます。

if (buffer.byteLength === 16) {
  console.log("Yes, it's 16 bytes.");
} else {
  console.log("Oh no, it's the wrong size!");
}

このバッファーで実際の作業を行う前に、ビューを作成しなければなりません。バッファー内のデータを 32 ビット符号付き整数値の配列として扱うビューを作成してみましょう。

const int32View = new Int32Array(buffer);

この時点で配列のフィールドへ、通常の配列と同じようにアクセスすることが可能になります。

for (let i = 0; i < int32View.length; i++) {
  int32View[i] = i * 2;
}

これは配列を値 0, 2, 4, 6 の 4 つのエントリ (4 つのエントリが各 4 バイトで、合計 16 バイト) で埋めます。

同一のデータに対して複数のビューを作成できることを考えると、それらは実に興味深いものになります。例えば、前出のコードの続きを以下のようにします。

const int16View = new Int16Array(buffer);

for (let i = 0; i < int16View.length; i++) {
  console.log(`Entry ${i}: ${int16View[i]}`);
}

ここでは、同一のバッファーを既存の 32 ビット値のビューと共有する 16 ビット整数値のビューを作成して、バッファー内の値すべてを 16 ビット整数値として出力しています。すると、0, 0, 2, 0, 4, 0, 6, 0 という出力を得ます。

ここで一歩進みましょう。以下のコードについて考えてみてください。

int16View[0] = 32;
console.log(`Entry 0 in the 32-bit array is now ${int32View[0]}`);

このコードの出力は "Entry 0 in the 32 ビットarray is now 32" になります。

言い換えると、2 つの配列は同じデータバッファーを異なる形式で取り扱う単純なビューであるということです。同様のことを、任意のビュー型で行うことができます。

1 つのバッファーを、バッファー内において異なるオフセットで始まり、またタイプが異なる複数のビューと結びつけることで、複数の種類のデータを持つデータオブジェクトを取り扱うことが可能になります。これにより、例えば WebGL の複合データ構造やデータファイルを取り扱うことが可能になります。

以下の C 構造体について考えてみましょう。

struct someStruct {
  unsigned long id;
  char username[16];
  float amountDue;
};

このような形式のデータを含むバッファーは、以下のようにアクセスできます。

const buffer = new ArrayBuffer(24);

// ... read the data into the buffer ...

const idView = new Uint32Array(buffer, 0, 1);
const usernameView = new Uint8Array(buffer, 4, 16);
const amountDueView = new Float32Array(buffer, 20, 1);

例えば、合計金額には amountDueView[0] でアクセスできます。

型付き配列を処理した後は、 Array プロトタイプの利点を享受するため通常の配列に変換することが、有用な場合があります。これは Array.from() を使用する、あるいは Array.from がサポートされていなければ以下のコードを使用して実現できます。

const typedArray = new Uint8Array([1, 2, 3, 4]);
const normalArray = Array.from(typedArray);

同様にスプレッド演算子を使用するとこうなります。

const typedArray = new Uint8Array([1, 2, 3, 4]);
const normalArray = [...typedArray];

または、 Array.from() に対応していない場合は次のコードを使用するとこうなります。

const typedArray = new Uint8Array([1, 2, 3, 4]);
const normalArray = Array.prototype.slice.call(typedArray);

• Base64 でエンコードされた文字列から ArrayBuffer または型付き配列を取得
• Faster Canvas Pixel Manipulation with Typed Arrays
• Typed Arrays: Binary Data in the Browser
• エンディアン