JavaScript プログラミング講座

 

TypedArray クラスとは?

 


■TypedArray クラスについて

 
TypedArray クラスは、型付き配列と呼ばれます。
 
TypedArray クラスを使用すると、型付きの配列を取り扱う事ができます。
 
■Array クラスとの違い
 
Array クラスの実体は、連想配列ですが、TypedArray クラスの配列は、純粋な配列として機能します。
 
JavaScript を実行している CPU の、エンディアン方式まで考慮する必要があります。
 
C 言語の配列に近いでしょう。
 
TypedArray オブジェクトのすべての番地には、同じ型(バイトサイズ)のデータを格納する事ができます。
 
TypedArray クラスには、配列の挿入や切除といった便利なメソッドは存在しません。
 
TypedArray オブジェクト作成後に、配列のサイズを継ぎ足し補充する事はできません。
 
低機能ですが、かわりに各要素に高速でアクセスする事ができます
 
■TypedArray のサブクラスについて
 
TypedArray のサブクラス一覧については、こちらで解説しています。
 
これらのサブクラスは、使用したいデータの型によって使い分ける必要があります。
 
■ArrayBuffer クラスとの連動について
 
TypedArray クラスは、内部的には ArrayBuffer クラスと連動して動作します。
 
ArrayBuffer クラスについては、こちらで解説しています。
 
ArrayBuffer クラスは、バッファの確保を担当します。
 
TypedArray クラスは、バッファに入出力アクセスするための手段(ビュー)として機能します。
 
TypedArray クラスを使って、バイナリデータにアクセスする方法については、こちらで解説しています。
 
■TypedArray クラスを、型付きの配列として使用する
 
型付きの配列を使用したい場合、TypedArray クラスの機能だけで実現できます。
 
内部的には ArrayBuffer クラスと連携していますが、隠匿されているので気にする必要はありません。
 
このページでは、型付き配列を使用する方法について解説しています。
 

■ TypedArray に対応しているか調べる

 
ブラウザが、ArrayBuffer に対応しているのであれば、TypedArray にも対応しています。
 
ブラウザが、ArrayBuffer に対応しているか調べるには、window.ArrayBuffer が真であるか比較します。
 
TypedArray クラスは、Internet Explorer 9 以前では利用できません。
 
TypedArray に対応しているか調べる

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	console.log("TypedArray に対応している");

}else{

	console.log("TypedArray に対応していない");

}
 
 
 

 

TypedArray オブジェクトを作成する

 
 


■ TypedArray オブジェクトを作成する (新規にバッファを生成する)

 
new 演算子を使って、TypedArray のサブクラスをインスタンス化します。
 
TypedArray のサブクラス一覧については、こちらで解説しています。
 
第01引数に、数値型のデータを指定した場合の動作です。
 
new TypedArray ( 配列の個数 ) :TypedArray
第01引数(略可)Number確保したいバッファのサイズを配列の個数で指定。デフォルトでは 0。
戻り値 TypedArrayTypedArray オブジェクトが得られる
 
■第01引数(確保したいバッファのサイズを配列の個数で指定)
 
第01引数から、確保したいバッファのサイズを、配列の個数で指定します。
 
これは、仮想的な数値ではありません。実際に物理メモリの確保を試みます。
 
例えば、Uint16Array クラスを使って、第01引数に 32 を指定した場合、「 2 Byte 」 * 「 32 個」 = 「 64 Byte 」の領域が確保されます。
 
例えば、Float64Array クラスを使って、第01引数に 64 を指定した場合、「 8 Byte 」 * 「 64 個」 = 「 512 Byte 」の領域が確保されます。
 
巨大な値を指定した場合、環境によって失敗する事がありえるので注意して下さい。
 
物理メモリの確保に失敗した場合、エラーが発生します。
 
物理メモリの確保に成功した場合、バイナリの中身は、すべて 0 で初期化されています。
 
TypedArray オブジェクトを生成した後で、バッファのサイズを変更する事はできません。
 
