WEBVTT

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

2
00:00:00.889 --> 00:00:06.368
今回はジャバスクリプトのファンクション・プロトタイプ・コールを紹介します。

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

4
00:00:14.216 --> 00:00:19.251
前々回学んだバインドが、実行せずに新しい関数を作るだけだったのに対し、コールは呼んだ瞬間に実行され、

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

6
00:00:24.286 --> 00:00:29.766
この動画では、書き方と引数、アプライとの違い、記事の基本例と境界条件の例、

7
00:00:29.766 --> 00:00:35.245
同じ関数の再利用、そして間違えやすい注意点まで、実行結果と一緒に学びます。

8
00:00:35.245 --> 00:00:39.540
引数が個別に決まっている場面で、特に分かりやすい方法です。

9
00:00:39.540 --> 00:00:43.316
同じ関数でも、どのオブジェクトのデータで動かすかを呼び出し側で選べる点が、

10
00:00:43.316 --> 00:00:47.092
コールの中心的な考え方です。

11
00:00:47.092 --> 00:00:48.699
まず動作環境を確認します。

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

13
00:00:53.024 --> 00:00:57.350
エッジでは十二以降で使えます。

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

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

16
00:01:04.888 --> 00:01:09.770
スライドの通り、どんな関数にもコールというメソッドが備わっていて、関数型であること、

17
00:01:09.770 --> 00:01:14.652
そして引数なしで呼ぶと元の関数の戻り値が返ることを、実機でも確認済みです。

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

19
00:01:19.842 --> 00:01:25.280
対応範囲が広いため、古いブラウザーを含む環境でも安心して使える基本機能の一つと言えます。

20
00:01:25.280 --> 00:01:26.898
書き方を確認します。

21
00:01:26.898 --> 00:01:31.589
対象の関数のあとにドットを書き、コールとカッコを続けます。

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

23
00:01:36.118 --> 00:01:40.810
第二引数以降には、渡したい引数をカンマで一つずつ並べます。

24
00:01:40.810 --> 00:01:44.207
戻り値は、呼び出した関数自身の戻り値です。

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

26
00:01:53.104 --> 00:01:59.413
つまりコールは、呼び出し方を変えるだけで、関数の中身や計算結果は変わりません。

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

28
00:02:04.266 --> 00:02:08.148
引数の並び順が、そのまま関数の引数へ対応します。

29
00:02:08.148 --> 00:02:11.300
前回学んだアプライとの違いを整理します。

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

31
00:02:16.975 --> 00:02:19.339
違うのは引数の渡し方だけです。

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

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

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

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

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

37
00:02:46.608 --> 00:02:49.288
個別か配列かが判断の分かれ目です。

38
00:02:49.288 --> 00:02:51.063
記事の基本例を見ます。

39
00:02:51.063 --> 00:02:57.197
グリートという関数は、引数の言葉に、ディスのネームという値を続けて返します。

40
00:02:57.197 --> 00:03:01.232
ここで、ネームが葵のオブジェクトをディスとして指定し、引数には、こんにちは、

41
00:03:01.232 --> 00:03:05.267
という文字列を渡します。

42
00:03:05.267 --> 00:03:10.593
実行結果は、こんにちは、葵で、ノードの実機結果とも一致しています。

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

44
00:03:16.727 --> 00:03:25.442
なお記事の元のコードはテンプレート文字列でしたが、スライドでは通常の文字列連結で同じ意味に書き換えています。

45
00:03:25.442 --> 00:03:32.060
まずはこの例をコンソールで実行し、ネームや引数を変えて結果を予測してみてください。

46
00:03:32.060 --> 00:03:34.206
記事の境界条件の例を見ます。

47
00:03:34.206 --> 00:03:40.950
このリードという関数は、ストリクトモードを指定したうえで、ディスをそのまま返す関数です。

48
00:03:40.950 --> 00:03:47.540
コールでヌルを渡して実行すると、返ってきた値がヌルと一致し、結果はトゥルーになります。

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

50
00:03:49.839 --> 00:03:56.123
ストリクトモードでは、渡したディスが変換されずにそのまま使われることが分かります。

51
00:03:56.123 --> 00:04:03.787
後の注意点でも触れますが、通常の関数ではヌルの扱いが異なるため、モードの違いは実行結果を左右します。

52
00:04:03.787 --> 00:04:09.305
基本例と並べて、ディスがどう受け取られるかを意識して読んでみてください。

53
00:04:09.305 --> 00:04:16.968
これは記事が用意した確認用の例で、成功か失敗かではなく、値そのものがどう渡るかを見るためのものです。

54
00:04:16.968 --> 00:04:21.741
コールの便利な使い方として、メソッドの借用を紹介します。

55
00:04:21.741 --> 00:04:32.479
スライドの例では、エーというオブジェクトの中にある挨拶のメソッドを、ビーという別のオブジェクトをディスにして呼び出しています。

