3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TypeScriptでコールバック関数を知る

Last updated at Posted at 2023-08-20

目的

ブルーベリー本でTypeScriptを学習していたが、コールバック関数がいまいちピンときていないのでもう少し詳しく知る

コールバックとは

コールバックは、コールバック関数とは、他の関数に引数として渡される関数のことを指します。

特定の操作が終了した後や、ある条件が満たされたときに実行されるように設定され、ネットワークへのリクエストやファイルからの読み込みといった非同期処理を行う際によく利用されます。

なんとなく分かったけど、もう少し具体的に言えない?

ChatGPTに中学1年生でも分かるように説明してもらいました。


コールバック関数を考える時、友達に「宿題が終わったら、すぐに電話してね!」と頼む場面を想像してみてください。

この場面で、あなたは友達に2つのことを頼んでいます。

  1. 宿題を終わらせること。
  2. 宿題が終わったら、電話をかけること。

この**「宿題が終わったら電話をかける」**部分がコールバック関数の考え方に似ています。
つまり、一つのタスク(宿題を終わらせること)が完了した後に、次のタスク(電話をかけること)を実行するという流れです。

プログラムの中では、何かの処理が終わった後に、次にやるべき処理を「関数」として渡すことができます。その渡された関数(次にやるべき処理)が「コールバック関数」 です。

例えば、コンピュータの中のタイマーを使って「5秒後にアラームを鳴らす」プログラムを作る場合、5秒後に実行する「アラームを鳴らす」部分がコールバック関数になります。


実際にソースコードにしてもらいました。

// コールバック関数の型定義
type Callback = () => void;

// 宿題をする関数
function doHomework(callback: Callback) {
    console.log('宿題をしています...');
    // 擬似的に宿題にかかる時間を表現するためにsetTimeoutを使用します
    setTimeout(() => {
        console.log('宿題が終わりました!');
        callback(); // 宿題が終わった後、コールバック関数を実行
    }, 5000); // 5000ミリ秒後(5秒後)に宿題が終わったとします
}

// 宿題が終わったら電話をする関数(コールバック関数)
function callFriend() {
    console.log('友達に電話をかけています...');
}

// 宿題を開始し、終わったら友達に電話をする
doHomework(callFriend);

この例で、doHomework 関数が「宿題をする」部分を、callFriend 関数が「宿題が終わったら電話をする」部分を表しています。

そして、doHomeworkの中でコールバック関数としてcallFriend が呼び出されています。

まとめ

コールバック関数とは「私の仕事が終わったら、あなたがこれをやってね」という指示をする関数のこと

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?