JavaScript プログラミング講座

 

ArrayBuffer クラスとは?

 


■ArrayBuffer クラスについて

 
■ArrayBuffer クラスについて(バッファ)
 
ArrayBuffer クラスを使用すると、バイナリデータを取り扱う事ができます。
 
ArrayBuffer クラスを使用すると、物理メモリの領域(バッファ)を確保する事ができます。
 
ArrayBuffer クラスだけでは、バッファに入出力アクセスする事はできません。
 
バッファに入出力アクセスするには、別途 ArrayBufferView(ビュー) のサブクラスを使用する必要があります。
 
■ArrayBufferView クラスについて(ビュー)
 
ArrayBufferView のサブクラスを使用すると、バイナリデータに入出力アクセスする事ができます。
 
ArrayBuffer の実体は、物理メモリの領域(バッファ)です。
 
よってビューには、Array クラスにあるような、配列の挿入や切除といった便利なメソッドは存在しません
 
ビューには、大きく分けて TypedArrayDataView の2つの種類があります。
 
■TypedArray クラスについて (型付き配列)
 
高速でバッファに入出力アクセスするには、TypedArray クラスを使用します。
 
TypedArray クラスについては、こちらで解説しています。
 
アライメント(バイト境界)や、エンディアン方式を考慮する必要があり、少々難解です。
 
■DataView クラスについて
 
より高機能なメソッドを使って、バッファに入出力アクセスするには、DataView クラスを使用します。
 
通常は、こちらのクラスを使用するといいでしょう。
 

■ブラウザが ArrayBuffer をサポートしているか調べる

 
window.ArrayBuffer が真であるか比較します。
 
Internet Explorer 9 以前では利用できません。
 
 
 

 

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

 
 


■ ArrayBuffer オブジェクトを作成する(ArrayBuffer コンストラクタ)

 
ArrayBuffer オブジェクトを作成するには、new 演算子を使って、ArrayBuffer クラスをインスタンス化します。
 
new ArrayBuffer ( バイトサイズ ) :ArrayBuffer
第01引数(略可)Number確保したいバッファのサイズをバイト数で指定。最大で 4294967295。デフォルトでは 0。
戻り値 ArrayBufferArrayBuffer オブジェクトが得られる
 
■第01引数(確保したいバッファのバイトサイズ)
 
第01引数から、確保したいバッファのバイトサイズを指定します。
 
これは、仮想的な数値ではありません。実際に物理メモリの確保を試みます。
 
巨大なバイト数を指定した場合、環境によって失敗する事がありえるので注意して下さい。
 
物理メモリの確保に失敗した場合、エラーが発生します。
 
物理メモリの確保に成功した場合、バイナリの中身は、すべて 0 で初期化されています。
 
ArrayBuffer オブジェクトを生成した後で、バッファのサイズを変更する事はできません。
 
よって、サイズの指定は重要です。第01引数を省略しても意味がありません。
 
■作成例
 
初期サイズを指定して、ArrayBuffer オブジェクトを作成する

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

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

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

}
 
巨大なバイトサイズを指定して、生成に失敗した場合の動作を確認する

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

	var ary_buffer;

	try{
		// 約 4 GByte を指定して、ArrayBuffer オブジェクトの生成を試みる
		ary_buffer = new ArrayBuffer(0xffffffff);

		console.log("メモリの確保に成功:" + ary_buffer.byteLength);

	}catch(e){
		console.log("メモリの確保に失敗した");
	}

}
 


 

バイナリデータに入出力アクセスする

 
 


■バイナリデータに入出力アクセスする(TypedArray クラスを使用)

 
■TypedArray クラスの特長
 
TypedArray クラスを使用すると、「ArrayBuffer オブジェクトが保有しているバッファ」に高速でアクセスできます。
 
TypedArray クラスには、高機能なメソッドがありません。
 
アライメント(バイト境界)エンディアン方式の違いなどを、自前で考慮する必要があります。
 
■ArrayBuffer オブジェクトを使って、TypedArray オブジェクトを作成する
 
new 演算子を使って、TypedArray のサブクラスをインスタンス化します。
 
TypedArray のサブクラス一覧については、こちらで解説しています。
 