よって、サイズの指定は重要です。第01引数を省略しても意味がありません。
 
■ ArrayBuffer オブジェクトにアクセスする
 
この作成方法を利用すると、内部で ArrayBuffer オブジェクトも生成されます。
 
TypedArray オブジェクトから、ArrayBuffer オブジェクトを取得するには、buffer プロパティを使用します。
 
■作成例
 
配列の個数を指定して、Uint8Array オブジェクトを作成する

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// ------------------------------------------------------------
	// 配列の個数を指定して、Uint8Array オブジェクトを作成する
	// ------------------------------------------------------------
	var ary_u8 = new Uint8Array(128);

	// ビューから、ArrayBuffer オブジェクトを取得する
	var ary_buffer = ary_u8.buffer;

	// 確保した総バイト数
	console.log(ary_buffer.byteLength); // 128 (1 * 128)

}
 
配列の個数を指定して、Float64Array オブジェクトを作成する

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// ------------------------------------------------------------
	// 配列の個数を指定して、Float64Array オブジェクトを作成する
	// ------------------------------------------------------------
	var ary_f64 = new Float64Array(64);

	// ビューから、ArrayBuffer オブジェクトを取得する
	var ary_buffer = ary_f64.buffer;

	// 確保した総バイト数
	console.log(ary_buffer.byteLength); // 512 (8 * 64)

}
 

■ TypedArray オブジェクトを作成する (初期データを指定しつつ新規にバッファを生成する)

 
new 演算子を使って、TypedArray のサブクラスをインスタンス化します。
 
TypedArray のサブクラス一覧については、こちらで解説しています。
 
第01引数に、「Array オブジェクト」や「TypedArray オブジェクト」を指定した場合の動作です。
 
new TypedArray ( [格納したいデータ] ) :TypedArray
第01引数 *まとめて格納したいデータを指定する。「Array オブジェクト」や「TypedArray オブジェクト」の指定が可能。
指定した要素の数が、そのままバッファのサイズ(要素の個数)となる。
戻り値 TypedArrayTypedArray オブジェクトが得られる
 
■第01引数(まとめて格納したいデータを指定)
 
第01引数から、まとめて格納したいデータを、Array や TypedArray 形式で指定します。
 
生成に失敗した場合、エラーが発生します。
 
マルチバイトサイズの型を使用する場合、エンディアン方式の違いを、考慮する必要があります。
 
エンディアンについては、こちらで解説しています。
 
指定した要素の数が、そのままバッファのサイズ(要素の個数)となります。
 
TypedArray オブジェクトを生成した後で、バッファのサイズを変更する事はできません。
 
■ ArrayBuffer オブジェクトにアクセスする
 
この作成方法を利用すると、内部で ArrayBuffer オブジェクトも生成されます。
 
TypedArray オブジェクトから、ArrayBuffer オブジェクトを取得するには、buffer プロパティを使用します。
 
■作成例
 
初期データを格納しつつ、Int8Array オブジェクトを作成する

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// ------------------------------------------------------------
	// 初期データを格納しつつ、Int8Array オブジェクトを作成する
	// ------------------------------------------------------------
	var ary_s8 = new Int8Array( [9,8,7,6,5,4,3,2,1,0] );

	// ビューから、ArrayBuffer オブジェクトを取得する
	var ary_buffer = ary_s8.buffer;

	// 出力テスト
	console.log(ary_s8); // [9,8,7,6,5,4,3,2,1,0]

}
 
初期データを格納しつつ、Float32Array オブジェクトを作成する

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// ------------------------------------------------------------
	// 初期データを格納しつつ、Float32Array オブジェクトを作成する(環境依存に注意)
	// ------------------------------------------------------------
	var ary_f32 = new Float32Array( [ 0.1 , 0.2 , 0.3 ] );

	// ビューから、ArrayBuffer オブジェクトを取得する
	var ary_buffer = ary_f32.buffer;

	// 確保した総バイト数
	console.log(ary_f32); // [ 0.1000 , 0.2000 , 0.3000 ]

}
 

