WEBVTT

1
00:00:00.000 --> 00:00:00.805
こんにちは。

2
00:00:00.805 --> 00:00:05.233
今回はジャバスクリプトのアレイバッファー・イズビューを紹介します。

3
00:00:05.233 --> 00:00:10.064
画像や通信データのようなバイナリを扱うとき、受け取った値が普通の配列なのか、

4
00:00:10.064 --> 00:00:14.895
メモリー上のバイト列を見るための道具なのかを区別する必要があります。

5
00:00:14.895 --> 00:00:20.531
ここで大切なのが、データをしまう保存領域と、その領域を読み書きするビューの違いです。

6
00:00:20.531 --> 00:00:23.215
アレイバッファーは保存領域そのものです。

7
00:00:23.215 --> 00:00:29.388
一方、ユーイントエイトアレイなどの型付き配列とデータビューは、その領域を参照するビューです。

8
00:00:29.388 --> 00:00:33.548
アレイバッファー・イズビューが調べるのは後者のビューかどうかで、ビューならトゥルー、

9
00:00:33.548 --> 00:00:37.708
保存領域そのものならフォルスを返します。

10
00:00:37.708 --> 00:00:43.612
普通の配列との見分けが付かないまま処理を進めると、途中で思わぬ動きをする原因になります。

11
00:00:43.612 --> 00:00:44.799
まず動作環境です。

12
00:00:44.799 --> 00:00:49.284
この機能は、二千十五年七月以降、主要ブラウザーで広く使える機能です。

13
00:00:49.284 --> 00:00:55.089
現在のクローム、エッジ、ファイアフォックス、サファリなら、追加のライブラリーは不要です。

14
00:00:55.089 --> 00:00:58.980
画面要素に依存しない判定だけの処理なので、ブラウザー専用の仕組みを使わず、

15
00:00:58.980 --> 00:01:02.871
ノード・ジェイエスでも同じコードが動きます。

16
00:01:02.871 --> 00:01:06.961
記事のサンプルはノード・ジェイエス二十二系を対象にしています。

17
00:01:06.961 --> 00:01:10.522
古いブラウザーや組み込み環境を対象にする場合は、呼び出す前に存在を確認し、

18
00:01:10.522 --> 00:01:14.084
なければ処理を止めるのが安全です。

19
00:01:14.084 --> 00:01:17.250
確認はコンソールでタイプオブを入力するだけなので、対応が不安な環境でも、

20
00:01:17.250 --> 00:01:20.416
その場で確かめられます。

21
00:01:20.416 --> 00:01:22.085
基本の書き方を見ましょう。

22
00:01:22.085 --> 00:01:26.835
アレイバッファーに対してイズビューを呼び、判定したい値を一つ渡すだけです。

23
00:01:26.835 --> 00:01:29.788
インスタンスを作ってから呼ぶ必要はありません。

24
00:01:29.788 --> 00:01:33.897
ユーイントエイトアレイとデータビューはビューなのでトゥルーです。

25
00:01:33.897 --> 00:01:38.390
一方、アレイバッファーそのもの、普通の配列、ヌルはフォルスになります。

26
00:01:38.390 --> 00:01:41.472
引数を省略してもフォルスで、例外にはなりません。

27
00:01:41.472 --> 00:01:44.039
戻り値は真偽値で、この処理は同期的です。

28
00:01:44.039 --> 00:01:47.891
プロミスは返さないので、アウェイトやコールバックは不要です。

29
00:01:47.891 --> 00:01:50.844
まずはこの六パターンの違いを押さえてください。

30
00:01:50.844 --> 00:01:56.108
この六つを一度コンソールで並べて実行すると、ビューの範囲が頭に入りやすくなります。

31
00:01:56.108 --> 00:02:00.060
よくある混同が、普通の配列の判定との取り違えです。

32
00:02:00.060 --> 00:02:07.491
アレイ・イズアレイは通常の配列を調べるための仕組みで、型付き配列に対してはフォルスを返します。