第01引数に、ArrayBuffer オブジェクトを指定した場合の動作です。
 
new TypedArray ( ArrayBuffer , 開始位置 , 配列の個数 ) :TypedArray
第01引数 ArrayBufferアクセスしたい ArrayBuffer オブジェクトを指定する。
第02引数(略可)Numberビューの開始位置を、バイト数で指定する。
第03引数(略可)Numberビューからアクセス可能なサイズを、配列の個数で指定する。(バイトサイズではない)
省略した場合、最後尾まで含まれる。
戻り値 TypedArrayTypedArray オブジェクトが得られる。
 
■アライメント(バイト境界)について
 
第02引数と第03引数は、アライメント(バイト境界)を守る必要があります。
 
違反した場合、エラーが発生します。
 
例えば、Uint16Array クラスを使用する場合、2 の倍数 (2,4,6,8,10,12 ...) である必要があります。
 
例えば、Int32Array クラスを使用する場合、4 の倍数 (4,8,12,16,20,24 ...) である必要があります。
 
例えば、Float64Array クラスを使用する場合、8 の倍数 (8,16,24,32,40,48 ...) である必要があります。
 
第03引数は、省略した場合に違反となる事があります。
 
例えば、バッファのサイズが 11 Byte であるときに、Float32Array クラスを使用すると、最後尾の要素が 4 の倍数に収まらない為に違反となります。
 
■エンディアン方式の違いについて
 
マルチバイトサイズとなる型のクラスを利用する場合、エンディアン方式の違いを考慮する必要があります。
 
エンディアンについては、こちらで解説しています。
 
■作成例
 
Int8Array オブジェクトを作成する

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

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

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

	// 出力テスト
	console.log(ary_s8); // [0, 0, 0, 0, 0, 0, 0, 0]
}
 
開始位置を指定して、Uint16Array オブジェクトを作成する

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

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

	// 開始位置を指定して、Uint16Array オブジェクトを作成する(開始位置は、2 の倍数である必要がある)
	var ary_u16 = new Uint16Array( ary_buffer , 2 );

	// 出力テスト
	console.log(ary_u16); // [0, 0, 0]
}
 
開始位置と配列の個数を指定して、Uint32Array オブジェクトを作成する

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

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

	// 開始位置と配列の個数を指定して、Uint32Array オブジェクトを作成する(開始位置は、4 の倍数である必要がある)
	var ary_u32 = new Uint32Array( ary_buffer , 32 , 2);

	// 出力テスト
	console.log(ary_u32); // [0, 0]
}
 

■TypedArray オブジェクトからバイナリデータにアクセスする

 
TypedArray オブジェクトは、配列アクセス演算子を使って、配列のようにアクセスする事ができます。
 
配列としてアクセス可能なサイズを取得するには、length プロパティを使用します。
 
■読み取りアクセス例
 
読み取りアクセス例

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


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

	// ビッグエンディアン方式を使用する
	var little_endian = false;

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

	// 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;

	// ------------------------------------------------------------
	// CPU のエンディアン方式と、バッファのエンディアン方式が一致しているか調べる
	// ------------------------------------------------------------
	if(SystemGetExecutedInLittleEndian() == little_endian){

		// ------------------------------------------------------------
		// エンディアン方式が一致しているので、TypedArray クラスを採用する
		// ------------------------------------------------------------
		// Uint32Array オブジェクトを作成する
		var ary_u32 = new Uint32Array( ary_buffer , pos );

		// 4 Byte ずつ読み込み
		console.log( ary_u32[0] ); // 0x00010203
		pos += ary_u32.BYTES_PER_ELEMENT;
		console.log( ary_u32[1] ); // 0x04050607
		pos += ary_u32.BYTES_PER_ELEMENT;

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

		// 2 Byte ずつ読み込み
		console.log( ary_u16[0] ); // 0x0809
		pos += ary_u16.BYTES_PER_ELEMENT;
		console.log( ary_u16[1] ); // 0x0a0b
		pos += ary_u16.BYTES_PER_ELEMENT;
		console.log( ary_u16[2] ); // 0x0c0d
		pos += ary_u16.BYTES_PER_ELEMENT;
		console.log( ary_u16[3] ); // 0x0e0f
		pos += ary_u16.BYTES_PER_ELEMENT;

	}else{

		// ------------------------------------------------------------
		// エンディアン方式が一致していないので、DataView クラスを採用する
		// ------------------------------------------------------------
		// DataView オブジェクトを作成する
		var data_view = new DataView( ary_buffer );

		// 4 Byte ずつ読み込み
		console.log( data_view.getUint32(pos,little_endian) ); // 0x00010203
		pos += 4;
		console.log( data_view.getUint32(pos,little_endian) ); // 0x04050607
		pos += 4;

		// 2 Byte ずつ読み込み
		console.log( data_view.getUint16(pos,little_endian) ); // 0x0809
		pos += 2;
		console.log( data_view.getUint16(pos,little_endian) ); // 0x0a0b
		pos += 2;
		console.log( data_view.getUint16(pos,little_endian) ); // 0x0c0d
		pos += 2;
		console.log( data_view.getUint16(pos,little_endian) ); // 0x0e0f
		pos += 2;
	}

}
 
