なぜ「コールバック関数」と呼ばれるのか？―JavaScriptの基礎からしっかり解説
山崎講師
こんにちは。ゆうせいです。
JavaScriptを学び始めて、きっとこんなコードに出会ったことがあるのではないでしょうか？
setTimeout(function () {
console.log('1秒後に表示されます');
}, 1000);
ここで使われている function () { ... } が「コールバック関数」です。
でも、そもそも疑問に思いませんか？
「なぜ 'コールバック' って言うの？何を 'コール（呼ぶ）' してるの？」
今回はこの不思議な名前の由来と、その意味をかみ砕いて解説していきます。
コールバック関数とは何か？
まずは定義からしっかり押さえましょう。
コールバック関数とは：
「別の関数に引数として渡されて、あとで“呼び戻される”関数」のことです。
名前の由来は英語の "call back"（呼び返す） にあります。
つまり、一度渡した関数が、ある条件やタイミングで「あとで呼ばれる」からコールバックなんですね。
コールバック関数の例で考えてみよう
例：料理でたとえると…
たとえば、あなたがシェフで、オーブンに料理を入れてタイマーをセットしたとしましょう。
setTimeout(料理が焼き上がったら呼んでね関数, 10000);
- あなた（メイン関数）は「10分後にアラームを鳴らしてね」とタイマー（
setTimeout）に命令 - 焼き上がったあとに呼ばれる「呼んでね関数」＝ コールバック関数
この関数はあとから「呼び戻される（callback）」役割を果たしているわけです。
実際のコードで見てみよう
普通の関数
function greet() {
console.log('こんにちは！');
}
greet(); // すぐに呼び出される
コールバック関数
function greetLater(callback) {
console.log('先に何かやってから...');
callback(); // 後で呼ばれる
}
greetLater(function () {
console.log('こんにちは！（後で呼ばれた）');
});
ここでの function () {...} が コールバック関数です。
数式的にイメージしてみよう
通常の関数呼び出し：
f() ⇒ 処理A
コールバック関数を使う場合：
g(callback) ⇒ 処理B → callback() ⇒ 処理C
つまり、
callbackは 引数として渡される関数gの中であとから「呼び戻される」= call back
これが 「コールバック関数」 と呼ばれる理由です。
なぜJavaScriptでよく使われるのか？
JavaScriptは非同期処理（async）がとても多い言語です。
たとえば：
- ユーザーのクリックを待つ
- サーバーからデータが返ってくるのを待つ
- タイマーが終了するのを待つ
これらの「いつ起きるか分からない出来事」に対して、「そのときになったらこれ呼んでね」として使われるのがコールバック関数です。
メリットとデメリットを見てみよう
| 観点 | メリット | デメリット |
|---|---|---|
| シンプルな書き方 | 直感的で分かりやすい | ネストが深くなると読みにくい |
| 非同期に強い | 処理の順番を自由に制御可能 | 「コールバック地獄」に陥りやすい（callback hell） |
コールバック関数を使う場面は？
- イベント発生時（クリック、キー入力など）
- タイマー処理（setTimeout, setInterval）
- API通信完了後（
fetch().then(...)の前身）
たとえば、ボタンをクリックしたら動く処理も、ほとんどが コールバック関数 です。
button.addEventListener('click', function () {
console.log('ボタンが押された！');
});
まとめ：コールバックとは「あとで呼び戻す」仕組みのこと！
- 関数に関数を渡して、あとで呼ぶのが「コールバック関数」
- "call back" = 呼び戻す という意味から名前がついた
- 非同期処理と相性が良いため、JavaScriptで多用される
- ただし、複雑になりすぎると読みづらくなる欠点もある
今後の学習のヒント
次のステップとして、以下を学んでおくと理解がさらに深まります！
- Promiseとasync/await：コールバックの代わりになるモダンな書き方
- コールバック関数とクロージャの関係
- コールバック地獄とは？解消方法は？
「コールバック」という言葉の意味がわかると、コードの流れもクリアになりますよ。
ぜひ、いろんな場面で試してみてください！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール