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

JavaScript DataView()とは？ArrayBufferのバイナリデータを読み書きする方法

JavaScript の DataView は、ArrayBuffer（バイナリデータ）に対して、さまざまな数値型の読み書きを行うための低レベルインターフェースを提供するオブジェクトです。DataView を使うことで、1バイト単位で細かく制御しながら、Int16、Int32、Float64 など複数の数値型として同じバッファにアクセスできます。

なお、ArrayBuffer はそのままでは直接操作できないため、DataView や TypedArray を介してアクセスする必要があります。

DataView の主なメソッド

  • setInt16(offset, value)：指定したオフセット位置に 16 ビット整数を書き込む
  • getInt16(offset)：指定したオフセット位置から 16 ビット整数を読み取る
  • その他にも setInt32 / getInt32 / setFloat32 / getFloat64 など、各種ビット幅のメソッドが用意されています

実装例

以下は、JavaScript の DataView を使って ArrayBuffer の内容を書き換え・表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript DataView()</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript DataView()</h1>
<div class="sample"></div>
<button class="Btn">クリックしてください</button>
<h3>
上のボタンをクリックすると、DataView() を使って ArrayBuffer の内容が変更されます
</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>

コードの解説

  1. new ArrayBuffer(8) で 8 バイトのバッファを生成します。
  2. new DataView(buffer) でそのバッファに対応する DataView を作成します。
  3. setInt16(0, 0x2721) により、先頭（オフセット 0）に 16 ビット整数 0x2721 を書き込みます。
  4. 初期表示では toString(16) によって 16 進数で値を表示します。
  5. ボタンをクリックすると toString(2) により、同じ値を 2 進数で表示します。

実行結果

ページ読み込み時は、書き込んだ値が 16 進数で表示されます。

JavaScript DataView()とは？ArrayBufferのバイナリデータを読み書きする方法

「クリックしてください」ボタンを押すと、同じ ArrayBuffer の内容が 2 進数で表示されます。

JavaScript DataView()とは？ArrayBufferのバイナリデータを読み書きする方法

このように DataView を使えば、同一の ArrayBuffer 内のデータを用途に応じて異なる数値型・表現形式で柔軟に扱うことができます。バイナリファイルの解析やネットワークプロトコルの実装など、低レベルなデータ処理が必要な場面で特に役立ちます。

  1. 【初心者向け】JavaScriptのescape()関数とは？使い方と非推奨の理由を解説

    JavaScriptのescape()関数とはJavaScriptのescape()関数は、文字列をエンコードするために使用される関数です。文字列内の特殊文字をASCII形式のエスケープシーケンス（%xx の形式）に変換します。ただし、この関数はECMAScript v3以降で非推奨（deprecated）とされており、現在の開発では使用が推奨されていません。URIのエンコード目的であれば、代わりにencodeURI()やencodeURIComponent()を使用することが標準的な方法です。escape()の使用例それでは、実際にJavaScriptのescape()関数を使用したサンプル

  2. JavaScriptのletキーワードとは？ブロックスコープ変数の宣言方法を解説

    letキーワードとは 2015年（ECMAScript 2015／ES6）に導入されたletキーワードは、ブロックスコープを持つ変数を宣言するためのものです。letで宣言した変数は、それを囲む波括弧 { } の内側でのみ有効となり、ブロックの外からアクセスしようとするとエラーが発生します。 varとの主な違い スコープ： varは関数スコープですが、letはブロックスコープになります。 再宣言： 同じスコープ内であればvarによる再宣言は可能ですが、letで再宣言するとSyntaxErrorになります。 宣言前の参照： letで宣言した変数は、宣言より前にアクセスするとReferenceE