コールバック関数
留学生のみなさんにもわかりやすいように、「コールバック関数」 をやさしい日本語で説明します。
I. コールバック関数を一言(ひとこと)でいうと?
「あとで やってね!という お願いのメモ」 です。
ふつうのプログラムは、上から下へ順番に進みます。 でも、コールバック関数は「今すぐ」ではなく、「ある時が来たら」 動くように予約する命令です。
II. 「お店でのちゅうもん」で たとえてみましょう
あなたがレストランへ行きました。
- あなた(メインプログラム): 店員さんに「オムライスをください。できあがったら、ベルを鳴らしてください」と言いました。
- 店員さん(forEachメソッド): 料理を作ります。
- ベルを鳴らす(コールバック関数): 料理ができたタイミングで、店員さんがベルを鳴らします。
この「できあがったら、〇〇してね」という 「〇〇」の部分 がコールバック関数です。
III. forEach の中での動き
forEach は、配列(データのリスト)の中身をひとつずつ見ていく命令です。
// 果物(くだもの)の名前のリスト
const fruits = ["りんご", "バナナ", "みかん"];
// fruits.forEach( ここに書くのがコールバック関数(かんすう) );
fruits.forEach((item) => {
console.log(item + "を食べます");
});
プログラムの中の会話(かいわ)
- forEach: 「リストの中身をひとつずつ取り出すよ! 取り出すたびに、何をすればいい?」
- コールバック関数: 「取り出したものに『を食べます』をつけて表示してね!」
- forEach: 「わかった! じゃあ、『りんご』を取り出したから、君(コールバック関数)に渡すね。実行して!」
- コールバック関数: 「はい!『りんごを食べます』と出します!」
これを、リストが終わるまで繰り返します。
IV. なぜ「コールバック」という名前なの?
英語(えいご)の “Call back”(電話をかけなおす) と同じ意味です。
- ふつうの関数: あなたが関数を「呼ぶ(Call)」。
- コールバック関数: 相手(forEachなど)が、あとであなたを「呼び出す(Call back)」。
このように、「主役が入れ替わる」 のがポイントです。
まとめ
- コールバック関数 = 他のプログラムに「これ、あとで使ってね」と渡す関数のこと。
- forEach = リストのデータひとつずつに、コールバック関数を動かしてあげる役割。
V. プログラム例
「数字の合計」を計算するコードを書いてみます。やさしい日本語で説明しながら書きます。
1. 合計を計算するプログラム
このプログラムは、リストの中にある数字を全部足して、最後に答えを出します。
// 1. 数字のリストを作ります
const numbers = [10, 20, 30, 40];
// 2. 合計を入れる「空(から)の箱」を作ります。最初は 0 です。
let total = 0;
// 3. forEach を使って、ひとつずつ足していきます
numbers.forEach((num) => {
// ここがコールバック関数(かんすう)です!
total = total + num;
console.log(num + " を足しました。今は " + total + " です。");
});
// 4. 最後に答えを表示(ひょうじ)します
console.log("ぜんぶの合計は " + total + " です!");
2. プログラムの動きを解説
① let total = 0;
これは、計算の結果を入れておくための 「貯金箱」 のようなものです。最初は何も入っていないので 0 にしておきます。
② コールバック関数の仕事
numbers.forEach((num) => { ... }); の中(なか)が、お願いしたメモ(コールバック関数)です。
forEachがリストから10を見つける。- コールバック関数に
10を渡す。 - 関数が 「今の合計(0)に 10 を足してね!」 と実行する。
- 次の
20でも同じことをする。
これを繰り返すことで、貯金箱の中身がどんどん増えていきます。
3. もっと短く書く方法
プログラミングに慣れてきたら、こんな書き方もできます。
total = total + num;total += num;(これでも同じ意味になります!)