33
00:02:07.491 --> 00:02:15.554
数値が並んで見えても、通常の配列とバッファーのビューは別の種類で、使える操作や長さの意味も異なります。

34
00:02:15.554 --> 00:02:25.831
処理の約束を、型付き配列またはデータビューを受け取ると決めたなら、入口でアレイバッファー・イズビューを使うと意図が明確になります。

35
00:02:25.831 --> 00:02:30.890
逆に通常の配列だけを受けたい場面でイズビューを使うのも誤りです。

36
00:02:30.890 --> 00:02:34.368
判定したい種類に合った道具を選んでください。

37
00:02:34.368 --> 00:02:39.461
ここからは、実用例としてエーエスバイツという関数を組み立てます。

38
00:02:39.461 --> 00:02:48.533
役割は、受け取ったビューを一バイト単位で扱える形にそろえ、同じ範囲を参照するユーイントエイトアレイを返すことです。

39
00:02:48.533 --> 00:02:56.651
最初にアレイバッファー・イズビューで入口検証を行い、ビューでなければ説明付きのタイプエラーを投げます。

40
00:02:56.651 --> 00:03:06.041
通った場合は、バッファーだけでなく、開始位置のバイトオフセットと、範囲の長さであるバイトレングスも一緒に引き継ぎます。

41
00:03:06.041 --> 00:03:12.567
この三つは型付き配列とデータビューに共通する情報で、範囲を保つための鍵になります。

42
00:03:12.567 --> 00:03:15.596
作った関数を実行した結果を読みます。

43
00:03:15.596 --> 00:03:20.308
元の領域は九十九、十、二十、三十、八十八の五バイトです。

44
00:03:20.308 --> 00:03:24.011
データビューは開始位置が一、長さが三バイトなので、対象になるのは十、二十、

45
00:03:24.011 --> 00:03:27.713
三十だけです。

46
00:03:27.713 --> 00:03:30.574
両端の九十九と八十八は入りません。

47
00:03:30.574 --> 00:03:32.257
バイト数は三でした。

48
00:03:32.257 --> 00:03:39.998
ここで大切なのは、返ってきたバイツがコピーではなく、同じ領域への新しいビューだという点です。

49
00:03:39.998 --> 00:03:45.383
先頭へ四十二を代入すると、元の領域の二番目も四十二に変わります。

50
00:03:45.383 --> 00:03:51.442
普通の配列を渡した場合はタイプエラーとなり、その内容だけを表示できます。

51
00:03:51.442 --> 00:03:56.827
出力はノード・ジェイエスの実機でも同じになることを確認済みです。

52
00:03:56.827 --> 00:03:58.782
失敗しやすい落とし穴です。

53
00:03:58.782 --> 00:04:03.819
実用例で、バッファーだけを渡してユーイントエイトアレイを作ると、選択した三バイトではなく、

54
00:04:03.819 --> 00:04:08.857
保存領域全体の五バイトを参照してしまいます。

55
00:04:08.857 --> 00:04:15.173
これは構文エラーにはならず、処理対象だけが静かに広がるため、見落としやすい失敗です。

56
00:04:15.173 --> 00:04:21.639
後からデータが混ざったように見えても、原因は入口で範囲を引き継ぎ忘れたことにあります。

57
00:04:21.639 --> 00:04:30.962
部分データを扱う関数では、バッファーと一緒に、開始位置のバイトオフセットと長さのバイトレングスを必ずセットで渡してください。

58
00:04:30.962 --> 00:04:34.947
テストでは全体の長さではなく、対象の先頭と末尾が正しく切り取れているかを確かめると、

59
00:04:34.947 --> 00:04:38.932
この失敗に気付けます。

60
00:04:38.932 --> 00:04:41.033
単位の混同にも注意してください。

61
00:04:41.033 --> 00:04:44.972
型付き配列のレングスは要素数、バイトレングスはバイト数です。

