WEBVTT

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

2
00:00:00.967 --> 00:00:07.093
今回はジャバスクリプトのファンクション・プロトタイプ・アプライを紹介します。

3
00:00:07.093 --> 00:00:16.119
これは、関数の中で使うディスという値と、引数を配列でまとめて指定して、その場で関数を呼び出すためのメソッドです。

4
00:00:16.119 --> 00:00:21.600
前回学んだバインドが、実行せずに新しい関数を作るだけだったのに対し、アプライは呼んだ瞬間に実行され、

5
00:00:21.600 --> 00:00:27.081
関数の戻り値がそのまま返ってきます。

6
00:00:27.081 --> 00:00:33.287
この動画では、書き方と引数、コールとの違い、記事の基本例と境界条件の例、

7
00:00:33.287 --> 00:00:39.493
配列風オブジェクトの扱い、そして間違えやすい注意点まで、実行結果と一緒に学びます。

8
00:00:39.493 --> 00:00:44.812
引数がすでに配列の形で手元にある場面で、特に力を発揮する方法です。

9
00:00:44.812 --> 00:00:46.578
まず動作環境を確認します。

10
00:00:46.578 --> 00:00:51.400
アプライはジャバスクリプトの最初期からある機能で、クロームとファイアーフォックスとサファリではバージョン一以降、

11
00:00:51.400 --> 00:00:56.222
エッジでは十二以降で使えます。

12
00:00:56.222 --> 00:01:00.569
ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。

13
00:01:00.569 --> 00:01:04.508
記事の互換性情報はエムディーエヌのデータに基づく目安です。

14
00:01:04.508 --> 00:01:09.942
スライドの通り、どんな関数にもアプライというメソッドが備わっていて、関数型であること、

15
00:01:09.942 --> 00:01:15.375
そして空の配列で呼ぶと元の関数の戻り値が返ることを、実機でも確認済みです。

16
00:01:15.375 --> 00:01:21.080
追加のパッケージは不要で、ブラウザーのコンソールでもノードでも同じコードで試せます。

17
00:01:21.080 --> 00:01:22.446
書き方を確認します。

18
00:01:22.446 --> 00:01:26.544
対象の関数のあとにドットを書き、アプライとカッコを続けます。

19
00:01:26.544 --> 00:01:30.369
カッコの第一引数が、関数の中で使わせたいディスの値です。

20
00:01:30.369 --> 00:01:34.468
第二引数には、渡したい引数を一つの配列にまとめて指定します。

21
00:01:34.468 --> 00:01:37.337
戻り値は、呼び出した関数自身の戻り値です。

22
00:01:37.337 --> 00:01:44.850
スライドの例では、二と三を配列で渡した呼び出しも、通常の呼び出しも、どちらも五になることを実機で確認しました。

23
00:01:44.850 --> 00:01:50.315
つまりアプライは、呼び出し方を変えるだけで、関数の中身や計算結果は変わりません。

24
00:01:50.315 --> 00:01:54.413
ディスを使わない関数では、第一引数にヌルを渡すのが慣例です。

25
00:01:54.413 --> 00:01:58.648
第二引数を省略した場合は、引数なしの呼び出しとして扱われます。

26
00:01:58.648 --> 00:02:01.380
その点は後の注意点でもう一度確認します。

27
00:02:01.380 --> 00:02:05.664
よく似たメソッドであるコールとの違いを整理します。

28
00:02:05.664 --> 00:02:11.834
コールもアプライも、ディスを指定してその場で関数を実行する点は同じです。

29
00:02:11.834 --> 00:02:14.404
違うのは引数の渡し方だけです。

30
00:02:14.404 --> 00:02:20.917
コールは引数をカンマで一つずつ並べ、アプライは一つの配列にまとめて渡します。

31
00:02:20.917 --> 00:02:26.229
スライドの通り、どちらの方法でも結果はまったく同じになります。

32
00:02:26.229 --> 00:02:31.799
選び方の目安はシンプルで、引数が最初から決まっていて個別に書けるならコール、

