前提
初心者なりの超浅い理解です。
(というのも、元々Web Audio APIに食わせるためだけに調べてたので…)
ArrayBufferとは
ひとことで言うと「JavaScriptでバイナリを扱う」ために生まれたという認識。
なので画像処理等に使われていることが多い印象です。
少なくとも僕はWeb Audio API以外で使ったことがない(´・ω・｀)
ArrayBufferは以下のようにインスタンス生成することができます。
const buf = new ArrayBuffer(30);
普通にクラスみたいにnewします。引数には確保したいバイナリの長さを渡します。
この瞬間、何が起きるかというと指定した長さのメモリ空間がバイナリ保存用に確保されます。
なので当然、アホみたいにでかい数字を渡してインスタンス生成しようとすると「メモリ足りないぜよ！」となってエラーになります。
また、このArrayBufferにはもう1つの特徴があり、直接読み書きすることができません。
以下のドキュメントを見てもそれらしきAPIやプロパティが存在しないことがわかると思います。
ArrayBuffer - JavaScript | MDN
せっかくバイナリを保存するためのメモリ確保してもなんにもできないやーん、となってしまいます。
そこで出てくるのが型付き配列というものです。
型付き配列(Typed Array)
型付き配列とは、その名の通り型を持つ配列のことです。
通常のArrayとは違うものですが、通常のArrayのように使用することができます。
TypedArrayにはいくつかのサブクラスが存在し、実際にはそれらを使用します。
では実際、こいつが何の役に立つのかというとArrayBufferの確保するメモリ空間にアクセスするために使用します。
具体的には以下のような感じで使えます。
const buf = new ArrayBuffer(100);
const view = new Uint8Array(buf);
これでview変数を通じてbufで確保されているメモリ空間にアクセスすることが可能になります。
(Uint8Arrayはバイナリへのアクセス方式を8bit整数(符号なし)で行いたい時に使用する型付き配列のサブクラスの一種)
これで例えば以下の様なコードを書くとbufを書き換えているのが同義になります。
view[0] = 0x12;
このためのTypedArrayだったんですね～～～
まとめ
- ArrayBufferはバイナリ保存用にメモリ空間を確保するためのもの
- 直接の読み書きは不可
- ArrayBufferに格納されるバイナリを読み書きするのにTypedArrayを利用する
- TypedArrayはだいたい配列と同じノリで扱えるよ！
参考
Javascript typed arrays - JavaScript | MDN