■配列の任意の番地にアクセスする

 
配列の任意の番地にアクセスするには、配列アクセス演算子を使用します。
 
角括弧 [ ] の中に、アクセスしたい番地を数値で指定します。
 
指定した番地にデータが存在しない場合は、undefined 値が得られます。
 
型付き配列の任意の番地にアクセスする

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// ------------------------------------------------------------
	// Uint8Array オブジェクトを作成する
	// ------------------------------------------------------------
	var ary_u8 = new Uint8Array([10,11,12,13,14,15]);


	// ------------------------------------------------------------
	// 型付き配列の任意の番地に、読み取りアクセスする
	// ------------------------------------------------------------
	// 0 番地に格納されたデータを取得
	var v0 = ary_u8[0];

	// 2 番地に格納されたデータを取得
	var v1 = ary_u8[2];

	// 出力テスト
	console.log(v0); // 10
	console.log(v1); // 12


	// ------------------------------------------------------------
	// 型付き配列の任意の番地に、書き込みアクセスする
	// ------------------------------------------------------------
	// 2 番地にデータを格納する
	ary_u8[2] = 92;

	// 5 番地にデータを格納する
	ary_u8[5] = 95;

	// 出力テスト
	console.log(ary_u8); // [10, 11, 92, 13, 14, 95]

}
 

■配列のすべての番地に順番にアクセスする


■ 0 から順番にアクセスする
 
配列のサイズ(個数)を取得するには、length プロパティを使用します。
 
for 文を使って、0 から順番にアクセスします。
 
0 から順番に、すべての番地のデータにアクセスする

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// ------------------------------------------------------------
	// 初期データを格納しつつ、Float64Array オブジェクトを作成する(環境依存に注意)
	// ------------------------------------------------------------
	var ary_f64 = new Float64Array([1.0 , 1.1 , 1.2 , 1.3 , 1.4 , 1.5]);

	// ------------------------------------------------------------
	// 0 から順番に、すべての番地のデータにアクセスする
	// ------------------------------------------------------------
	var i;
	var num = ary_f64.length;
	for(i=0;i < num;i++){
		console.log("---");
		console.log("index:" + i);
		console.log("data:"  + ary_f64[i]);
	}

}
 
■ for..in 文を使用する
 
for..in 文を使って、アクセスする例です。
 
番地を取得できるので、配列アクセス演算子を使ってデータにアクセスします。
 
for..in 文を使用して、すべての番地のデータにアクセスする

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// ------------------------------------------------------------
	// 初期データを格納しつつ、Int32Array オブジェクトを作成する (環境依存に注意)
	// ------------------------------------------------------------
	var ary_s32 = new Int32Array([990 , 991 , 992 , 993 , 994 , 995]);

	// ------------------------------------------------------------
	// for..in 文を使用して、すべての番地のデータにアクセスする
	// ------------------------------------------------------------
	var key;
	for (key in ary_s32){
		console.log("---");
		console.log("index:" + key);
		console.log("data:"  + ary_s32[key]);
	}

}
 


 

TypedArray のサブクラスの一覧

 


■TypedArray のサブクラスの一覧


TypedArray のサブクラスの一覧です。
 
これらのサブクラスは、使用したいデータの型によって使い分ける必要があります。
 
クラス名 要素のサイズ 説明
Int8Array 1 8bit整数(符号あり)
Uint8Array 1 8bit整数(符号なし)
Uint8ClampedArray 1 8bit整数(符号なし)(クランプあり)
Int16Array 2 16bit整数(符号あり)
Uint16Array 2 16bit整数(符号なし)
Int32Array 4 32bit整数(符号あり)
Uint32Array 4 32bit整数(符号なし)
Float32Array 4 32bit浮動小数点数
Float64Array 8 64bit浮動小数点数
 
■クランプについて

要素のサイズより大きい値を使って、書き込みを試みた場合、クランプの有無によって結果が異なります。
 
クランプが無い場合、要素のサイズ内に収まる、下位ビットのみが書き込まれます。
 
