【JavaScript】コールバック関数とは？意味・使い方・Promiseとの違いをやさしく解説

JavaScriptの学習で「コールバック関数」という言葉が出てくると、一気に難しく感じやすいです。結論からいうと、コールバック関数とは「別の関数に引数として渡して、あとで実行してもらう関数」です。

意味だけ聞くと抽象的ですが、実際は配列処理やイベント処理、非同期処理で毎日のように使われます。この記事では、コールバック関数の意味、基本例、非同期処理との関係、Promiseとの違いを初心者向けに整理します。

結論：コールバック関数は処理の差し込み口

まずはシンプルな例を見てみます。

function processUser(name, callback) {
  console.log("処理開始");
  callback(name);
}

function greet(userName) {
  console.log("こんにちは、" + userName + "さん");
}

processUser("田中", greet);

この例では、greet がコールバック関数です。processUser に渡されて、内部であとから実行されています。

つまり、コールバック関数は「処理の流れのどこかで実行したい追加処理」を外から差し込むための仕組みです。

1. なぜコールバック関数を使うのか

コールバック関数を使うと、親の関数の中身を固定しすぎず、実行する処理だけを外から差し替えられます。

たとえば、同じ「データ取得後の処理」でも、ある画面では表示したい、別の画面では保存したい、ということがあります。そんなとき、結果の後処理だけをコールバックとして渡せば、関数の再利用性が高まります。

2. 配列処理でもコールバックは使われている

コールバック関数は非同期処理だけの話ではありません。配列の forEach や map でも使われています。

const numbers = [1, 2, 3];

numbers.forEach(function(number) {
  console.log(number);
});

forEach に渡している関数がコールバック関数です。配列の要素1つ1つに対して、あとで順番に呼び出されています。

この形はアロー関数と相性がよく、実務では次のようにもよく書きます。

numbers.forEach(number => {
  console.log(number);
});

forEach の記事やアロー関数の記事もあわせて読むと、実際の見え方がつかみやすいです。

3. 非同期処理でのコールバック関数

コールバック関数が特に重要になるのは、時間がかかる処理の完了後に何かをしたい場面です。

setTimeout(function() {
  console.log("2秒後に実行");
}, 2000);

ここでは、setTimeout に渡した関数が2秒後に実行されます。これも立派なコールバック関数です。

つまり、「今すぐではなく、ある条件がそろった後で呼び出す関数」がコールバックだと考えると整理しやすいです。

4. Promise や async/await と何が違うのか

昔からJavaScriptの非同期処理ではコールバック関数がよく使われてきました。ただ、非同期処理が何段も続くと、関数の入れ子が深くなって読みにくくなることがあります。

step1(function() {
  step2(function() {
    step3(function() {
      console.log("完了");
    });
  });
});

このような状態は「コールバック地獄」と呼ばれます。そこで、今のJavaScriptでは Promise や async/await を使って、もっと読みやすく非同期処理を書くことが増えました。

ただし、だからといってコールバック関数が不要になるわけではありません。イベント処理、配列メソッド、ライブラリのAPIなどでは今でも頻繁に登場します。

5. よくあるつまずき

関数を渡すのではなく、その場で実行してしまう

コールバック関数では、greet を渡すのであって、greet() を先に実行するわけではありません。この違いは非常に大切です。

processUser("田中", greet);   // OK
// processUser("田中", greet()); // これは別物

引数の流れが分からなくなる

親の関数からコールバックへ、どの値が渡されるのかを追う必要があります。慣れるまでは、サンプルコードを紙に書いて流れを追うと理解しやすいです。

非同期処理だけの用語だと思ってしまう

実際には forEach や map のような同期処理でも使われています。コールバックは「使われる場面」ではなく、「関数の渡し方」の名前だと考えるのがポイントです。

関連して学びたい記事

• JavaScriptのPromiseとは？
• JavaScriptのasync/awaitとは？
• JavaScriptのアロー関数とは？
• JavaScriptの forEach メソッドとは？

まとめ

コールバック関数は、最初は抽象的に見えますが、「後で呼び出すための関数を渡しているだけ」と分かると一気に読みやすくなります。JavaScriptの非同期処理を理解する土台にもなるので、ここでしっかり押さえておくのがおすすめです。