JavaScriptのコールバック関数入門【初心者向け】

JavaScript コールバック関数とは？

JavaScriptを学んでいると「コールバック関数」という言葉が出てきます。難しそうに聞こえますが、仕組みはシンプルです。

コールバック関数とは、「別の関数に引数として渡す関数」のことです。「後で呼び出してね」と関数を渡しておき、適切なタイミングで実行してもらいます。

コールバック関数の基本

// 関数を引数として渡す
function greet(name, callback) {
  console.log('こんにちは、' + name + 'さん！');
  callback(); // 渡された関数を実行
}

function bye() {
  console.log('またね！');
}

greet('田中', bye);
// こんにちは、田中さん！
// またね！

👉 オブジェクト入門も参考にしてください。

よく使うコールバックの例

addEventListener

// 第2引数がコールバック関数
document.getElementById('btn').addEventListener('click', function() {
  console.log('クリックされました！');
});

// アロー関数でも書ける
document.getElementById('btn').addEventListener('click', () => {
  console.log('クリックされました！');
});

setTimeout：一定時間後に実行

// 2秒後にコールバックを実行
setTimeout(function() {
  console.log('2秒経ちました！');
}, 2000);

配列のforEach

const fruits = ['りんご', 'バナナ', 'みかん'];

// forEachの引数がコールバック関数
fruits.forEach(function(fruit) {
  console.log(fruit);
});

🔥 localStorage入門で実践してみましょう。

無名関数とアロー関数

コールバックには名前のない 無名関数 や アロー関数 がよく使われます。

// 無名関数
setTimeout(function() { console.log('実行！'); }, 1000);

// アロー関数（短く書ける）
setTimeout(() => console.log('実行！'), 1000);

💡 DOM操作入門で基礎を確認できます。

コールバック関数の実践的な使い方

コールバック関数を使った実践的な例を紹介します。

使い方1：イベント処理

ボタンがクリックされたときに実行する関数を、addEventListenerの第2引数にコールバックとして渡します。「クリックされたらこの処理を実行してね」と登録しておく仕組みです。イベント処理について詳しくは「JavaScriptのイベント処理入門」で学べます。

使い方2：タイマー処理

setTimeoutやsetIntervalにコールバック関数を渡すと、指定した時間が経ったあとに処理を実行できます。「3秒後にメッセージを表示する」「1秒ごとにカウントダウンする」といった処理に使います。

使い方3：配列のメソッド

配列のforEach、map、filterなどのメソッドは、コールバック関数を受け取ります。「各要素に対してこの処理を実行する」という形で使います。たとえばfilterに「80点以上かどうか判定する関数」を渡すと、条件に合う要素だけが残ります。

使い方4：非同期処理

データの取得が完了したあとに実行する処理を、コールバックとして渡すパターンです。fetchのthenメソッドに渡す関数もコールバックの一種です。

関数の基本を復習したい人は「JavaScript関数入門」を読んでみてください。関数の定義方法や引数の使い方がわかっていれば、コールバックもスムーズに理解できます。

コールバック関数でよくあるミス

ミス1：コールバックを呼び出してしまう

コールバックとして渡すときは、関数名だけを書きます。丸かっこをつけると、その場で実行されてしまいます。「handleClick」が正しく、「handleClick()」は間違いです。

ミス2：thisの参照が変わる

コールバック関数の中でthisを使うと、期待と違うオブジェクトを指すことがあります。アロー関数を使うか、bind()で明示的にthisを固定すると解決できます。

ミス3：コールバック地獄

コールバックの中にコールバック、さらにその中にコールバック…と入れ子が深くなると、コードが読みにくくなります。これを「コールバック地獄」と呼びます。Promiseやasync/awaitを使うと、入れ子を浅くできます。

ミス4：エラー処理を忘れる

コールバックの中でエラーが起きたとき、適切に処理しないとプログラムが止まります。try...catchで囲むか、エラー用のコールバックを用意しましょう。

コールバック関数を理解するためのたとえ話

コールバック関数は「注文」に似ています。レストランで料理を注文するとき、「料理ができたら呼んでください」と伝えますよね。料理ができるまで席で待っていて、できあがったら店員さんが呼びに来てくれます。

プログラミングでも同じです。「データの読み込みが終わったら、この関数を実行してね」とブラウザに伝えます。読み込みが終わるまで他の処理を続けて、終わったらコールバック関数が呼ばれます。

この仕組みのおかげで、時間のかかる処理を待っている間もページが固まりません。ユーザーはボタンを押したりスクロールしたりできます。

コールバック関数は最初は難しく感じるかもしれません。でも、JavaScriptを書いていると毎日のように使います。まずはaddEventListenerやsetTimeoutで「関数を渡す」感覚に慣れることから始めましょう。慣れてくると、Promiseやasync/awaitといったさらに便利な非同期処理の書き方も理解しやすくなります。コールバックはまさにその土台となる非常に重要な概念なのです。

まとめ

コールバック関数はJavaScriptの重要な概念です。レッスンでさらに実践的な使い方を学んでみましょう。