概要
コールバック関数とは、関数に渡される関数のことです。
渡された関数は、呼び出し側によって適切なタイミングで実行されます。
つまり、
- コールバック関数は「処理を渡す側が定義する関数」
- 呼び出す側は「渡された関数を実行するシステムやメソッド」
の役割を持ちます。
目次
基本構文
JavaScript
// 配列のfilterで条件を渡すコールバック関数
const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(x => x > 2);
console.log(result);
// 出力結果 [3, 4, 5]
-
x => x > 2が コールバック関数 -
filterメソッドが 呼び出す側
コールバック関数の特徴
-
渡す側が関数を定義する
- 例:
x => x > 2、() => console.log("Hello") - 処理内容を渡す側で自由に定義できる
- 例:
-
呼び出す側が関数を実行する
- 例:
filter、setTimeout、addEventListener - 適切なタイミングで関数を呼び出す
- 例:
-
第一級オブジェクトとして扱える
- 関数を変数に代入したり、他の関数に渡したりできる
-
書き方に柔軟性がある
- 通常関数、無名関数、アロー関数などで定義可能
活用例
配列のfilterで使用
JavaScript
const numbers = [1, 2, 3, 4, 5];
const filtered = numbers.filter(x => x > 2);
console.log(filtered);
// 出力結果 [3, 4, 5]
-
x => x > 2がコールバック関数 -
filterが呼び出す側として、配列の各要素に対して実行する
ReactコンポーネントでsetTimeout
JavaScript
import { useEffect, useState } from "react";
export default function TimerComponent() {
const [message, setMessage] = useState("待機中");
useEffect(() => {
// コールバック関数は渡す側で定義
const timer = setTimeout(() => {
setMessage("3秒経過");
}, 3000);
return () => clearTimeout(timer);
}, []);
return <div>{message}</div>;
}
-
() => { setMessage("3秒経過"); }がコールバック関数 - ReactのuseEffect/setTimeoutが呼び出す側として、3秒後に実行する
- 実際のUI更新の流れをイメージしやすい
Reactコンポーネントでイベントハンドラ
JavaScript
import { useState } from "react";
export default function ButtonComponent() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
クリック回数: {count}
</button>
);
}
-
() => setCount(count + 1)がコールバック関数 - ボタンのクリックイベントが呼び出す側として、クリック時に実行する
- Reactコンポーネントレベルでのコールバック関数利用例
まとめ
| 例 | コールバック関数（渡す側が定義） | 呼び出す側 |
|---|---|---|
| 配列filter | x => x > 2 |
filter メソッド |
| setTimeout (React) | () => { setMessage(...) } |
タイマーシステム |
| ボタンクリック (React) | () => setCount(...) |
イベントシステム |
- コールバック関数は、処理を渡す側で定義して、呼び出す側に実行してもらう関数
- Reactコンポーネントでも、UI更新やイベントハンドラで頻繁に使用される