■書き込みアクセス例
 
書き込みアクセス例

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


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

	// リトルエンディアン方式を使用する
	var little_endian = true;

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

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

	// ------------------------------------------------------------
	// CPU のエンディアン方式と、バッファのエンディアン方式が一致しているか調べる
	// ------------------------------------------------------------
	if(SystemGetExecutedInLittleEndian() == little_endian){

		// ------------------------------------------------------------
		// エンディアン方式が一致しているので、TypedArray クラスを採用する
		// ------------------------------------------------------------
		// Uint32Array オブジェクトを作成する
		var ary_u32 = new Uint32Array( ary_buffer , pos );

		// 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;

	}else{

		// ------------------------------------------------------------
		// エンディアン方式が一致していないので、DataView クラスを採用する
		// ------------------------------------------------------------
		// DataView オブジェクトを作成する
		var data_view = new DataView( ary_buffer );

		// 4 Byte ずつ書き込み
		data_view.setUint32( pos , 0x03020100 , little_endian );
		pos += 4;
		data_view.setUint32( pos , 0x07060504 , little_endian );
		pos += 4;

		// 2 Byte ずつ書き込み
		data_view.setUint16( pos , 0x0908 , little_endian );
		pos += 2;
		data_view.setUint16( pos , 0x0b0a , little_endian );
		pos += 2;
		data_view.setUint16( pos , 0x0d0c , little_endian );
		pos += 2;
		data_view.setUint16( pos , 0x0f0e , little_endian );
		pos += 2;
	}

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

	// 出力テスト
	console.log(ary_u8); // [0x00,0x01,0x02,0x03 , 0x04,0x05,0x06,0x07 , 0x08,0x09 , 0x0a,0x0b , 0x0c,0x0d , 0x0e,0x0f]

}
 

■バイナリデータに入出力アクセスする(DataView クラスを使用)

 
■DataView クラスの特長
 
DataView クラスを使用すると、「ArrayBuffer オブジェクトが保有しているバッファ」に低速でアクセスできます。
 
DataView クラスには、高機能なメソッドが存在します。
 
エンディアン方式は、メソッドを利用する事で使い分けることができます。
 
アライメント(バイト境界)を考慮する必要はありません。
 
エラーが発生するのは、アクセスを試みた領域が、バッファの総サイズを超えていた時だけです。
 
■ArrayBuffer オブジェクトを使って、TypedArray オブジェクトを作成する
 
new 演算子を使って、DataView のサブクラスをインスタンス化します。
 
第01引数に、ArrayBuffer オブジェクトを指定します。
 
new DataView ( ArrayBuffer , 開始位置 , サイズ ) :DataView
第01引数 ArrayBufferアクセスしたい ArrayBuffer オブジェクトを指定する。
第02引数(略可)Numberビューの開始位置を、バイト数で指定する。
第03引数(略可)Numberビューからアクセス可能なサイズを、バイト数で指定する。
戻り値 DataViewDataView オブジェクトが得られる。
 
■作成例
 
DataView オブジェクトを作成する

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

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

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

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

■DataView オブジェクトからバイナリデータにアクセスする

 
バイナリデータにアクセスするためには、必ずメソッドを使用する必要があります。
 