クランプが有る場合、要素のサイズ内で表現できる、最小と最大の範囲内に収められます
 
例えば、Uint8ClampedArray クラスの場合、「 0 より小さい値は 0 」「 255 より大きい値は 255 」に収まります。
 
クランプの動作テスト

var ary_u8;

// ------------------------------------------------------------
// Uint8Array オブジェクトを作成する
// ------------------------------------------------------------
ary_u8 = new Uint8Array([0x12,0xFF34,-0x02]); // [ 0x00000012 , 0x0000FF34 , 0xfffffffe ]

// 出力テスト
console.log(ary_u8[0]); //  18 (0x12)
console.log(ary_u8[1]); //  52 (0x34)
console.log(ary_u8[2]); // 254 (0xfe)


// ------------------------------------------------------------
// Uint8ClampedArray オブジェクトを作成する
// ------------------------------------------------------------
ary_u8 = new Uint8ClampedArray([0x12,0xFF34,-0x02]); // [ 18 , 65332 , -2 ]

// 出力テスト
console.log(ary_u8[0]); //  18 (0x12)
console.log(ary_u8[1]); // 255 (0xff)
console.log(ary_u8[2]); //   0 (0x00)
 
 

 

TypedArray クラスのプロパティについて

 


■TypedArray クラスのプロパティ


TypedArray クラスには、以下のプロパティがあります。
 
プロパティ 説明
buffer ArrayBuffer ArrayBuffer オブジェクトを取得する。(読み取り専用)
byteOffset Number ビューの開始位置(バイト数)を取得する。
byteLength Number ビューからアクセス可能なサイズ(バイト数)を取得する。(読み取り専用)
length Number ビューからアクセス可能なサイズ(配列の個数)を取得する。(読み取り専用)
BYTES_PER_ELEMENT Number ビューの要素1つ分のサイズを取得する。(読み取り専用)
 
 


■ buffer プロパティ


TypedArray オブジェクトから、ArrayBuffer オブジェクトを取得するには、buffer プロパティを使用します。
 
TypedArray コンストラクタを使って、オブジェクトを生成した場合に取得するといいでしょう。
 
■取得例
 
ArrayBuffer オブジェクトを取得する

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// 初期個数を指定して、Int32Array オブジェクトを作成する
	var ary_s32 = new Int32Array(16);

	// ArrayBuffer オブジェクトを取得する
	var ary_buffer = ary_s32.buffer;

	// 出力テスト
	console.log(ary_buffer);

}
 

■byteOffset と byteLength と length プロパティ


ビューの開始位置(バイト数)を取得するには、byteOffset プロパティを使用します。
 
ビューからアクセス可能なサイズ(バイト数)を取得するには、byteLength プロパティを使用します。
 
ビューからアクセス可能なサイズ(配列の個数)を取得するには、length プロパティを使用します。
 
■取得例
 
ビューの開始位置とアクセス可能なサイズを調べる

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// ------------------------------------------------------------
	// 初期サイズを指定して、ArrayBuffer オブジェクトを作成する
	// ------------------------------------------------------------
	var ary_buffer = new ArrayBuffer(128);

	// バッファの総サイズ
	console.log(ary_buffer.byteLength); // 128

	// ------------------------------------------------------------
	// 既存のバッファを使って、Int32Array オブジェクトを作成する (開始位置を指定)
	// ------------------------------------------------------------
	var ary_s32 = new Int32Array(ary_buffer,32);

	// ビューの開始位置(バイト数)
	console.log(ary_s32.byteOffset); // 32

	// ビューからアクセス可能なサイズ(バイト数)
	console.log(ary_s32.byteLength); // 96

	// ビューからアクセス可能なサイズ(配列の個数)
	console.log(ary_s32.length); // 24 (byteLength / BYTES_PER_ELEMENT と同等)

	// ------------------------------------------------------------
	// 既存のバッファを使って、Int16Array オブジェクトを作成する (開始位置と配列の個数を指定)
	// ------------------------------------------------------------
	var num = 16;
	var ary_s16 = new Int16Array(ary_buffer,64,num);

	// ビューの開始位置(バイト数)
	console.log(ary_s16.byteOffset); // 64

	// ビューからアクセス可能なサイズ(バイト数)
	console.log(ary_s16.byteLength); // 32 (num * BYTES_PER_ELEMENT と同等)

	// ビューからアクセス可能なサイズ(配列の個数)
	console.log(ary_s16.length); // 16

}
 