62
00:04:44.972 --> 00:04:51.011
例えばユーイントシックスティーンアレイの三要素は、各要素が二バイトなので全体は六バイトです。

63
00:04:51.011 --> 00:04:55.082
さらにデータビューには、型付き配列と同じレングスがありません。

64
00:04:55.082 --> 00:04:59.020
ビューを共通処理する場合は、目的に合う単位を明示しましょう。

65
00:04:59.020 --> 00:05:03.878
もう一つ、イズビューがトゥルーでも、内容まで保証されるわけではありません。

66
00:05:03.878 --> 00:05:06.767
空のユーイントエイトアレイでもトゥルーです。

67
00:05:06.767 --> 00:05:11.231
空データを禁止するなら、判定の後にバイトレングスも確認してください。

68
00:05:11.231 --> 00:05:13.934
独立したデータが必要な場合を見ましょう。

69
00:05:13.934 --> 00:05:19.340
後続の処理で入力元へ影響を与えたくないなら、ビューを作った後にコピーを取ります。

70
00:05:19.340 --> 00:05:25.759
まず元のユーイントエイトアレイから、バッファー、バイトオフセット、バイトレングスを引き継いだビューを作り、

71
00:05:25.759 --> 00:05:32.179
次にそのビューを元に新しいユーイントエイトアレイを作ると、独立したコピーになります。

72
00:05:32.179 --> 00:05:36.233
コピーの先頭を四十二に書き換えても、元は十と二十のままです。

73
00:05:36.233 --> 00:05:41.910
判定をするかどうかと、コピーするかどうかは、それぞれ別の役割として設計してください。

74
00:05:41.910 --> 00:05:44.883
この線引きが、意図しない書き換えを防ぎます。

75
00:05:44.883 --> 00:05:46.536
活用場面を見ましょう。

76
00:05:46.536 --> 00:05:52.545
この仕組みは、バイナリ処理の共通関数で、入力の約束を確認する場面に向いています。

77
00:05:52.545 --> 00:06:02.911
画像処理で受け取った型付き配列をバイト単位の処理へ渡したり、通信データの解析で型付き配列とデータビューを共通の入口で受け取ったりできます。

78
00:06:02.911 --> 00:06:08.169
ライブラリーでは、不適切な配列やオブジェクトを早い段階で拒否できます。

79
00:06:08.169 --> 00:06:13.427
なお、ノード・ジェイエスのバッファーもこの判定ではトゥルーになります。

80
00:06:13.427 --> 00:06:23.643
ただしブラウザーにはノード・ジェイエスのバッファーが標準でないため、共通コードはユーイントエイトアレイを中心に書くと扱いやすくなります。

81
00:06:23.643 --> 00:06:30.103
入口が一つにそろうと、呼び出す側は型の違いを意識せずに済み、検証の抜け漏れも減ります。

82
00:06:30.103 --> 00:06:31.407
制約とまとめです。

83
00:06:31.407 --> 00:06:35.752
アレイバッファー・イズビューはビューの種類を判定する道具で、必要なデータ量やファイル形式、

84
00:06:35.752 --> 00:06:40.097
数値の意味までは検証しません。

85
00:06:40.097 --> 00:06:47.919
また、バッファーの転送で元の領域が使えなくなった場合など、種類の判定だけでは後続操作の成功を保証できません。

86
00:06:47.919 --> 00:06:52.482
設計を良くするには、関数の説明に、ビューのみ受け付ける、参照を共有する、

87
00:06:52.482 --> 00:06:57.044
長さはバイト単位で扱う、という三点を明記してください。

88
00:06:57.044 --> 00:07:04.142
バイナリの入口に迷ったら、まずイズビューで種類を確認し、範囲と単位とコピーの要否をセットで決める。

89
00:07:04.142 --> 00:07:06.459
この流れをぜひ活用してください。

90
00:07:06.459 --> 00:07:07.763
お疲れさまでした。