前提

初心者なりの超浅い理解です。

(というのも、元々Web Audio APIに食わせるためだけに調べてたので…)

ArrayBufferとは

ひとことで言うと「JavaScriptでバイナリを扱う」ために生まれたという認識。

なので画像処理等に使われていることが多い印象です。

少なくとも僕はWeb Audio API以外で使ったことがない(´・ω・｀)

ArrayBufferは以下のようにインスタンス生成することができます。

const buf = new ArrayBuffer(30);

普通にクラスみたいにnewします。引数には確保したいバイナリの長さを渡します。

この瞬間、何が起きるかというと指定した長さのメモリ空間がバイナリ保存用に確保されます。

なので当然、アホみたいにでかい数字を渡してインスタンス生成しようとすると「メモリ足りないぜよ！」となってエラーになります。

また、このArrayBufferにはもう1つの特徴があり、直接読み書きすることができません。

以下のドキュメントを見てもそれらしきAPIやプロパティが存在しないことがわかると思います。

せっかくバイナリを保存するためのメモリ確保してもなんにもできないやーん、となってしまいます。

そこで出てくるのが型付き配列というものです。

型付き配列とは、その名の通り型を持つ配列のことです。

通常のArrayとは違うものですが、通常のArrayのように使用することができます。

TypedArrayにはいくつかのサブクラスが存在し、実際にはそれらを使用します。

では実際、こいつが何の役に立つのかというとArrayBufferの確保するメモリ空間にアクセスするために使用します。

具体的には以下のような感じで使えます。

const buf  = new ArrayBuffer(100); // メモリ空間の確保
const view = new Uint8Array(buf);  // 1行めで確保されたメモリ空間へアクセスするための型付き配列

これでview変数を通じてbufで確保されているメモリ空間にアクセスすることが可能になります。

(Uint8Arrayはバイナリへのアクセス方式を8bit整数(符号なし)で行いたい時に使用する型付き配列のサブクラスの一種)

これで例えば以下の様なコードを書くとbufを書き換えているのが同義になります。

view[0] = 0x12; // bufの0番めに書き込んでいるのと同義

このためのTypedArrayだったんですね～～～