未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【JavaScript】コールバック関数とは?仕組みから使い方まで徹底解説

JavaScriptを使ったことのある人なら一度は聞いたことがある、コールバック関数ですが意識せずに何となく使っている方や小難しいから使っていない方が多いのではないでしょうか?

コールバック関数は仕組みが少し複雑なため、敬遠しがちですが開発現場ではよく使われるため苦手意識を今のうち克服しておきましょう。

本記事では、コールバック関数の仕組みから使い方まで誰でも理解できるように徹底解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのJavaScriptメカニズム

作成者 CodeMafia
学習時間 20.5時間
受講者数 16,593人
レビュー (2,383件)

コールバック関数とは

コールバック関数とは、他の関数に引数として渡される関数のことを指します。

他の関数に引数として渡される関数??意味が分からない!という方も多いと思います。実際にコールバック関数を使ったサンプルコードを下記に載せているので見てみましょう。

JavaScript
function say() {
  console.log("Hello World");
}

function fn(callback) {
  callback();
}

fn(say);

上記のコードを実行すると、コンソールにHello Worldが表示されます。このコードがどのような流れで処理を実行しているかを下記にまとめました。

  1. fn(say)で関数fnが実行され、引数にsayが渡される
  2. 関数fnが実行され、引数に渡されたcallback(say)を呼び出す
  3. say関数が実行され、コンソールにHello Worldが出力される

このように関数に渡された引数でさらに別の関数を呼び出すことをコールバック関数と呼びます。

コールバック関数の使い方

コールバック関数の理解が出来たので続いて使い方について詳しく解説していきます。

関数を定義する

まず始めに関数を定義していきます。関数は呼び出す側と呼び出される側の最低2つ用意します。

JavaScript
/* 呼び出される側 */
function say() {
  console.log("Hello World");
}

/* 呼び出す側 */
function fn() {

}

fn(say);

引数に関数を渡す

続いて引数の設定をします。

JavaScript
function say() {
  console.log("Hello World");
}

function fn(callback) { // -> 引数にcallbackにsay関数が渡る
  callback();  // -> say関数を呼び出す
}

fn(say);

関数の定義と引数の設定をしたら、コールバック関数を実際に実行させてみましょう。

コンソールにHello Worldが出力されているので、正しく動作していることが確認できます。

コールバック関数に引数を渡す

コールバック関数で呼び出される関数に引数を渡すことも可能です。

JavaScript
function sayName(name) { // -> 引数nameに実引数のJohnが渡る
  console.log(`Hello ${name}`);
}

function fn(callback) {
  callback("John"); // -> 実引数にJohnを設定
}

fn(sayName);

上記のコードは、コールバック関数を呼び出す際に実引数として「John」を渡しています。

するとコールバック関数のsayに設定されている引数nameJohnの文字列が渡されるため、コンソールにHello Johnと出力されます。

コールバック関数が使われる場面

コールバック関数の使い方は理解したけど、実際にコールバック関数ってどこで使われるの?と思った方も多いと思いますので、使われる場面を紹介します。

JavaScript
function delayFn() {
  console.log("3秒後に実行されます");
}

setTimeout(delayFn, 3000); // -> 3秒後にdelayFn関数を実行させる

コールバック関数で有名なのは、わざと処理を遅延させるsetTimeoutです。第一引数に実行させたい関数(コールバック関数)を設定し、第二引数に遅延させる時間を記述します。