先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptのコールバック関数って何ですか？名前は聞くけど、どういうものかよくわかりません。」

先生

「コールバック関数は、他の関数の中に渡して使う特別な関数のことです。後で呼び出される関数なので、名前の『callback』は『呼び戻す』という意味なんですよ。」

生徒

「例えばどんなときに使うんですか？イメージしにくいです。」

先生

「わかりました。それでは、わかりやすい例を使ってコールバック関数の仕組みを説明しますね。」

1. コールバック関数とは？

コールバック関数とは、ある関数に渡しておき、特定のタイミングで呼び出される関数のことです。

簡単に言うと、「関数の中に関数を入れておいて、その関数を後から実行する」仕組みです。

例えば、料理で例えると、友達に「料理ができたら電話してね」と伝えておくようなものです。料理（メインの処理）が終わったときに電話（コールバック関数）が呼ばれます。

2. なぜコールバック関数を使うの？

プログラムは処理がすぐ終わるものもあれば、時間がかかるものもあります。

例えば、インターネットからデータを取ってくる処理は時間がかかることがあります。そんなとき、処理が終わった後にやりたいことをコールバック関数として渡しておくと、処理が終わったときに自動で実行されます。

これにより、プログラムの流れがスムーズになり、待っている間も他の処理ができます。

3. コールバック関数の基本的な書き方

コールバック関数は、関数の引数として別の関数を渡します。


function greet(name, callback) {
  console.log("こんにちは、" + name + "さん！");
  callback();
}

function sayGoodbye() {
  console.log("さようなら！");
}

greet("太郎", sayGoodbye);

この例では、greet関数にsayGoodbyeという関数を渡しています。greetの中でcallback()が呼ばれると、渡したsayGoodbyeが実行されます。

4. 無名関数（名前のない関数）をコールバックに使う

コールバック関数は名前を付けた関数だけでなく、その場で作る無名関数（アロー関数も含む）も使えます。


greet("花子", function() {
  console.log("またね！");
});

このように、関数を直接引数として渡すことも多いです。

5. よくあるコールバック関数の活用例

JavaScriptでは、配列の処理や非同期処理でコールバック関数がよく使われます。

例えば、配列の中の要素を順番に表示する場合。


const fruits = ["リンゴ", "バナナ", "オレンジ"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

forEach関数に渡した無名関数が、配列の要素ごとに呼ばれています。

6. コールバック関数で非同期処理を便利に

例えば、インターネットからデータを取るとき、時間がかかるため、その間プログラムを止めずに別の処理を進めたいときにコールバック関数が活躍します。


// 例：データ取得が終わったら処理を実行
function fetchData(callback) {
  setTimeout(() => {
    console.log("データ取得完了！");
    callback();
  }, 2000);
}

fetchData(() => {
  console.log("取得したデータを使って処理開始！");
});

ここでは、setTimeoutで2秒後に処理が完了し、その後にコールバック関数が呼ばれます。