■BYTES_PER_ELEMENT プロパティ


ビューの要素1つ分のサイズを取得するには、BYTES_PER_ELEMENT プロパティを使用します。
 
定数の一種です。TypedArray インスタンスから取得する事もできます。
 
■取得例
 
BYTES_PER_ELEMENT プロパティ値を取得する

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	console.log(    Int8Array.BYTES_PER_ELEMENT ); // 1( 8bit整数 符号あり)
	console.log(   Uint8Array.BYTES_PER_ELEMENT ); // 1( 8bit整数 符号なし)
	console.log(   Int16Array.BYTES_PER_ELEMENT ); // 2(16bit整数 符号あり)
	console.log(  Uint16Array.BYTES_PER_ELEMENT ); // 2(16bit整数 符号なし)
	console.log(   Int32Array.BYTES_PER_ELEMENT ); // 4(32bit整数 符号あり)
	console.log(  Uint32Array.BYTES_PER_ELEMENT ); // 4(32bit整数 符号なし)
	console.log( Float32Array.BYTES_PER_ELEMENT ); // 4(32bit浮動小数点数)
	console.log( Float64Array.BYTES_PER_ELEMENT ); // 8(64bit浮動小数点数)

	var ary_u8 = new Uint8ClampedArray();
	console.log(ary_u8.BYTES_PER_ELEMENT); // 1( 8bit整数 符号なし クランプあり)

}
 


 

TypedArray クラスのメソッドについて

 


■TypedArray クラスのメソッド一覧


TypedArray クラスには、以下のメソッドがあります。
 
メソッド 説明
set() 配列や「別の TypedArray オブジェクト」を使って、データをまとめて格納する。
subarray() ビューの開始位置と終了位置を指定して、新しい TypedArray オブジェクトを生成する。
 
 


■set() メソッド

 
「Array オブジェクト」や「別の TypedArray オブジェクト」を使って、データをまとめて格納するには、set() メソッドを使用します。
 
マルチバイトサイズの型を使用する場合、エンディアン方式の違いを、考慮する必要があります。
 
エンディアンについては、こちらで解説しています。
 
TypedArray.set( [まとめて格納したいデータ] , 開始位置 ) :Void
第01引数 *まとめて格納したいデータを指定する。「Array オブジェクト」や「別の TypedArray オブジェクト」の指定が可能。
第02引数(略可)Number開始位置を、配列の番地で指定する。省略した場合 0 と同等。
戻り値 Voidなし
 
■使用例
 
配列を使って、データをまとめてセットする

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// Int32Array オブジェクトを作成する
	var ary_s32 = new Int32Array(8);

	// 配列を使って、データをまとめてセットする(環境依存に注意)
	ary_s32.set([-4,-3,-2,-1],3);

	// 出力テスト
	console.log(ary_s32); // [0, 0, 0, -4, -3, -2, -1, 0]

}
 

■subarray() メソッド

 
ビューの開始位置と終了位置を指定して、新しい TypedArray オブジェクトを生成するには、subarray() メソッドを使用します。
 
ArrayBuffer オブジェクトは、新しく生成されません。
 
バッファは、呼び出し元と共有されます。
 
第02引数で指定する終了位置は、取得対象に含まれません。
 
TypedArray.subarray( 開始位置 , 終了位置 ) :TypedArray
第01引数 Number開始位置を、配列の番地で指定する。
第02引数(略可)Number終了位置を、配列の番地で指定する。省略した場合、最後尾まで含まれる。
戻り値 TypedArray新しい TypedArray オブジェクトが得られる。(型は呼び出し元と同じ)
 