33
00:02:31.799 --> 00:02:37.368
引数が配列の形で用意されているならアプライが自然です。

34
00:02:37.368 --> 00:02:43.195
この違いを押さえておくと、次に学ぶコールの記事も読みやすくなります。

35
00:02:43.195 --> 00:02:49.879
名前が似ているため混同しやすい二つですが、引数の形だけに注目すれば迷いません。

36
00:02:49.879 --> 00:02:52.792
配列かどうかが判断の分かれ目です。

37
00:02:52.792 --> 00:02:54.608
記事の基本例を見ます。

38
00:02:54.608 --> 00:03:01.212
トータルという関数は、ディスのベースという値に、引数の二つの数を足して返します。

39
00:03:01.212 --> 00:03:09.302
ここで、ベースが十のオブジェクトをディスとして指定し、引数は二と三を入れた配列でまとめて渡します。

40
00:03:09.302 --> 00:03:13.759
実行結果は十五で、ノードの実機結果とも一致しています。

41
00:03:13.759 --> 00:03:18.547
ポイントは、関数を定義した場所とは別のオブジェクトをディスにできること、

42
00:03:18.547 --> 00:03:23.335
そして引数を配列のまま渡せることの二つです。

43
00:03:23.335 --> 00:03:28.948
データが配列で届く処理と組み合わせると、この形がそのまま役立ちます。

44
00:03:28.948 --> 00:03:36.212
まずはこの例をコンソールで実行し、ベースや配列の中身を変えて結果を予測してみてください。

45
00:03:36.212 --> 00:03:38.425
記事の境界条件の例を見ます。

46
00:03:38.425 --> 00:03:46.327
マックスは、渡された数の中で最大のものを返す関数ですが、引数は一つずつ並べる形でしか受け取れません。

47
00:03:46.327 --> 00:03:49.963
配列のまま渡しても、最大値にはならないのです。

48
00:03:49.963 --> 00:03:56.759
そこでアプライを使うと、配列の三、八、二が展開されて順番に渡され、結果は八になります。

49
00:03:56.759 --> 00:03:59.130
この出力も実機で確認済みです。

50
00:03:59.130 --> 00:04:04.741
なお、現在のジャバスクリプトでは、スプレッド構文という書き方でも同じ展開ができ、

51
00:04:04.741 --> 00:04:10.352
記事でも多くの場合はそちらの方が読みやすいと案内されています。

52
00:04:10.352 --> 00:04:15.251
アプライは、その展開の仕組みを理解する土台として今も大切です。

53
00:04:15.251 --> 00:04:22.680
この例は、配列をそのまま渡せない関数に対して、要素を並べ直して渡す橋渡しの役割を示しています。

54
00:04:22.680 --> 00:04:26.905
第二引数に渡せるのは、本物の配列だけではありません。

55
00:04:26.905 --> 00:04:35.354
添字のゼロ、一、二に値を持ち、長さを表すレングスを備えた、配列風オブジェクトと呼ばれる値でも構いません。

56
00:04:35.354 --> 00:04:45.915
スライドの例では、通常のオブジェクトに添字とレングスを持たせて渡し、十と二十と三十の合計である六十が返ることを実機で確認しました。

57
00:04:45.915 --> 00:04:52.090
関数の中で使えるアーギュメンツという値も、この配列風オブジェクトの代表です。

58
00:04:52.090 --> 00:04:59.564
昔のコードでは、アーギュメンツを別の関数へそのまま引き渡すためにアプライがよく使われました。

59
00:04:59.564 --> 00:05:03.464
配列風という条件が、次の注意点にもつながります。

60
00:05:03.464 --> 00:05:10.938
逆に、配列風ではない通常のオブジェクトを渡すと、レングスが無いために引数が何も渡されません。

61
00:05:10.938 --> 00:05:14.188
この点も実行して確かめる価値があります。

62
00:05:14.188 --> 00:05:16.811
記事が注意点として挙げる仕様です。

