【JavaScript入門】JavaScriptのコールバック関数を学ぼう

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、JavaScriptのコールバック関数について学びます。

コールバック関数とは何か、コールバック関数は何のためにあるのかなどを解説します。

本題に入る前に、コールバック関数を理解するためにこちらを確認しておきましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「012 コールバック関数」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

コールバック関数ってなに

コールバック関数とは、関数に引数として渡されて実行される関数 です。

「引数として渡されて実行される」とはどういうことでしょうか。

引数に関数を渡す

以前の章で、関数については学びましたね。

【JavaScript入門】JavaScriptの関数を学ぼう

関数は、引数という値を受け取って何かしらの処理をするというものでした。

// 「num」が引数
const sum = (num) => {
  const result = num + 1
  return result
}

sum(1)

この引数に値として関数を渡すことができます。

次の例では、2つ目の引数に「log」という関数を渡しています。

// 関数を定義
const log = () => {
  console.log("計算が終わりました！")
}

// 2つの引数に関数を渡す
const sum = (num, log) => {
  const result = num + 1
  return result
}

sum(1)

この「log」関数がコールバック関数です。

引数に渡された関数を実行する

では、渡された「log」関数を実行してみましょう。

const log = () => {
  console.log("計算が終わりました！")
}

const sum = (num, log) => {
  const result = num + 1

  // コールバック関数を実行する
  log()

  return result
}

sum(1)

実行結果は次のようになります。

計算が終わりました！

このように、関数の引数に関数を渡してそれを任意で実行することができます。

この 引数として渡された関数 をコールバック関数と言います。

コールバック関数は何のためにあるの？

では、コールバック関数は何のために使うのでしょうか。

コールバック関数は、処理を遅延して実行したい場合に使われます。

処理を遅延して実行したい場合とは、どのようなときでしょうか。

処理を遅延して実行したい場合とは

例えば、5秒後にコンソールに「こんにちは」と出すプログラムを書くとします。

まずは、コンソールに「こんにちは」と出す関数を書いてみましょう。

const hello = () => {
  console.log("こんにちは")
}

これを5秒後に実行させたい場合はどうすればいいでしょうか。

JavaScriptでは、setTimeout という関数を使うことができます。

次のように1つ目の引数にコールバック関数を指定し、2つ目の引数にタイマーをミリ秒でセットします。

setTimeout(コールバック関数, タイマー)

setTimeoutに「hello関数」を渡してみましょう。

setTimeout(hello, 5000)

これで、5秒後にコンソールに「こんにちは」と出ます。

実行結果

こんにちは

このように、ある処理を遅らせて実行したい場合 などにコールバック関数を使うことができます。

処理を遅らせて実行したい場合ってそんなにあるの？

処理を遅らせて実行したいケースは多くあるのでしょうか。

開発の現場でウェブサイトやウェブアプリを開発していると、処理を遅らせて実行したい場合がたくさんあります。

それは、主に外部のサーバーからデータを取得するときなどです。

そのような処理は 非同期処理 と言います。

外部のサーバーとのやりとりや非同期処理の仕組みは、「JavaScript 中級シリーズ」で扱います。

こちらの「JavaScript 入門シリーズ」をマスターしたらぜひ学習してみてください。

forEachもコールバック関数を使っている

以前、配列の章でforEachの解説をしました。

【JavaScript入門】JavaScriptの繰り返し文と配列の使い方を学ぼう

実は、このforEach関数もコールバック関数を引数にとります。

もう一度、使い方を見てみましょう。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
weekdays.forEach((day) => {
  console.log(day)
})

1つ目の引数に関数が使われていますね。これがコールバック関数です。

(day) => {
  console.log(day)
}

このコールバック関数は直接引数に渡していますが、次のように書いても同じように使えます。

weekdays.forEach((day) => {
  console.log(day)
})

// 変数に入れているが、同じ意味
const callback = (day) => {
  console.log(day)
}
weekdays.forEach(callback)

コールバック関数は直接引数に渡しても使えるということです。

コールバック関数を書いてみよう

では、実際にオブジェクトを書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「コールバック関数を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// コールバック関数を書いてみよう
const hello = () => {
  console.log("こんにちは")
}
setTimeout(hello, 5000)

const weekdays = ["日曜", "月曜", "火曜", "水曜", "木曜", "金曜", "土曜"]
weekdays.forEach((day) => {
  console.log(day)
})

const calculate = (num1, num2, log) => {
  const result = num1 + num2

  log(result)

  return result
}

const log1 = (val) => {
  console.log("1つ目の計算が終わりました！")
  console.log("計算結果: " + val)
}

const log2 = (val) => {
  console.log("2つ目の計算が終わりました！")
  console.log("計算結果: " + val)
}

calculate(10, 10, log1)
calculate(20, 20, log2)

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

まとめ

本章では、JavaScriptのコールバック関数について学びました。

最後にもう一度、重要なことを確認しましょう。

次章は、JavaScriptとDOMについて解説します。