DataView クラスのメソッドの一覧については、こちらで解説しています。
 
DataView オブジェクトから、配列アクセス演算子を使用する事はできません。
 
■読み取りアクセス例
 
読み取りアクセス例

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

	// ビッグエンディアン方式を使用する
	var little_endian = false;

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

	// 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;

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

	// 4 Byte ずつ読み込み
	console.log( data_view.getUint32(pos,little_endian) ); // 0x00010203
	pos += 4;
	console.log( data_view.getUint32(pos,little_endian) ); // 0x04050607
	pos += 4;

	// 2 Byte ずつ読み込み
	console.log( data_view.getUint16(pos,little_endian) ); // 0x0809
	pos += 2;
	console.log( data_view.getUint16(pos,little_endian) ); // 0x0a0b
	pos += 2;
	console.log( data_view.getUint16(pos,little_endian) ); // 0x0c0d
	pos += 2;
	console.log( data_view.getUint16(pos,little_endian) ); // 0x0e0f
	pos += 2;

}
 
■書き込みアクセス例
 
書き込みアクセス例

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

	// リトルエンディアン方式を使用する
	var little_endian = true;

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

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

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

	// 4 Byte ずつ書き込み
	data_view.setUint32( pos , 0x03020100 , little_endian );
	pos += 4;
	data_view.setUint32( pos , 0x07060504 , little_endian );
	pos += 4;

	// 2 Byte ずつ書き込み
	data_view.setUint16( pos , 0x0908 , little_endian );
	pos += 2;
	data_view.setUint16( pos , 0x0b0a , little_endian );
	pos += 2;
	data_view.setUint16( pos , 0x0d0c , little_endian );
	pos += 2;
	data_view.setUint16( pos , 0x0f0e , little_endian );
	pos += 2;

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

	// 出力テスト
	console.log(ary_u8); // [0x00,0x01,0x02,0x03 , 0x04,0x05,0x06,0x07 , 0x08,0x09 , 0x0a,0x0b , 0x0c,0x0d , 0x0e,0x0f]

}
 

■バイナリデータと文字列を相互変換する(Encoding API を使用)

 
■「ArrayBuffer」から「文字列」に変換する
 
TextDecoder クラスを使用します。
 
■「文字列」から「ArrayBuffer」に変換する
 
TextEncoder クラスを使用します。
 


 

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

 


■ArrayBuffer クラスのプロパティ


ArrayBuffer クラスには、以下のプロパティがあります。
 
プロパティ 説明
byteLength Number バッファの総バイトサイズを取得する(読み取り専用)
 
 


■ byteLength プロパティ


ArrayBuffer オブジェクト内部で確保している、バッファの総バイトサイズを取得するには、byteLength プロパティを使用します。
 
byteLength プロパティは、読み取り専用です。
 
■取得例
 
バッファの総バイトサイズを調べる

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

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

	// バッファの総バイトサイズを取得する
	var byte_size = ary_buffer.byteLength;

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

}
 


 

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

 


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


ArrayBuffer クラスには、以下のメソッドがあります。
 
メソッド 説明
slice() バッファの開始位置と終了位置を指定して、新しい ArrayBuffer オブジェクトを生成する。
 
 


■slice() メソッド

 
バッファの開始位置と終了位置を指定して、新しい ArrayBuffer オブジェクトを生成するには、slice() メソッドを使用します。
 
第02引数で指定する終了位置は、取得対象に含まれません。
 
ArrayBuffer.slice( 開始位置 , 終了位置 ) :ArrayBuffer
第01引数 Number開始位置をバイト数で指定する。
第02引数(略可)Number終了位置をバイト数で指定する。省略した場合、最後尾まで含まれる。
戻り値 ArrayBuffer新しい ArrayBuffer オブジェクトが得られる。
 
■取得例
 
バッファの開始位置と終了位置を指定して、新しい ArrayBuffer を生成する

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

	// 初期パラメータを指定しつつ、ArrayBuffer オブジェクトを作成する
	var ary_buffer0 = (new Uint8Array([0,1,2,3,4,5])).buffer;

	// バッファの開始位置と終了位置を指定して、新しい ArrayBuffer を生成する
	var ary_buffer1 = ary_buffer0.slice(1,3);

	// 出力テスト
	console.log(new Uint8Array(ary_buffer0)); // [0,1,2,3,4,5]
	console.log(new Uint8Array(ary_buffer1)); // [1,2]

}
 
 

 

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

 