■使用例
 
ビューの開始位置と終了位置を指定して、新しい TypedArray を生成する

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// Uint16Array オブジェクトを作成する
	var ary_u16_a = new Uint16Array([0,1,2,3,4,5]);

	// ビューの開始位置と終了位置を指定して、新しい Uint16Array を生成する
	var ary_u16_b = ary_u16_a.subarray(1,3);

	// 出力テスト
	console.log(ary_u16_a); // [0,1,2,3,4,5]
	console.log(ary_u16_b); // [1,2]
	console.log(ary_u16_a.buffer === ary_u16_b.buffer); // true

}
 
 

 

エンディアンについて

 
 


■エンディアンとは?


エンディアンとは、メモリの配置の方式です。
 
ビッグエンディアンリトルエンディアンの2通りの方式があります。
 
CPU ごとに、エンディアン方式が決まっています。
 
例えば、インテルの x86系 CPU は、リトルエンディアン方式です。
 
例えば、モトローラの 68000系 CPU は、ビッグエンディアン方式です。
 
■ビッグエンディアン

ビッグエンディアン方式は、上位バイトからデータが格納されます。
 
バッファのバイトの並び順通りに、変数上に格納されるので、視覚的にわかりやすくなります。
 
 
■リトルエンディアン

リトルエンディアン方式は、下位バイトからデータが格納されます。
 
バッファのバイトの並びと、実際に変数上に格納される順番が、反転します。
 
下位バイトからデータが格納される事になるので、どんなサイズで変数に格納しても下位は揃います。
 
上位の桁の切捨てが、容易になります。
 
 

■TypedArray クラスのエンディアンについて

 
■TypedArray クラスのエンディアン方式について
 
マルチバイト型の TypedArray サブクラスを利用する場合、エンディアンを考慮する必要があります。
 
JavaScript を動作させている CPU 環境と同じエンディアン方式で動作します。この仕様は要注意です。
 
■エンディアン方式を考慮する必要がない場合とは?
 
型付き配列の利用範囲が、JavaScript を動作させている環境内だけで完結する場合、エンディアン方式を気にする必要はありません。
 
配列として使用している場合などです。
 
■エンディアン方式を考慮する必要がある場合とは?
 
メジャーなファイルフォーマットのバイナリデータを利用したい場合、エンディアン方式を使い分ける必要があります。
 
例えば、「Windows Bitmap (*.bmp) 形式」は、リトルエンディアンです。
 
例えば、「Portable Network Graphics (*.png) 形式」は、ビッグエンディアンです。
 
また、自前でバイナリデータを作成して、他の環境でも利用する場合は、エンディアン方式をどちらかに統一する必要があります。
 
さもなくば、異なるエンディアン環境では動作しなくなる、環境依存のプログラムが出来上がります。
 

■対応策について

 
■DataView クラスのみを使用する
 
DataView クラスを使用すると、簡単にエンディアン方式を指定する事ができます。
 
DataView クラスのメソッドの一覧については、こちらで解説しています。
 
■ TypedArray クラス と DataView クラスの両方のパターンを実装する
 
DataView クラスを使用した場合と、TypedArray クラスを使用した場合の、両方のパターンを実装しておきます。
 
現在の CPU のエンディアン方式と、利用したいエンディアン方式が一致するか調べます。
 
エンディアン方式が一致している場合に限って、TypedArray クラスのパターンを動作させます。
 
一致していない場合は、DataView クラスのパターンを動作させます。
 
■TypedArray クラスのみを使用する
 
Int8Array や Uint8Array クラスなどの、シングルバイト型のみを使用して、1 Byte ずつアクセスします。
 
バイトの並び方を自前で変換しながら、バイナリデータを取り扱います。
 

■リトルエンディアン方式で動作しているか調べる関数

 
リトルエンディアン方式で動作しているか調べる関数

// ------------------------------------------------------------
// リトルエンディアン方式で動作しているか調べる関数
// ------------------------------------------------------------
function SystemGetExecutedInLittleEndian(){
	if((new Uint8Array((new Uint16Array([0x00ff])).buffer))[0]) return true;
	return false;
}
 

