VIDEO LESSON

JavaScriptのArrayBuffer.isView()：型付き配列とDataViewを判定するの解説動画

再生時間 7:08動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はジャバスクリプトのアレイバッファー・イズビューを紹介します。
0:05画像や通信データのようなバイナリを扱うとき、受け取った値が普通の配列なのか、
0:10メモリー上のバイト列を見るための道具なのかを区別する必要があります。
0:14ここで大切なのが、データをしまう保存領域と、その領域を読み書きするビューの違いです。
0:20アレイバッファーは保存領域そのものです。
0:23一方、ユーイントエイトアレイなどの型付き配列とデータビューは、その領域を参照するビューです。
0:29アレイバッファー・イズビューが調べるのは後者のビューかどうかで、ビューならトゥルー、
0:33保存領域そのものならフォルスを返します。
0:37普通の配列との見分けが付かないまま処理を進めると、途中で思わぬ動きをする原因になります。
0:43まず動作環境です。
0:44この機能は、二千十五年七月以降、主要ブラウザーで広く使える機能です。
0:49現在のクローム、エッジ、ファイアフォックス、サファリなら、追加のライブラリーは不要です。
0:55画面要素に依存しない判定だけの処理なので、ブラウザー専用の仕組みを使わず、
0:58ノード・ジェイエスでも同じコードが動きます。
1:02記事のサンプルはノード・ジェイエス二十二系を対象にしています。
1:06古いブラウザーや組み込み環境を対象にする場合は、呼び出す前に存在を確認し、
1:10なければ処理を止めるのが安全です。
1:14確認はコンソールでタイプオブを入力するだけなので、対応が不安な環境でも、
1:17その場で確かめられます。
1:20基本の書き方を見ましょう。
1:22アレイバッファーに対してイズビューを呼び、判定したい値を一つ渡すだけです。
1:26インスタンスを作ってから呼ぶ必要はありません。
1:29ユーイントエイトアレイとデータビューはビューなのでトゥルーです。
1:33一方、アレイバッファーそのもの、普通の配列、ヌルはフォルスになります。
1:38引数を省略してもフォルスで、例外にはなりません。
1:41戻り値は真偽値で、この処理は同期的です。
1:44プロミスは返さないので、アウェイトやコールバックは不要です。
1:47まずはこの六パターンの違いを押さえてください。
1:50この六つを一度コンソールで並べて実行すると、ビューの範囲が頭に入りやすくなります。
1:56よくある混同が、普通の配列の判定との取り違えです。
2:00アレイ・イズアレイは通常の配列を調べるための仕組みで、型付き配列に対してはフォルスを返します。
2:07数値が並んで見えても、通常の配列とバッファーのビューは別の種類で、使える操作や長さの意味も異なります。
2:15処理の約束を、型付き配列またはデータビューを受け取ると決めたなら、入口でアレイバッファー・イズビューを使うと意図が明確になります。
2:25逆に通常の配列だけを受けたい場面でイズビューを使うのも誤りです。
2:30判定したい種類に合った道具を選んでください。
2:34ここからは、実用例としてエーエスバイツという関数を組み立てます。
2:39役割は、受け取ったビューを一バイト単位で扱える形にそろえ、同じ範囲を参照するユーイントエイトアレイを返すことです。
2:48最初にアレイバッファー・イズビューで入口検証を行い、ビューでなければ説明付きのタイプエラーを投げます。
2:56通った場合は、バッファーだけでなく、開始位置のバイトオフセットと、範囲の長さであるバイトレングスも一緒に引き継ぎます。
3:06この三つは型付き配列とデータビューに共通する情報で、範囲を保つための鍵になります。
3:12作った関数を実行した結果を読みます。
3:15元の領域は九十九、十、二十、三十、八十八の五バイトです。
3:20データビューは開始位置が一、長さが三バイトなので、対象になるのは十、二十、
3:24三十だけです。
3:27両端の九十九と八十八は入りません。
3:30バイト数は三でした。
3:32ここで大切なのは、返ってきたバイツがコピーではなく、同じ領域への新しいビューだという点です。
3:39先頭へ四十二を代入すると、元の領域の二番目も四十二に変わります。
3:45普通の配列を渡した場合はタイプエラーとなり、その内容だけを表示できます。
3:51出力はノード・ジェイエスの実機でも同じになることを確認済みです。
3:56失敗しやすい落とし穴です。
3:58実用例で、バッファーだけを渡してユーイントエイトアレイを作ると、選択した三バイトではなく、
4:03保存領域全体の五バイトを参照してしまいます。
4:08これは構文エラーにはならず、処理対象だけが静かに広がるため、見落としやすい失敗です。
4:15後からデータが混ざったように見えても、原因は入口で範囲を引き継ぎ忘れたことにあります。
4:21部分データを扱う関数では、バッファーと一緒に、開始位置のバイトオフセットと長さのバイトレングスを必ずセットで渡してください。
4:30テストでは全体の長さではなく、対象の先頭と末尾が正しく切り取れているかを確かめると、
4:34この失敗に気付けます。
4:38単位の混同にも注意してください。
4:41型付き配列のレングスは要素数、バイトレングスはバイト数です。
4:44例えばユーイントシックスティーンアレイの三要素は、各要素が二バイトなので全体は六バイトです。
4:51さらにデータビューには、型付き配列と同じレングスがありません。
4:55ビューを共通処理する場合は、目的に合う単位を明示しましょう。
4:59もう一つ、イズビューがトゥルーでも、内容まで保証されるわけではありません。
5:03空のユーイントエイトアレイでもトゥルーです。
5:06空データを禁止するなら、判定の後にバイトレングスも確認してください。
5:11独立したデータが必要な場合を見ましょう。
5:13後続の処理で入力元へ影響を与えたくないなら、ビューを作った後にコピーを取ります。
5:19まず元のユーイントエイトアレイから、バッファー、バイトオフセット、バイトレングスを引き継いだビューを作り、
5:25次にそのビューを元に新しいユーイントエイトアレイを作ると、独立したコピーになります。
5:32コピーの先頭を四十二に書き換えても、元は十と二十のままです。
5:36判定をするかどうかと、コピーするかどうかは、それぞれ別の役割として設計してください。
5:41この線引きが、意図しない書き換えを防ぎます。
5:44活用場面を見ましょう。
5:46この仕組みは、バイナリ処理の共通関数で、入力の約束を確認する場面に向いています。
5:52画像処理で受け取った型付き配列をバイト単位の処理へ渡したり、通信データの解析で型付き配列とデータビューを共通の入口で受け取ったりできます。
6:02ライブラリーでは、不適切な配列やオブジェクトを早い段階で拒否できます。
6:08なお、ノード・ジェイエスのバッファーもこの判定ではトゥルーになります。
6:13ただしブラウザーにはノード・ジェイエスのバッファーが標準でないため、共通コードはユーイントエイトアレイを中心に書くと扱いやすくなります。
6:23入口が一つにそろうと、呼び出す側は型の違いを意識せずに済み、検証の抜け漏れも減ります。
6:30制約とまとめです。
6:31アレイバッファー・イズビューはビューの種類を判定する道具で、必要なデータ量やファイル形式、
6:35数値の意味までは検証しません。
6:40また、バッファーの転送で元の領域が使えなくなった場合など、種類の判定だけでは後続操作の成功を保証できません。
6:47設計を良くするには、関数の説明に、ビューのみ受け付ける、参照を共有する、
6:52長さはバイト単位で扱う、という三点を明記してください。
6:57バイナリの入口に迷ったら、まずイズビューで種類を確認し、範囲と単位とコピーの要否をセットで決める。
7:04この流れをぜひ活用してください。
7:06お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

ArrayBuffer.isView()で型付き配列とDataViewを判定する方法を解説。引数・戻り値、ブラウザーとNode.jsでの実行手順、バイト範囲を保つ実用例と入力検証の制約を学べます。

解説記事・サンプルコードを読む：JavaScriptのArrayBuffer.isView()：型付き配列とDataViewを判定する →