JavaScriptを使ったことのある人なら一度は聞いたことがある、コールバック関数ですが意識せずに何となく使っている方や小難しいから使っていない方が多いのではないでしょうか？
コールバック関数は仕組みが少し複雑なため、敬遠しがちですが開発現場ではよく使われるため苦手意識を今のうち克服しておきましょう。
本記事では、コールバック関数の仕組みから使い方まで誰でも理解できるように徹底解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
コールバック関数とは
コールバック関数とは、他の関数に引数として渡される関数のことを指します。
他の関数に引数として渡される関数？？意味が分からない！という方も多いと思います。実際にコールバック関数を使ったサンプルコードを下記に載せているので見てみましょう。
function say() {
console.log("Hello World");
}
function fn(callback) {
callback();
}
fn(say);上記のコードを実行すると、コンソールにHello Worldが表示されます。このコードがどのような流れで処理を実行しているかを下記にまとめました。
- fn(say)で関数fnが実行され、引数にsayが渡される
- 関数fnが実行され、引数に渡されたcallback(say)を呼び出す
- say関数が実行され、コンソールにHello Worldが出力される
このように関数に渡された引数でさらに別の関数を呼び出すことをコールバック関数と呼びます。
コールバック関数の使い方
コールバック関数の理解が出来たので続いて使い方について詳しく解説していきます。
関数を定義する
まず始めに関数を定義していきます。関数は呼び出す側と呼び出される側の最低2つ用意します。
/* 呼び出される側 */
function say() {
console.log("Hello World");
}
/* 呼び出す側 */
function fn() {
}
fn(say);引数に関数を渡す
続いて引数の設定をします。
function say() {
console.log("Hello World");
}
function fn(callback) { // -> 引数にcallbackにsay関数が渡る
callback(); // -> say関数を呼び出す
}
fn(say);関数の定義と引数の設定をしたら、コールバック関数を実際に実行させてみましょう。
コンソールにHello Worldが出力されているので、正しく動作していることが確認できます。
コールバック関数に引数を渡す
コールバック関数で呼び出される関数に引数を渡すことも可能です。
function sayName(name) { // -> 引数nameに実引数のJohnが渡る
console.log(`Hello ${name}`);
}
function fn(callback) {
callback("John"); // -> 実引数にJohnを設定
}
fn(sayName);上記のコードは、コールバック関数を呼び出す際に実引数として「John」を渡しています。
するとコールバック関数のsayに設定されている引数nameにJohnの文字列が渡されるため、コンソールにHello Johnと出力されます。
コールバック関数が使われる場面
コールバック関数の使い方は理解したけど、実際にコールバック関数ってどこで使われるの？と思った方も多いと思いますので、使われる場面を紹介します。
function delayFn() {
console.log("3秒後に実行されます");
}
setTimeout(delayFn, 3000); // -> 3秒後にdelayFn関数を実行させるコールバック関数で有名なのは、わざと処理を遅延させるsetTimeoutです。第一引数に実行させたい関数(コールバック関数)を設定し、第二引数に遅延させる時間を記述します。
