WEBVTT

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

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

3
00:00:06.265 --> 00:00:10.110
これは、関数の中で使うディスという値と、先頭の引数をあらかじめ固定して、

4
00:00:10.110 --> 00:00:13.955
新しい関数を作るためのメソッドです。

5
00:00:13.955 --> 00:00:18.084
ポイントは、バインドした時点では関数を実行しないことです。

6
00:00:18.084 --> 00:00:23.211
実行の準備が整った新しい関数を受け取り、好きなタイミングで呼び出せます。

7
00:00:23.211 --> 00:00:28.266
この動画では、書き方と引数、記事の基本例、引数を固定する使い方、コールバックでの活用、

8
00:00:28.266 --> 00:00:33.321
そして間違えやすい注意点まで、実行結果と一緒に学びます。

9
00:00:33.321 --> 00:00:36.881
ディスで困った経験がある方にこそ、役立つ内容です。

10
00:00:36.881 --> 00:00:44.428
名前は似ていますが、次に学ぶコールやアプライとは役割が違うので、その違いも最後に意識しながら進めましょう。

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

12
00:00:46.226 --> 00:00:51.414
このメソッドも古くからある機能で、クロームではバージョン七以降、ファイアーフォックスでは四以降、

13
00:00:51.414 --> 00:00:56.602
サファリでは五・一以降、エッジでは十二以降で使えます。

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

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

16
00:01:05.041 --> 00:01:08.776
どんな関数にもバインドというメソッドが備わっていて、呼び出すと関数型の値が返ることを、

17
00:01:08.776 --> 00:01:12.512
実機でも確認済みです。

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

19
00:01:18.322 --> 00:01:19.788
書き方を確認します。

20
00:01:19.788 --> 00:01:24.186
対象の関数のあとにドットを書き、バインドとカッコを続けます。

21
00:01:24.186 --> 00:01:27.558
カッコの第一引数が、固定したいディスの値です。

22
00:01:27.558 --> 00:01:31.663
第二引数以降には、先頭から固定したい引数を並べられます。

23
00:01:31.663 --> 00:01:34.742
戻り値は、条件を固定された新しい関数です。

24
00:01:34.742 --> 00:01:38.994
実機で確認した通り、元の関数とは別のものとして扱われます。

25
00:01:38.994 --> 00:01:43.685
ここで大切なのは、バインド自体は関数を実行しない、という点です。

26
00:01:43.685 --> 00:01:51.016
あくまで新しい関数を作って返すだけなので、実際に処理が走るのは、その新しい関数を呼び出したときです。

27
00:01:51.016 --> 00:01:54.974
この区別を押さえておくと、次の例が読みやすくなります。

28
00:01:54.974 --> 00:01:58.492
なぜバインドが必要なのか、背景を説明します。

29
00:01:58.492 --> 00:02:04.250
オブジェクトのメソッドの中では、ディスはそのオブジェクト自身を指します。

30
00:02:04.250 --> 00:02:10.567
ところが、メソッドを変数に取り出して単独で呼んだり、別の関数へコールバックとして渡したりすると、

31
00:02:10.567 --> 00:02:16.884
ディスが外れてしまい、期待した値が読めなくなることがあります。

32
00:02:16.884 --> 00:02:22.322
スライドの例では、ショーという関数に、ユーザーオブジェクトをバインドしてから呼ぶことで、

33
00:02:22.322 --> 00:02:27.759
名前が正しく表示されることを実機で確認しました。

34
00:02:27.759 --> 00:02:34.636
つまりバインドは、関数と、関数が前提とする相手を、切り離せない形で結び付ける道具です。

35
00:02:34.636 --> 00:02:39.114
この困りごとを理解すると、活用場面が自然に見えてきます。

36
00:02:39.114 --> 00:02:40.870
記事の基本例を見ます。

37
00:02:40.870 --> 00:02:47.574
グリートという関数は、ディスの名前の前後に、引数で受け取った文字列を付けて返します。

38
00:02:47.574 --> 00:02:51.644
ここに、名前が葵というオブジェクトをディスとして固定し、さらに先頭の引数に、

39
00:02:51.644 --> 00:02:55.714
あいさつ文まで固定します。

40
00:02:55.714 --> 00:02:59.465
できた新しい関数ハローを、残りの引数だけ渡して呼ぶと、結果は、こんにちは、

41
00:02:59.465 --> 00:03:03.216
葵さん、になります。

42
00:03:03.216 --> 00:03:06.727
この出力はノードの実機結果と一致しています。

43
00:03:06.727 --> 00:03:10.877
ディスの固定と引数の固定を、同時に行っている例です。

44
00:03:10.877 --> 00:03:19.337
記事の元のコードはテンプレート文字列でしたが、このスライドでは通常の文字列連結に置き換えて表示しています。

45
00:03:19.337 --> 00:03:20.614
意味は同じです。

46
00:03:20.614 --> 00:03:23.644
次に、引数の固定だけに注目します。

47
00:03:23.644 --> 00:03:29.347
スライドのアドという関数は、三つの数を受け取って合計を返します。

48
00:03:29.347 --> 00:03:37.723
ここで第一引数の十を固定した新しい関数を作ると、呼び出し時には残りの二つを渡すだけで済みます。

49
00:03:37.723 --> 00:03:41.465
実行結果は六十で、実機とも一致しています。

50
00:03:41.465 --> 00:03:48.950
ディスを使わない関数では、第一引数にはヌルなどを渡して、引数の固定だけを利用します。

51
00:03:48.950 --> 00:03:56.436
このように、一部の引数を先に決めて専用の関数を作る使い方は、部分適用とも呼ばれます。