56
00:04:32.479 --> 00:04:37.423
ビーのネームは凛なので、結果は、こんにちは、凛になります。

57
00:04:37.423 --> 00:04:39.979
この出力も実機で確認済みです。

58
00:04:39.979 --> 00:04:48.161
同じ処理をデータごとに書き直さなくても、ディスを差し替えるだけで再利用できるのが大きな利点です。

59
00:04:48.161 --> 00:04:55.661
ライブラリーの内部や、似た形のオブジェクトが複数ある処理で、この考え方がよく使われます。

60
00:04:55.661 --> 00:04:58.900
元のオブジェクト自体は変更されません。

61
00:04:58.900 --> 00:05:01.273
記事が注意点として挙げる仕様です。

62
00:05:01.273 --> 00:05:09.371
アロー関数のディスは、定義した場所の外側のディスに固定されるため、コールで別のオブジェクトを渡しても変更できません。

63
00:05:09.371 --> 00:05:15.095
スライドの例では、ホルダーという名前を持つ場所で作ったアロー関数に、別の名前のオブジェクトを渡して呼んでも、

64
00:05:15.095 --> 00:05:20.819
結果はホルダーのまま変わらないことを実機で確認しました。

65
00:05:20.819 --> 00:05:27.381
ディスを差し替えて再利用したい処理では、アロー関数ではなく通常の関数で定義することが大切です。

66
00:05:27.381 --> 00:05:32.128
コールが効かないのではなく、アロー関数側の仕様だと理解してください。

67
00:05:32.128 --> 00:05:39.248
似た見た目でも通常の関数とアロー関数では扱いが正反対になるため、定義の書き方を最初に確認してください。

68
00:05:39.248 --> 00:05:41.521
引数の数についても確認します。

69
00:05:41.521 --> 00:05:48.342
コールで渡す引数が足りない場合、不足分にはアンディファインドが入り、エラーにはなりません。

70
00:05:48.342 --> 00:05:53.343
逆に、関数の定義より多く渡しても、余った引数は通常は無視されます。

71
00:05:53.343 --> 00:05:58.572
スライドの通り、一つだけ渡した場合は二つ目がアンディファインドになり、三つ渡した場合は先頭の二つだけが使われることを、

72
00:05:58.572 --> 00:06:03.801
実機で確認しました。

73
00:06:03.801 --> 00:06:08.499
呼び出し側で個数を厳密にチェックする仕組みはないため、必要な引数がそろっているかは、

74
00:06:08.499 --> 00:06:13.197
書く側が意識して確認する必要があります。

75
00:06:13.197 --> 00:06:16.380
アプライでも、この過不足の扱いは同じです。

76
00:06:16.380 --> 00:06:20.481
最後の注意点として、ディスの変換ルールを紹介します。

77
00:06:20.481 --> 00:06:25.449
通常の関数では、ディスにヌルを渡すとグローバルオブジェクト側へ変換され、

78
00:06:25.449 --> 00:06:30.417
文字列のような値を渡すとオブジェクトとして扱われます。

79
00:06:30.417 --> 00:06:35.937
一方、ストリクトモードの関数では、渡した値がそのままディスになります。

80
00:06:35.937 --> 00:06:46.504
スライドの通り、同じ文字列を渡しても、通常の関数ではオブジェクト、ストリクトでは文字列という異なる結果になることを実機で確認しました。

81
00:06:46.504 --> 00:06:51.866
境界条件の例でヌルがそのまま返った理由も、このルールで説明できます。

82
00:06:51.866 --> 00:06:54.390
モードを確認する習慣が大切です。

83
00:06:54.390 --> 00:07:01.960
特にライブラリーの関数を借用するときは、この変換が思わぬ結果を招くことがあるため注意が必要です。

84
00:07:01.960 --> 00:07:03.042
まとめです。

85
00:07:03.042 --> 00:07:08.635
コールは、ディスと、個別に並べた引数を指定して、関数をその場で呼び出すメソッドで、

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

87
00:07:14.227 --> 00:07:16.392
導入時の判断は三つです。

88
00:07:16.392 --> 00:07:20.542
まず、引数が個別に決まっているときに使うこと。

89
00:07:20.542 --> 00:07:29.021
次に、引数が配列で用意されているならアプライ、実行を後に回したいならバインドと使い分けること。

90
00:07:29.021 --> 00:07:38.943
そして、アロー関数ではディスを変更できない点と、ストリクトかどうかでディスの変換が変わる点に注意することです。

91
00:07:38.943 --> 00:07:47.241
まずは記事の基本例をコンソールで実行し、ネームの値や引数を変えて結果を予測してみてください。

92
00:07:47.241 --> 00:07:48.865
お疲れさまでした。

93
00:07:48.865 --> 00:07:51.932
次回はプロミス・エニーを学びます。