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

生徒

「TypeScriptで“コールバック関数”って聞いたんですけど、どういうものなんですか？」

先生

「コールバック関数は、ある関数に“引数として渡される別の関数”のことです。渡された関数は、元の関数の中で後から呼び出されます。」

生徒

「関数を引数に渡すっていうのがよくわからないです…」

先生

「では、日常生活の例で説明しましょう。宅配便を頼むときに、“荷物が届いたら電話してください”とお願いするのと似ています。この『電話してください』の部分がコールバックです。」

生徒

「なるほど！実際にTypeScriptでどう書くか見たいです！」

先生

「それでは、コールバック関数の基本的な書き方と型指定の方法を順番に見ていきましょう！」

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

TypeScriptのコールバック関数は、ある処理が終わった後に実行される関数です。通常の関数は呼び出すとすぐに処理されますが、コールバック関数は別の関数の「引数」として渡され、その関数の中で任意のタイミングで呼ばれます。

例えば、タイマー処理やデータ取得後の処理など、「後から実行したい処理」を書くときに便利です。

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

まずは型指定をしないシンプルな例から見てみましょう。


function doTask(callback: Function) {
    console.log("作業を開始します...");
    callback();
}

doTask(function() {
    console.log("作業が完了しました！");
});

この例では、doTask関数の引数callbackに、別の無名関数（名前のない関数）を渡しています。doTask関数内でcallback()を呼び出すことで、その関数の処理が後から実行されます。

3. 型指定を使ったコールバック関数

TypeScriptの特徴は型安全（型が間違っているとエラーになる）です。コールバック関数にも型を指定することで、間違った使い方を防げます。

コールバック関数の型は、「引数の型」と「戻り値の型」をセットで書きます。


function doTask(callback: () => void) {
    console.log("作業を開始します...");
    callback();
}

doTask(() => {
    console.log("作業が完了しました！");
});

ここでは() => voidという型を使っています。()は「引数がない」ことを表し、voidは「戻り値がない」ことを表します。

4. 引数つきのコールバック関数

コールバック関数には引数を渡すこともできます。例えば、処理結果をコールバックに渡す場合です。


function fetchData(callback: (data: string) => void) {
    const data = "取得したデータ";
    callback(data);
}

fetchData((result) => {
    console.log("受け取ったデータ:", result);
});

ここでは(data: string) => voidという型で、コールバックがstring型のデータを受け取ることを指定しています。

5. 実行結果のイメージ


作業を開始します...
作業が完了しました！
取得したデータ
受け取ったデータ: 取得したデータ

6. コールバック関数を使うメリット

処理の順序を制御できる（非同期処理に便利）
処理内容を関数の外から差し替えられる（柔軟性）
コードの再利用性が高まる

例えば、宅配便の例のように「荷物が届いたら連絡する」という流れを、処理の中に直接書かず、外から渡すことで自由に変えられるようになります。

7. コールバック関数とアロー関数の組み合わせ

TypeScriptでは、コールバック関数をアロー関数で書くことが多いです。短く書けて読みやすくなるためです。


function doTask(callback: () => void) {
    console.log("作業を開始します...");
    callback();
}

doTask(() => console.log("作業が完了しました！"));

このように1行の処理であれば、波括弧{}すら省略できます。

まとめ

TypeScriptのコールバック関数は、ほかの関数に引数として渡され、処理の流れの中で好きなタイミングで実行できる便利な仕組みです。とくに非同期処理や順序が大切な処理において、コールバック関数は欠かせない技術となります。この記事で学んだように、まずはシンプルなコールバック関数の使い方から始め、次に関数の型指定を加えることで安全性と可読性を高めることができます。引数つきのコールバック関数を扱うことで、外部の処理結果を柔軟に受け取り、あとから自由な処理を追加できる構造になり、アプリケーションの拡張性も高まります。また、TypeScriptではアロー関数との組み合わせがよく使われ、読みやすく直感的なコードを書くことができます。コールバック関数の概念はJavaScript全体で広く利用されており、TypeScriptでは型指定を行うことでより正確に動作を管理できる点が強みとなります。以下に、今回学んだ内容を踏まえたサンプルコードを示します。記事内で使ったクラス名やタグと似た形で再掲し、理解を深めやすい構成にまとめています。

コールバック関数の総まとめサンプルコード


function processData(callback: (value: string) => void) {
    console.log("データ処理を開始します...");
    const value = "コールバックで受け取るデータ内容";
    callback(value);
}

processData((result) => {
    console.log("処理結果を受け取りました:", result);
});

このサンプルでは、処理の流れを明確に分けつつ、コールバック関数の型指定によって受け取るデータの内容まで明確化しています。こうした書き方を習得することで、複雑になりがちな非同期処理でも整理されたコードを書くことができるようになります。とくに大型の開発では、コールバック関数の正しい型指定が重要となり、チーム全体のコード品質にも大きく貢献します。「作業が終わったらこの関数を実行する」という流れを柔軟に構築できるため、さまざまな処理の連携にも役立ちます。コールバックの技術を理解しておくと、今後学ぶPromiseやasync/awaitといった非同期処理のステップにもスムーズにつながります。今回の記事で得た知識を次の学習にも活かしていきましょう。

先生と生徒の振り返り会話

生徒

「今日の内容で、コールバック関数の仕組みがようやく理解できました！引数に関数を渡すって不思議でしたけど、宅配便の例を聞いたら一気にわかりやすくなりました。」

先生

「そうですね。TypeScriptでは型をつけることで、さらに安全にコールバックを扱えるようになります。特に非同期処理では順番が重要なので、コールバックの役割はとても大きいですよ。」

生徒

「型指定のあるコールバックは安心感がありますね。引数の型をきちんと指定するだけで間違いが減るのがすごく良いと思いました。」

先生

「その通りです。今回の例のように、`(value: string) => void` のように書くと、受け取るデータの型も明確になり、他の人が読むときも理解しやすいコードになります。」

生徒

「アロー関数もすごく使いやすかったです！コールバックと合わせるとスッキリ書けるのが気持ちいいですね。」

先生