VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのファンクション・プロトタイプ・アプライを紹介します。
0:07これは、関数の中で使うディスという値と、引数を配列でまとめて指定して、その場で関数を呼び出すためのメソッドです。
0:16前回学んだバインドが、実行せずに新しい関数を作るだけだったのに対し、アプライは呼んだ瞬間に実行され、
0:21関数の戻り値がそのまま返ってきます。
0:27この動画では、書き方と引数、コールとの違い、記事の基本例と境界条件の例、
0:33配列風オブジェクトの扱い、そして間違えやすい注意点まで、実行結果と一緒に学びます。
0:39引数がすでに配列の形で手元にある場面で、特に力を発揮する方法です。
0:44まず動作環境を確認します。
0:46アプライはジャバスクリプトの最初期からある機能で、クロームとファイアーフォックスとサファリではバージョン一以降、
0:51エッジでは十二以降で使えます。
0:56ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。
1:00記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:04スライドの通り、どんな関数にもアプライというメソッドが備わっていて、関数型であること、
1:09そして空の配列で呼ぶと元の関数の戻り値が返ることを、実機でも確認済みです。
1:15追加のパッケージは不要で、ブラウザーのコンソールでもノードでも同じコードで試せます。
1:21書き方を確認します。
1:22対象の関数のあとにドットを書き、アプライとカッコを続けます。
1:26カッコの第一引数が、関数の中で使わせたいディスの値です。
1:30第二引数には、渡したい引数を一つの配列にまとめて指定します。
1:34戻り値は、呼び出した関数自身の戻り値です。
1:37スライドの例では、二と三を配列で渡した呼び出しも、通常の呼び出しも、どちらも五になることを実機で確認しました。
1:44つまりアプライは、呼び出し方を変えるだけで、関数の中身や計算結果は変わりません。
1:50ディスを使わない関数では、第一引数にヌルを渡すのが慣例です。
1:54第二引数を省略した場合は、引数なしの呼び出しとして扱われます。
1:58その点は後の注意点でもう一度確認します。
2:01よく似たメソッドであるコールとの違いを整理します。
2:05コールもアプライも、ディスを指定してその場で関数を実行する点は同じです。
2:11違うのは引数の渡し方だけです。
2:14コールは引数をカンマで一つずつ並べ、アプライは一つの配列にまとめて渡します。
2:20スライドの通り、どちらの方法でも結果はまったく同じになります。
2:26選び方の目安はシンプルで、引数が最初から決まっていて個別に書けるならコール、
2:31引数が配列の形で用意されているならアプライが自然です。
2:37この違いを押さえておくと、次に学ぶコールの記事も読みやすくなります。
2:43名前が似ているため混同しやすい二つですが、引数の形だけに注目すれば迷いません。
2:49配列かどうかが判断の分かれ目です。
2:52記事の基本例を見ます。
2:54トータルという関数は、ディスのベースという値に、引数の二つの数を足して返します。
3:01ここで、ベースが十のオブジェクトをディスとして指定し、引数は二と三を入れた配列でまとめて渡します。
3:09実行結果は十五で、ノードの実機結果とも一致しています。
3:13ポイントは、関数を定義した場所とは別のオブジェクトをディスにできること、
3:18そして引数を配列のまま渡せることの二つです。
3:23データが配列で届く処理と組み合わせると、この形がそのまま役立ちます。
3:28まずはこの例をコンソールで実行し、ベースや配列の中身を変えて結果を予測してみてください。
3:36記事の境界条件の例を見ます。
3:38マックスは、渡された数の中で最大のものを返す関数ですが、引数は一つずつ並べる形でしか受け取れません。
3:46配列のまま渡しても、最大値にはならないのです。
3:49そこでアプライを使うと、配列の三、八、二が展開されて順番に渡され、結果は八になります。
3:56この出力も実機で確認済みです。
3:59なお、現在のジャバスクリプトでは、スプレッド構文という書き方でも同じ展開ができ、
4:04記事でも多くの場合はそちらの方が読みやすいと案内されています。
4:10アプライは、その展開の仕組みを理解する土台として今も大切です。
4:15この例は、配列をそのまま渡せない関数に対して、要素を並べ直して渡す橋渡しの役割を示しています。
4:22第二引数に渡せるのは、本物の配列だけではありません。
4:26添字のゼロ、一、二に値を持ち、長さを表すレングスを備えた、配列風オブジェクトと呼ばれる値でも構いません。
4:35スライドの例では、通常のオブジェクトに添字とレングスを持たせて渡し、十と二十と三十の合計である六十が返ることを実機で確認しました。
4:45関数の中で使えるアーギュメンツという値も、この配列風オブジェクトの代表です。
4:52昔のコードでは、アーギュメンツを別の関数へそのまま引き渡すためにアプライがよく使われました。
4:59配列風という条件が、次の注意点にもつながります。
5:03逆に、配列風ではない通常のオブジェクトを渡すと、レングスが無いために引数が何も渡されません。
5:10この点も実行して確かめる価値があります。
5:14記事が注意点として挙げる仕様です。
5:16第二引数に求められるのは、反復できることではなく、配列風であることです。
5:22たとえばセットは、値を順番に取り出せる反復可能なオブジェクトですが、添字とレングスを持たないため、
5:27アプライに渡しても引数は一つも渡されません。
5:33スライドの通り、セットを渡すと引数はどちらもアンディファインドになり、配列で渡した場合と結果がはっきり違います。
5:41この出力も実機で確認済みです。
5:44セットやマップの値を渡したい場合は、いったん本物の配列に変換するか、スプレッド構文で展開するのが安全です。
5:52第二引数の省略についても確認します。
5:55第二引数は、省略したり、ヌルやアンディファインドを渡したりしても構いません。
6:02その場合は、引数が何もないものとして関数が呼び出されます。
6:07スライドの例では、渡された引数の個数を返す関数が、どちらでもゼロを返すことを実機で確認しました。
6:15一方で、数値のようにオブジェクトではない値を渡すと、タイプエラーという例外が発生します。
6:23渡す前に、値が配列か配列風オブジェクトか、あるいはヌル系かを確認する習慣が大切です。
6:30意図せずプリミティブな値を渡すバグは、この形で表面化します。
6:35最後の注意点を二つ紹介します。
6:37一つ目はディスにヌルを渡したときの扱いです。
6:40通常の関数ではヌルがグローバルオブジェクト側へ変換されますが、ストリクトモードの関数ではヌルのまま渡されます。
6:48スライドの結果の違いは実機でも確認済みで、モードによってディスの正体が変わる点に注意してください。
6:55二つ目は、記事も触れている大量の値の展開です。
6:58要素が極端に多い配列をアプライで渡すと、エンジンの引数の上限を超えてエラーになることがあります。
7:04大きなデータでは、スプレッドでも同じ上限があるため、分割して処理する方法も検討してください。
7:11まとめです。
7:12アプライは、ディスと、配列または配列風の引数一覧を指定して、関数をその場で呼び出すメソッドで、
7:17戻り値は呼び出した関数の結果そのものです。
7:22導入時の判断は三つです。
7:24まず、引数がすでに配列で用意されているときに使うこと。
7:28次に、引数を個別に書けるならコール、実行を後に回したいならバインドと使い分けること。
7:34そして、第二引数は配列風でなければならない点と、大量の要素には上限がある点に注意することです。
7:41まずは記事の基本例をコンソールで実行し、ベースの値や配列の中身を変えて結果を予測してみてください。
7:49お疲れさまでした。
7:50次回のコールと並べて、三つのメソッドの違いを整理してみましょう。

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

この動画で学べること

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

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