VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのファンクション・プロトタイプ・コールを紹介します。
0:06これは、関数の中で使うディスという値と、引数を一つずつ指定して、その場で関数を呼び出すためのメソッドです。
0:14前々回学んだバインドが、実行せずに新しい関数を作るだけだったのに対し、コールは呼んだ瞬間に実行され、
0:19関数の戻り値がそのまま返ってきます。
0:24この動画では、書き方と引数、アプライとの違い、記事の基本例と境界条件の例、
0:29同じ関数の再利用、そして間違えやすい注意点まで、実行結果と一緒に学びます。
0:35引数が個別に決まっている場面で、特に分かりやすい方法です。
0:39同じ関数でも、どのオブジェクトのデータで動かすかを呼び出し側で選べる点が、
0:43コールの中心的な考え方です。
0:47まず動作環境を確認します。
0:48コールはジャバスクリプトの最初期からある機能で、クロームとファイアーフォックスとサファリではバージョン一以降、
0:53エッジでは十二以降で使えます。
0:57ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。
1:01記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:04スライドの通り、どんな関数にもコールというメソッドが備わっていて、関数型であること、
1:09そして引数なしで呼ぶと元の関数の戻り値が返ることを、実機でも確認済みです。
1:14追加のパッケージは不要で、ブラウザーのコンソールでもノードでも同じコードで試せます。
1:19対応範囲が広いため、古いブラウザーを含む環境でも安心して使える基本機能の一つと言えます。
1:25書き方を確認します。
1:26対象の関数のあとにドットを書き、コールとカッコを続けます。
1:31カッコの第一引数が、関数の中で使わせたいディスの値です。
1:36第二引数以降には、渡したい引数をカンマで一つずつ並べます。
1:40戻り値は、呼び出した関数自身の戻り値です。
1:44スライドの例では、二と三を個別に渡した呼び出しも、通常の呼び出しも、どちらも五になることを実機で確認しました。
1:53つまりコールは、呼び出し方を変えるだけで、関数の中身や計算結果は変わりません。
1:59ディスを使わない関数では、第一引数にヌルを渡すのが慣例です。
2:04引数の並び順が、そのまま関数の引数へ対応します。
2:08前回学んだアプライとの違いを整理します。
2:11コールもアプライも、ディスを指定してその場で関数を実行する点は同じです。
2:16違うのは引数の渡し方だけです。
2:19コールは引数をカンマで一つずつ並べ、アプライは一つの配列にまとめて渡します。
2:25スライドの通り、どちらの方法でも結果はまったく同じになります。
2:30選び方の目安はシンプルで、引数が最初から決まっていて個別に書けるならコール、
2:35引数が配列の形で用意されているならアプライが自然です。
2:40名前が似ているため混同しやすい二つですが、引数の形だけに注目すれば迷いません。
2:46個別か配列かが判断の分かれ目です。
2:49記事の基本例を見ます。
2:51グリートという関数は、引数の言葉に、ディスのネームという値を続けて返します。
2:57ここで、ネームが葵のオブジェクトをディスとして指定し、引数には、こんにちは、
3:01という文字列を渡します。
3:05実行結果は、こんにちは、葵で、ノードの実機結果とも一致しています。
3:10ポイントは、関数を定義した場所とは別のオブジェクトをディスにできることです。
3:16なお記事の元のコードはテンプレート文字列でしたが、スライドでは通常の文字列連結で同じ意味に書き換えています。
3:25まずはこの例をコンソールで実行し、ネームや引数を変えて結果を予測してみてください。
3:32記事の境界条件の例を見ます。
3:34このリードという関数は、ストリクトモードを指定したうえで、ディスをそのまま返す関数です。
3:40コールでヌルを渡して実行すると、返ってきた値がヌルと一致し、結果はトゥルーになります。
3:47この出力も実機で確認済みです。
3:49ストリクトモードでは、渡したディスが変換されずにそのまま使われることが分かります。
3:56後の注意点でも触れますが、通常の関数ではヌルの扱いが異なるため、モードの違いは実行結果を左右します。
4:03基本例と並べて、ディスがどう受け取られるかを意識して読んでみてください。
4:09これは記事が用意した確認用の例で、成功か失敗かではなく、値そのものがどう渡るかを見るためのものです。
4:16コールの便利な使い方として、メソッドの借用を紹介します。
4:21スライドの例では、エーというオブジェクトの中にある挨拶のメソッドを、ビーという別のオブジェクトをディスにして呼び出しています。
4:32ビーのネームは凛なので、結果は、こんにちは、凛になります。
4:37この出力も実機で確認済みです。
4:39同じ処理をデータごとに書き直さなくても、ディスを差し替えるだけで再利用できるのが大きな利点です。
4:48ライブラリーの内部や、似た形のオブジェクトが複数ある処理で、この考え方がよく使われます。
4:55元のオブジェクト自体は変更されません。
4:58記事が注意点として挙げる仕様です。
5:01アロー関数のディスは、定義した場所の外側のディスに固定されるため、コールで別のオブジェクトを渡しても変更できません。
5:09スライドの例では、ホルダーという名前を持つ場所で作ったアロー関数に、別の名前のオブジェクトを渡して呼んでも、
5:15結果はホルダーのまま変わらないことを実機で確認しました。
5:20ディスを差し替えて再利用したい処理では、アロー関数ではなく通常の関数で定義することが大切です。
5:27コールが効かないのではなく、アロー関数側の仕様だと理解してください。
5:32似た見た目でも通常の関数とアロー関数では扱いが正反対になるため、定義の書き方を最初に確認してください。
5:39引数の数についても確認します。
5:41コールで渡す引数が足りない場合、不足分にはアンディファインドが入り、エラーにはなりません。
5:48逆に、関数の定義より多く渡しても、余った引数は通常は無視されます。
5:53スライドの通り、一つだけ渡した場合は二つ目がアンディファインドになり、三つ渡した場合は先頭の二つだけが使われることを、
5:58実機で確認しました。
6:03呼び出し側で個数を厳密にチェックする仕組みはないため、必要な引数がそろっているかは、
6:08書く側が意識して確認する必要があります。
6:13アプライでも、この過不足の扱いは同じです。
6:16最後の注意点として、ディスの変換ルールを紹介します。
6:20通常の関数では、ディスにヌルを渡すとグローバルオブジェクト側へ変換され、
6:25文字列のような値を渡すとオブジェクトとして扱われます。
6:30一方、ストリクトモードの関数では、渡した値がそのままディスになります。
6:35スライドの通り、同じ文字列を渡しても、通常の関数ではオブジェクト、ストリクトでは文字列という異なる結果になることを実機で確認しました。
6:46境界条件の例でヌルがそのまま返った理由も、このルールで説明できます。
6:51モードを確認する習慣が大切です。
6:54特にライブラリーの関数を借用するときは、この変換が思わぬ結果を招くことがあるため注意が必要です。
7:01まとめです。
7:03コールは、ディスと、個別に並べた引数を指定して、関数をその場で呼び出すメソッドで、
7:08戻り値は呼び出した関数の結果そのものです。
7:14導入時の判断は三つです。
7:16まず、引数が個別に決まっているときに使うこと。
7:20次に、引数が配列で用意されているならアプライ、実行を後に回したいならバインドと使い分けること。
7:29そして、アロー関数ではディスを変更できない点と、ストリクトかどうかでディスの変換が変わる点に注意することです。
7:38まずは記事の基本例をコンソールで実行し、ネームの値や引数を変えて結果を予測してみてください。
7:47お疲れさまでした。
7:48次回はプロミス・エニーを学びます。

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

この動画で学べること

Function.prototype.call()でthisと引数を指定して関数を呼び出す方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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