JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのArrayBufferオブジェクトとは？基本的な使い方を解説

JavaScriptのArrayBufferオブジェクトは、汎用的で固定長の生（ロー）バイナリデータバッファを表現するために使用されます。ArrayBufferの内容には直接アクセスして操作することができないため、データを読み書きするにはDataViewオブジェクトを作成する必要があります。DataViewを介することで、バッファ内のデータの読み取りと書き込みの両方が可能になります。

ArrayBufferは、ファイル操作やネットワーク通信（WebSocketでのバイナリ送受信）、WebGLによる画像処理など、バイナリデータを扱うさまざまな場面で活用されています。

構文

new ArrayBuffer(byteSize)

引数byteSizeには、作成する配列バッファのサイズをバイト単位で指定します。例えばnew ArrayBuffer(8)と記述すると、8バイト分のメモリ領域を持つバッファが生成されます。

サンプルコード

以下は、ArrayBuffer()コンストラクタを使用した実装例です。このコードでは、8バイトのArrayBufferを作成し、DataView経由で16ビット整数値（0x2721）を書き込んでいます。ページ読み込み時には16進数で値が表示され、「CLICK HERE」ボタンをクリックすると同じ値が2進数で表示される仕組みです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
   font-size: 20px;
   font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript ArrayBuffer object</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to see the array buffer object contents in binary</h3>
<script>
let fillEle = document.querySelector(".sample");
var buffer = new ArrayBuffer(8);
var view1 = new DataView(buffer);
view1.setInt16(0, 0x2721);
fillEle.innerHTML = view1.getInt16(0).toString(16);
document.querySelector('.Btn').addEventListener('click',()=>{
   fillEle.innerHTML = view1.getInt16(0).toString(2);
})
</script>
</body>
</html>

出力結果

ページを開くと、バッファに書き込んだ値が16進数で表示されます。

JavaScriptのArrayBufferオブジェクトとは？基本的な使い方を解説

「CLICK HERE」ボタンをクリックすると −

JavaScriptのArrayBufferオブジェクトとは？基本的な使い方を解説

このように、ArrayBufferとDataViewを組み合わせることで、生バイナリデータに対して型を意識した読み書きが簡単に行えるようになります。

  1. JavaScriptのRegExp（正規表現）オブジェクトとは？基本の使い方をわかりやすく解説

    RegExp（正規表現）オブジェクトは、テキストに対してパターンマッチングを行い、目的の文字列部分を検索・抽出するために使用されます。JavaScriptでは、RegExpオブジェクトを「RegExpコンストラクタ」または「リテラル構文」の2通りの方法で作成できます。 RegExpオブジェクトの作成方法 コンストラクタを使用する場合： new RegExp(pattern) リテラル構文を使用する場合： /pattern/ 主なメソッド test()：文字列がパターンに一致するかどうかを真偽値（true / false）で返します。 exec()：パターンに一致した文字列を返します。

  2. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars