【JavaScript入門】applyって何だ?callとの違いまで徹底解説

こんにちは! ライターのナナミです。

JavaScriptを使っていて、同じ処理だから使いまわしたいコードがあったりしますよね。
そんな時は関数を定義していると思います。

その関数の使い方にapplyというメソッドを使う方法があるのはご存知でしょうか?

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.0

他にも配列を使う関数を使いまわす時には、applyが大活躍してくれることでしょう!

applyとcallの違い

applyと同じく、関数を呼び出すメソッドにcallというメソッドがあります。

関数を呼び出すことには変わりないのですが、第二引数が全然違うのです。

関数名.apply(関数の処理の対象となる要素,関数で使う引数(配列のみ) );

関数名.call(関数の処理の対象となる要素,関数で使う引数,関数で使う引数,関数で使う引数… );

そう、callの第二引数は配列ではないのです。

関数に引数を指定する際、決まって必要なものは明示的に指定しておきますよね。
callはそのような、呼び出す関数の引数の数が決まっている時に使用します。

callの場合、第二引数以降は元の関数の引数と同じ数になるのです。

配列を使う関数の場合はapply、そうじゃない場合はcallを使うと覚えておきましょう!

まとめ

いかがでしたか?

applyを使うことで、関数の使いまわしがはかどりますね。
使う場合は、元の関数に配列を使うのかどうか、しっかり確認するようにしましょう。

どんどん関数を使いまわして、楽々なプログラミングを目指してくださいね!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説