VIDEO LESSON

JavaScriptのFunction.prototype.bind()の使い方：引数・戻り値・実例と注意点の解説動画

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのファンクション・プロトタイプ・バインドを紹介します。
0:06これは、関数の中で使うディスという値と、先頭の引数をあらかじめ固定して、
0:10新しい関数を作るためのメソッドです。
0:13ポイントは、バインドした時点では関数を実行しないことです。
0:18実行の準備が整った新しい関数を受け取り、好きなタイミングで呼び出せます。
0:23この動画では、書き方と引数、記事の基本例、引数を固定する使い方、コールバックでの活用、
0:28そして間違えやすい注意点まで、実行結果と一緒に学びます。
0:33ディスで困った経験がある方にこそ、役立つ内容です。
0:36名前は似ていますが、次に学ぶコールやアプライとは役割が違うので、その違いも最後に意識しながら進めましょう。
0:44まず動作環境を確認します。
0:46このメソッドも古くからある機能で、クロームではバージョン七以降、ファイアーフォックスでは四以降、
0:51サファリでは五・一以降、エッジでは十二以降で使えます。
0:56ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。
1:01記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:05どんな関数にもバインドというメソッドが備わっていて、呼び出すと関数型の値が返ることを、
1:08実機でも確認済みです。
1:12追加のパッケージは不要で、ブラウザーのコンソールでもノードでも同じコードで試せます。
1:18書き方を確認します。
1:19対象の関数のあとにドットを書き、バインドとカッコを続けます。
1:24カッコの第一引数が、固定したいディスの値です。
1:27第二引数以降には、先頭から固定したい引数を並べられます。
1:31戻り値は、条件を固定された新しい関数です。
1:34実機で確認した通り、元の関数とは別のものとして扱われます。
1:38ここで大切なのは、バインド自体は関数を実行しない、という点です。
1:43あくまで新しい関数を作って返すだけなので、実際に処理が走るのは、その新しい関数を呼び出したときです。
1:51この区別を押さえておくと、次の例が読みやすくなります。
1:54なぜバインドが必要なのか、背景を説明します。
1:58オブジェクトのメソッドの中では、ディスはそのオブジェクト自身を指します。
2:04ところが、メソッドを変数に取り出して単独で呼んだり、別の関数へコールバックとして渡したりすると、
2:10ディスが外れてしまい、期待した値が読めなくなることがあります。
2:16スライドの例では、ショーという関数に、ユーザーオブジェクトをバインドしてから呼ぶことで、
2:22名前が正しく表示されることを実機で確認しました。
2:27つまりバインドは、関数と、関数が前提とする相手を、切り離せない形で結び付ける道具です。
2:34この困りごとを理解すると、活用場面が自然に見えてきます。
2:39記事の基本例を見ます。
2:40グリートという関数は、ディスの名前の前後に、引数で受け取った文字列を付けて返します。
2:47ここに、名前が葵というオブジェクトをディスとして固定し、さらに先頭の引数に、
2:51あいさつ文まで固定します。
2:55できた新しい関数ハローを、残りの引数だけ渡して呼ぶと、結果は、こんにちは、
2:59葵さん、になります。
3:03この出力はノードの実機結果と一致しています。
3:06ディスの固定と引数の固定を、同時に行っている例です。
3:10記事の元のコードはテンプレート文字列でしたが、このスライドでは通常の文字列連結に置き換えて表示しています。
3:19意味は同じです。
3:20次に、引数の固定だけに注目します。
3:23スライドのアドという関数は、三つの数を受け取って合計を返します。
3:29ここで第一引数の十を固定した新しい関数を作ると、呼び出し時には残りの二つを渡すだけで済みます。
3:37実行結果は六十で、実機とも一致しています。
3:41ディスを使わない関数では、第一引数にはヌルなどを渡して、引数の固定だけを利用します。
3:48このように、一部の引数を先に決めて専用の関数を作る使い方は、部分適用とも呼ばれます。
3:56税率や割引率など、毎回同じ値を渡す場面で、呼び出し側のコードがすっきりします。
4:03記事が代表例として挙げる、コールバックでの活用を見ます。
4:07カウンターというオブジェクトには、カウントを一つ増やすメソッドがあります。
4:13このメソッドをそのまま別の場所へ渡すと、ディスが外れて正しく動きません。
4:18そこで、バインドでカウンター自身を固定した関数を作ってから渡します。
4:23スライドの例では、取り出した関数を二回呼ぶと、一、二と正しく数えられることを実機で確認しました。
4:30タイマーやイベント処理など、関数だけを渡して後から実行してもらう場面はとても多いので、
4:35この型は実務でも頻繁に登場します。
4:39渡す前にバインドする、と覚えておいてください。
4:42記事の境界条件の例で、大切な性質を確認します。
4:46空の関数ワークに対して、まったく同じ条件でバインドを二回行い、結果同士を厳密比較すると、
4:51答えはフォルスになります。
4:56つまりバインドは呼ぶたびに新しい関数を作り、二つは別物として扱われるのです。
5:03この出力も実機で確認済みです。
5:05一見すると細かい話ですが、次のセクションで説明するイベント解除の問題に直結します。
5:12関数の同一性が結果を左右する場面では、この性質を必ず思い出してください。
5:18対策はシンプルで、作った関数を変数に保存して使い回すことです。
5:24注意点を二つ紹介します。
5:25一つ目はアロー関数です。
5:27アロー関数のディスは、書かれた場所の外側のスコープで決まる仕組みで、記事でも、
5:32バインドで変更することはできないと明記されています。
5:37二つ目は、一度固定したディスは後から変えられないことです。
5:42スライドの例では、バインド済みの関数に対して、別のオブジェクトを指定して呼び直しても、
5:47結果は最初に固定した値のままになることを実機で確認しました。
5:53固定は上書きできない、という性質のおかげで、意図しない書き換えを防げます。
5:59逆に言えば、最初に正しい相手を固定することが大切です。
6:03実務で最もつまずきやすい注意点です。
6:06イベント処理では、関数を登録するときと解除するときに、まったく同じ関数を渡す必要があります。
6:12ところが、登録のたびにバインドを書き直すと、前のセクションで見た通り、毎回別の関数になってしまい、
6:17解除が効きません。
6:21スライドの通り、変数に保存した関数同士なら同一と判定されますが、新しくバインドしたものとは別物です。
6:28記事でも、同一の参照が必要な場合は作った関数を保存する、と案内されています。
6:34バインドしたら保存する、この一手間が、解除できないバグを防いでくれます。
6:39元の関数自体は変わらない点も、あわせて覚えておきましょう。
6:43まとめです。
6:44バインドは、ディスと先頭の引数を固定した新しい関数を作るメソッドで、呼び出した時点では元の関数を実行しません。
6:53導入時の判断は三つです。
6:55まず、コールバックでディスを維持したいときに使うこと。
6:59次に、よく使う先頭の引数を固定して、専用の関数を作れること。
7:04そして、アロー関数のディスは変えられず、バインドのたびに別の関数ができるため、
7:08作った関数は変数に保存して使うことです。
7:13まずは記事の基本例をコンソールで実行し、固定する名前やあいさつ文を変えて結果を予測してみてください。
7:21お疲れさまでした。
7:22次は、呼んだ瞬間に実行するコールやアプライとの違いにも注目してみてください。
7:28バインドは作るだけ、コールとアプライはその場で呼ぶ、という対比を押さえると三つの使い分けが一気に整理できます。

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

この動画で学べること

Function.prototype.bind()でthisや先頭の引数を固定した新しい関数を作る方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのFunction.prototype.bind()の使い方：引数・戻り値・実例と注意点 →