63
00:05:16.811 --> 00:05:22.365
第二引数に求められるのは、反復できることではなく、配列風であることです。

64
00:05:22.365 --> 00:05:27.841
たとえばセットは、値を順番に取り出せる反復可能なオブジェクトですが、添字とレングスを持たないため、

65
00:05:27.841 --> 00:05:33.318
アプライに渡しても引数は一つも渡されません。

66
00:05:33.318 --> 00:05:41.957
スライドの通り、セットを渡すと引数はどちらもアンディファインドになり、配列で渡した場合と結果がはっきり違います。

67
00:05:41.957 --> 00:05:44.271
この出力も実機で確認済みです。

68
00:05:44.271 --> 00:05:52.448
セットやマップの値を渡したい場合は、いったん本物の配列に変換するか、スプレッド構文で展開するのが安全です。

69
00:05:52.448 --> 00:05:55.561
第二引数の省略についても確認します。

70
00:05:55.561 --> 00:06:02.132
第二引数は、省略したり、ヌルやアンディファインドを渡したりしても構いません。

71
00:06:02.132 --> 00:06:07.147
その場合は、引数が何もないものとして関数が呼び出されます。

72
00:06:07.147 --> 00:06:15.448
スライドの例では、渡された引数の個数を返す関数が、どちらでもゼロを返すことを実機で確認しました。

73
00:06:15.448 --> 00:06:23.057
一方で、数値のようにオブジェクトではない値を渡すと、タイプエラーという例外が発生します。

74
00:06:23.057 --> 00:06:30.320
渡す前に、値が配列か配列風オブジェクトか、あるいはヌル系かを確認する習慣が大切です。

75
00:06:30.320 --> 00:06:35.508
意図せずプリミティブな値を渡すバグは、この形で表面化します。

76
00:06:35.508 --> 00:06:37.589
最後の注意点を二つ紹介します。

77
00:06:37.589 --> 00:06:40.640
一つ目はディスにヌルを渡したときの扱いです。

78
00:06:40.640 --> 00:06:48.270
通常の関数ではヌルがグローバルオブジェクト側へ変換されますが、ストリクトモードの関数ではヌルのまま渡されます。

79
00:06:48.270 --> 00:06:55.067
スライドの結果の違いは実機でも確認済みで、モードによってディスの正体が変わる点に注意してください。

80
00:06:55.067 --> 00:06:58.257
二つ目は、記事も触れている大量の値の展開です。

81
00:06:58.257 --> 00:07:04.915
要素が極端に多い配列をアプライで渡すと、エンジンの引数の上限を超えてエラーになることがあります。

82
00:07:04.915 --> 00:07:11.296
大きなデータでは、スプレッドでも同じ上限があるため、分割して処理する方法も検討してください。

83
00:07:11.296 --> 00:07:12.204
まとめです。

84
00:07:12.204 --> 00:07:17.352
アプライは、ディスと、配列または配列風の引数一覧を指定して、関数をその場で呼び出すメソッドで、

85
00:07:17.352 --> 00:07:22.500
戻り値は呼び出した関数の結果そのものです。

86
00:07:22.500 --> 00:07:24.317
導入時の判断は三つです。

87
00:07:24.317 --> 00:07:28.405
まず、引数がすでに配列で用意されているときに使うこと。

88
00:07:28.405 --> 00:07:34.765
次に、引数を個別に書けるならコール、実行を後に回したいならバインドと使い分けること。

89
00:07:34.765 --> 00:07:41.881
そして、第二引数は配列風でなければならない点と、大量の要素には上限がある点に注意することです。

90
00:07:41.881 --> 00:07:49.300
まずは記事の基本例をコンソールで実行し、ベースの値や配列の中身を変えて結果を予測してみてください。

91
00:07:49.300 --> 00:07:50.663
お疲れさまでした。

92
00:07:50.663 --> 00:07:55.508
次回のコールと並べて、三つのメソッドの違いを整理してみましょう。