52
00:03:56.436 --> 00:04:03.386
税率や割引率など、毎回同じ値を渡す場面で、呼び出し側のコードがすっきりします。

53
00:04:03.386 --> 00:04:07.547
記事が代表例として挙げる、コールバックでの活用を見ます。

54
00:04:07.547 --> 00:04:13.046
カウンターというオブジェクトには、カウントを一つ増やすメソッドがあります。

55
00:04:13.046 --> 00:04:18.396
このメソッドをそのまま別の場所へ渡すと、ディスが外れて正しく動きません。

56
00:04:18.396 --> 00:04:23.449
そこで、バインドでカウンター自身を固定した関数を作ってから渡します。

57
00:04:23.449 --> 00:04:30.583
スライドの例では、取り出した関数を二回呼ぶと、一、二と正しく数えられることを実機で確認しました。

58
00:04:30.583 --> 00:04:35.041
タイマーやイベント処理など、関数だけを渡して後から実行してもらう場面はとても多いので、

59
00:04:35.041 --> 00:04:39.500
この型は実務でも頻繁に登場します。

60
00:04:39.500 --> 00:04:42.918
渡す前にバインドする、と覚えておいてください。

61
00:04:42.918 --> 00:04:46.840
記事の境界条件の例で、大切な性質を確認します。

62
00:04:46.840 --> 00:04:51.699
空の関数ワークに対して、まったく同じ条件でバインドを二回行い、結果同士を厳密比較すると、

63
00:04:51.699 --> 00:04:56.558
答えはフォルスになります。

64
00:04:56.558 --> 00:05:03.038
つまりバインドは呼ぶたびに新しい関数を作り、二つは別物として扱われるのです。

65
00:05:03.038 --> 00:05:05.595
この出力も実機で確認済みです。

66
00:05:05.595 --> 00:05:12.586
一見すると細かい話ですが、次のセクションで説明するイベント解除の問題に直結します。

67
00:05:12.586 --> 00:05:18.724
関数の同一性が結果を左右する場面では、この性質を必ず思い出してください。

68
00:05:18.724 --> 00:05:24.010
対策はシンプルで、作った関数を変数に保存して使い回すことです。

69
00:05:24.010 --> 00:05:25.873
注意点を二つ紹介します。

70
00:05:25.873 --> 00:05:27.735
一つ目はアロー関数です。

71
00:05:27.735 --> 00:05:32.780
アロー関数のディスは、書かれた場所の外側のスコープで決まる仕組みで、記事でも、

72
00:05:32.780 --> 00:05:37.824
バインドで変更することはできないと明記されています。

73
00:05:37.824 --> 00:05:42.325
二つ目は、一度固定したディスは後から変えられないことです。

74
00:05:42.325 --> 00:05:47.991
スライドの例では、バインド済みの関数に対して、別のオブジェクトを指定して呼び直しても、

75
00:05:47.991 --> 00:05:53.656
結果は最初に固定した値のままになることを実機で確認しました。

76
00:05:53.656 --> 00:05:59.399
固定は上書きできない、という性質のおかげで、意図しない書き換えを防げます。

77
00:05:59.399 --> 00:06:03.590
逆に言えば、最初に正しい相手を固定することが大切です。

78
00:06:03.590 --> 00:06:06.207
実務で最もつまずきやすい注意点です。

79
00:06:06.207 --> 00:06:12.893
イベント処理では、関数を登録するときと解除するときに、まったく同じ関数を渡す必要があります。

80
00:06:12.893 --> 00:06:17.109
ところが、登録のたびにバインドを書き直すと、前のセクションで見た通り、毎回別の関数になってしまい、

81
00:06:17.109 --> 00:06:21.325
解除が効きません。

82
00:06:21.325 --> 00:06:28.593
スライドの通り、変数に保存した関数同士なら同一と判定されますが、新しくバインドしたものとは別物です。

83
00:06:28.593 --> 00:06:34.117
記事でも、同一の参照が必要な場合は作った関数を保存する、と案内されています。

84
00:06:34.117 --> 00:06:39.350
バインドしたら保存する、この一手間が、解除できないバグを防いでくれます。

85
00:06:39.350 --> 00:06:43.566
元の関数自体は変わらない点も、あわせて覚えておきましょう。

86
00:06:43.566 --> 00:06:44.514
まとめです。

87
00:06:44.514 --> 00:06:53.209
バインドは、ディスと先頭の引数を固定した新しい関数を作るメソッドで、呼び出した時点では元の関数を実行しません。

88
00:06:53.209 --> 00:06:55.106
導入時の判断は三つです。

89
00:06:55.106 --> 00:06:59.375
まず、コールバックでディスを維持したいときに使うこと。

90
00:06:59.375 --> 00:07:04.117
次に、よく使う先頭の引数を固定して、専用の関数を作れること。

91
00:07:04.117 --> 00:07:08.781
そして、アロー関数のディスは変えられず、バインドのたびに別の関数ができるため、

92
00:07:08.781 --> 00:07:13.445
作った関数は変数に保存して使うことです。

93
00:07:13.445 --> 00:07:21.349
まずは記事の基本例をコンソールで実行し、固定する名前やあいさつ文を変えて結果を予測してみてください。

94
00:07:21.349 --> 00:07:22.772
お疲れさまでした。

95
00:07:22.772 --> 00:07:28.779
次は、呼んだ瞬間に実行するコールやアプライとの違いにも注目してみてください。

96
00:07:28.779 --> 00:07:37.474
バインドは作るだけ、コールとアプライはその場で呼ぶ、という対比を押さえると三つの使い分けが一気に整理できます。