■DataView クラスのプロパティ


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


■byteOffset と byteLength プロパティ


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

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

	var dat_view;

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

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

	// ------------------------------------------------------------
	// 開始位置を指定して、DataView オブジェクトを作成する
	// ------------------------------------------------------------
	var dat_view = new DataView(ary_buffer,32);

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

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

	// ------------------------------------------------------------
	// 開始位置とサイズを指定して、DataView オブジェクトを作成する
	// ------------------------------------------------------------
	var dat_view = new DataView(ary_buffer,64,16);

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

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

}
 


 

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

 


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


DataView クラスには、以下のメソッドがあります。
 
メソッド 説明
getInt8() バッファから 8bit整数値(符号あり)を読み込む。
getUint8() バッファから 8bit整数値(符号なし)を読み込む。
getInt16() バッファから 16bit整数値(符号あり)を読み込む。
getUint16() バッファから 16bit整数値(符号なし)を読み込む。
getInt32() バッファから 32bit整数値(符号あり)を読み込む。
getUint32() バッファから 32bit整数値(符号なし)を読み込む。
getFloat32() バッファから 32bit浮動小数点数を読み込む。
getFloat64() バッファから 64bit浮動小数点数を読み込む。
 
setInt8() バッファへ 8bit整数値(符号あり)を書き込む。
setUint8() バッファへ 8bit整数値(符号なし)を書き込む。
setInt16() バッファへ 16bit整数値(符号あり)を書き込む。
setUint16() バッファへ 16bit整数値(符号なし)を書き込む。
setInt32() バッファへ 32bit整数値(符号あり)を書き込む。
setUint32() バッファへ 32bit整数値(符号なし)を書き込む。
setFloat32() バッファへ 32bit浮動小数点数を書き込む。
setFloat64() バッファへ 64bit浮動小数点数を書き込む。
 
 


■シングルバイトサイズの値を読み取るメソッド

 
シングルバイトサイズの値を読み取る、メソッドの仕様です。
 
DataView.getXXXXX( 開始位置 ) :Number
第01引数 Number読み取り開始位置をバイト数で指定する。(ビューの開始位置が 0 となる)
戻り値 Numberメソッドに応じた値が得られる。
 
■使用例
 
DataView のメソッドを使って、シングルバイトサイズの値を読み取る

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

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

	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array( [0x00,0x01,0x02,0xFF,0xFE,0xFD] );

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

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

	// 1 Byte ずつ読み込み
	console.log( data_view.getUint8(pos) ); // 0 (0x00)
	pos += 1;
	console.log( data_view.getUint8(pos) ); // 1 (0x01)
	pos += 1;
	console.log( data_view.getUint8(pos) ); // 2 (0x02)
	pos += 1;
	console.log( data_view.getInt8(pos) ); // -1 (0xff)
	pos += 1;
	console.log( data_view.getInt8(pos) ); // -2 (0xfe)
	pos += 1;
	console.log( data_view.getInt8(pos) ); // -3 (0xfd)
	pos += 1;

}
 

■マルチバイトサイズの値を読み取るメソッド

 
マルチバイトサイズの値を読み取る、メソッドの仕様です。
 
第02引数から、エンディアン方式の指定が可能です。
 
DataView.getXXXXX( 開始位置 , リトルエンディアンを使用するか? ) :Number
第01引数 Number読み取り開始位置をバイト数で指定する。(ビューの開始位置が 0 となる)
第02引数(略可)Booleanリトルエンディアン方式を使用する場合 true を指定。省略した場合ビッグエンディアン方式を使用する。デフォルトは false。
戻り値 Numberメソッドに応じた値が得られる。
 
■使用例
 
