こんにちは！ ライターのナナミです。
JavaScriptを使っていて、同じ処理だから使いまわしたいコードがあったりしますよね。
そんな時は関数を定義していると思います。
その関数の使い方にapplyというメソッドを使う方法があるのはご存知でしょうか？
applyって何？
applyは知ってるけど、使い方がわからない…
今回はそんな方必見！
関数を呼び出すapplyメソッドについて解説していきます。
この記事は下記の流れで進めていき、疑問をどんどん解消していきますね。
【基礎】applyの使い方
【基礎】applyの活用方法
【発展】applyとcallの違い
applyに似たメソッド、callとの違いまでバッチリ解説していきます。
applyの活用方法を覚えて、より関数を使い回せるようになっちゃいましょう！
applyとは？
applyとは、定義した関数を呼び出すことができるメソッドです。
呼び出す際に、関数の処理の対象となる要素を指定することができます。
つまり、<div>要素に処理を行ないたい場合は、applyで<div>を指定するのです。
さらに、呼び出した関数で使う引数もapplyの中で指定することができます。
これにより、関数の中で対象を決める必要がなくなるので、いろんなところで関数を使いまわすことができます。
applyの特徴は、呼び出した関数内で使う引数（applyの第二引数）は配列のみが使えるという点です。
つまり配列を使う関数を呼び出す時に使うメソッドということですね。
applyの使い方
applyは下記のように記述することで使うことができます。
関数名.apply(関数の処理の対象となる要素,関数で使う引数(配列のみ) );
実際に使ってみると、下記のようになります。
var list = function() {
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
};
};
var args = [1,2,3,4,5];
list.apply(window, args);
実行結果
1 2 3 4 5
関数の中でループ処理をして、数字をコンソールに表示してみました。
第二引数を変えれば、別の数字に変更することも可能です。
var list = function() {
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
};
};
var args = [1,3,7,9,11];
list.apply(window, args);
実行結果
1 3 7 9 11
apply活用方法
applyを使えば、同じ処理を別々の要素、別々の値で指定することができるので、関数が使える幅を広げることができますね。
例えば、サイト上で同じデザインだけど値が違う表が複数必要…という時、下記のように関数を用意して使いまわすことが可能です。
See the Pen apply by 河野七海 (@kouno73) on CodePen.
他にも配列を使う関数を使いまわす時には、applyが大活躍してくれることでしょう！
applyとcallの違い
applyと同じく、関数を呼び出すメソッドにcallというメソッドがあります。
関数を呼び出すことには変わりないのですが、第二引数が全然違うのです。
関数名.apply(関数の処理の対象となる要素,関数で使う引数(配列のみ) ); 関数名.call(関数の処理の対象となる要素,関数で使う引数,関数で使う引数,関数で使う引数… );
そう、callの第二引数は配列ではないのです。
関数に引数を指定する際、決まって必要なものは明示的に指定しておきますよね。
callはそのような、呼び出す関数の引数の数が決まっている時に使用します。
callの場合、第二引数以降は元の関数の引数と同じ数になるのです。
配列を使う関数の場合はapply、そうじゃない場合はcallを使うと覚えておきましょう！
まとめ
いかがでしたか？
applyを使うことで、関数の使いまわしがはかどりますね。
使う場合は、元の関数に配列を使うのかどうか、しっかり確認するようにしましょう。
どんどん関数を使いまわして、楽々なプログラミングを目指してくださいね！