■異なるエンディアン環境での出力結果を確認する

 
ArrayBuffer から、マルチバイトサイズな変数に読み込んだ場合

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// 初期データを格納しつつ、Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array( [0x00,0x01,0x02,0x03,0x04,0x05,0x06,0x07,0x08,0x09,0x0a,0x0b,0x0c,0x0d,0x0e,0x0f] );

	// ArrayBuffer オブジェクトを取得する
	var ary_buffer = ary_u8.buffer;

	// Uint16Array オブジェクトを作成する
	var ary_u16 = new Uint16Array(ary_buffer);

	// Uint32Array オブジェクトを作成する
	var ary_u32 = new Uint32Array(ary_buffer);

	// ------------------------------------------------------------
	// ビッグエンディアン環境の場合
	// ------------------------------------------------------------
	// 出力テスト
	console.log(ary_u8 ); // [0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x0a, 0x0b, 0x0c, 0x0d, 0x0e, 0x0f]
	console.log(ary_u16); // [0x0001, 0x0203, 0x0405, 0x0607, 0x0809, 0x0a0b, 0x0c0d, 0x0e0f]
	console.log(ary_u32); // [0x00010203, 0x04050607, 0x08090a0b, 0x0c0d0e0f]

	// ------------------------------------------------------------
	// リトルエンディアン環境の場合
	// ------------------------------------------------------------
	// 出力テスト
	console.log(ary_u8 ); // [0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x0a, 0x0b, 0x0c, 0x0d, 0x0e, 0x0f]
	console.log(ary_u16); // [0x0100, 0x0302, 0x0504, 0x0706, 0x0908, 0x0b0a, 0x0d0c, 0x0f0e]
	console.log(ary_u32); // [0x03020100, 0x07060504, 0x0b0a0908, 0x0f0e0d0c]

}
 
マルチバイトサイズな変数から、ArrayBuffer に書き込んだ場合

// ArrayBuffer に対応している
if(window.ArrayBuffer){

	// バッファの位置
	var pos = 0;

	// ArrayBuffer オブジェクトを作成する
	var ary_buffer = new ArrayBuffer(16);

	// Uint32Array オブジェクトを作成する
	var ary_u32 = new Uint32Array( ary_buffer );

	// 4 Byte ずつ書き込み
	ary_u32[0] = 0x03020100;
	pos += ary_u32.BYTES_PER_ELEMENT;
	ary_u32[1] = 0x07060504;
	pos += ary_u32.BYTES_PER_ELEMENT;

	// Uint16Array オブジェクトを作成する
	var ary_u16 = new Uint16Array( ary_buffer , pos);

	// 2 Byte ずつ書き込み
	ary_u16[0] = 0x0908;
	pos += ary_u16.BYTES_PER_ELEMENT;
	ary_u16[1] = 0x0b0a;
	pos += ary_u16.BYTES_PER_ELEMENT;
	ary_u16[2] = 0x0d0c;
	pos += ary_u16.BYTES_PER_ELEMENT;
	ary_u16[3] = 0x0f0e;
	pos += ary_u16.BYTES_PER_ELEMENT;

	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array( ary_buffer );

	// ------------------------------------------------------------
	// 出力テスト (ビッグエンディアン環境の場合)
	// ------------------------------------------------------------
	console.log(ary_u8); // [0x03,0x02,0x01,0x00 , 0x07,0x06,0x05,0x04 , 0x09,0x08 , 0x0b,0x0a , 0x0d,0x0c , 0x0f,0x0e]

	// ------------------------------------------------------------
	// 出力テスト (リトルエンディアン環境の場合)
	// ------------------------------------------------------------
	console.log(ary_u8); // [0x00,0x01,0x02,0x03 , 0x04,0x05,0x06,0x07 , 0x08,0x09 , 0x0a,0x0b , 0x0c,0x0d , 0x0e,0x0f]

}