DataView のメソッドを使って、マルチバイトサイズの値を読み取る

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

	// ビッグエンディアン方式を使用する
	var little_endian = false;

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

	// Uint8Array オブジェクトを作成する
	var ary_u8 = new Uint8Array( [0x12,0x34 , 0xfe,0xdc , 0x12,0x34,0x56,0x78 , 0xfe,0xdc,0xba,0x98 , 0x40,0x12,0x00,0x00 , 0xc0,0xfe,0xdc,0xba,0x00,0x00,0x00,0x00] );

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

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

	// 2 Byte ずつ読み込み
	console.log( data_view.getUint16(pos,little_endian) ); // 4660 (0x1234)
	pos += 2;
	console.log( data_view.getInt16(pos,little_endian) ); // -292 (0xfedc)
	pos += 2;

	// 4 Byte ずつ読み込み
	console.log( data_view.getUint32(pos,little_endian) ); // 305419896 (0x12345678)
	pos += 4;
	console.log( data_view.getInt32(pos,little_endian) ); // -19088744 (0xfedcba98)
	pos += 4;
	console.log( data_view.getFloat32(pos,little_endian) ); // 2.28125 (0x40120000)
	pos += 4;

	// 8 Byte ずつ読み込み
	console.log( data_view.getFloat64(pos,little_endian) ); // -126411.625 (0xc0fedcba00000000)
	pos += 8;

}
 

■シングルバイトサイズの値を書き込むメソッド

 
シングルバイトサイズの値を書き込む、メソッドの仕様です。
 
DataView.setXXXXX( 開始位置 , 値 ) :Void
第01引数 Number書き込み開始位置をバイト数で指定する。(ビューの開始位置が 0 となる)
第02引数 Number書き込みたい値を指定する。
戻り値 Voidなし。
 
■使用例
 
DataView のメソッドを使って、シングルバイトサイズの値を書き込む

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

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

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

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

	// 1 Byte ずつ書き込み
	data_view.setUint8(pos , 0); // 0x00
	pos += 1;
	data_view.setUint8(pos , 1); // 0x01
	pos += 1;
	data_view.setUint8(pos , 2); // 0x02
	pos += 1;
	data_view.setInt8(pos , -1); // 0xff
	pos += 1;
	data_view.setInt8(pos , -2); // 0xfe
	pos += 1;
	data_view.setInt8(pos , -3); // 0xfd
	pos += 1;

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

	// 出力テスト
	console.log( ary_u8 ); // [0x00,0x01,0x02,0xFF,0xFE,0xFD]
}
 

■マルチバイトサイズの値を書き込むメソッド

 
マルチバイトサイズの値を書き込む、メソッドの仕様です。
 
第03引数から、エンディアン方式の指定が可能です。
 
DataView.setXXXXX( 開始位置 , 値 , リトルエンディアンを使用するか? ) :Void
第01引数 Number書き込み開始位置をバイト数で指定する。(ビューの開始位置が 0 となる)
第02引数(略可)Number書き込みたい値を指定する。
第03引数(略可)Booleanリトルエンディアン方式を使用する場合 true を指定。省略した場合ビッグエンディアン方式を使用する。デフォルトは false。
戻り値 Voidなし。
 
■使用例
 
DataView のメソッドを使って、マルチバイトサイズの値を書き込む

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

	// リトルエンディアン方式を使用する
	var little_endian = true;

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

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

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

	// 2 Byte ずつ書き込み
	data_view.setUint16(pos , 4660 , little_endian); // 0x1234
	pos += 2;
	data_view.setInt16(pos , -292 , little_endian); // 0xfedc
	pos += 2;

	// 4 Byte ずつ書き込み
	data_view.setUint32(pos , 305419896 , little_endian); // 0x12345678
	pos += 4;
	data_view.setInt32(pos , -19088744 , little_endian); // 0xfedcba98
	pos += 4;
	data_view.setFloat32(pos , 2.28125 , little_endian); // 0x40120000
	pos += 4;

	// 8 Byte ずつ書き込み
	data_view.setFloat64(pos , -126411.625 , little_endian); // 0xc0fedcba00000000
	pos += 8;

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

	// 出力テスト
	console.log( ary_u8 ); // [0x34,0x12 , 0xdc,0xfe , 0x78,0x56,0x34,0x12 , 0x98,0xba,0xdc,0xfe , 0x00,0x00,0x12,0x40 , 0x00,0x00,0x00,0x00,0xba,0xdc,0xfe,0xc0]

}