Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@tsuji_za

コールバック関数とは

コールバック関数とは

関数の引数に渡された関数のことをコールバック関数といいます。
呼び出された関数が逆に関数を呼び出す側になるのでコールバックと言います。
実際にコードをみてみましょう。

// ②confirmed関数が呼び出される
function confirmed(fn) {
  if(window.confirm("OKを押して下さい")) {
// ③引数で受け取った関数を呼び出す
    fn()
  }
};
// ①confiremed関数を呼び出す
confirmed(function () {
  console.log("OKを押しました");
});

このコードを実行してみます。

スクリーンショット 2021-05-04 19.14.36.png

スクリーンショット 2021-05-04 19.16.18.png

ポップアップでOKを押してくださいと出てきます。
OKを押し、コンソールを確認するとOKを押しましたと表示されています。

処理を追ってみます。
まず最初にconfirmed関数を呼び出します。
この時、confirmed関数に対し引数で関数を受け渡しています。
JavaScriptでは関数もオブジェクトの一つであるため、関数を引数として指定することも可能です。
呼び出されたconfirmed関数は処理を実行します。
処理を実行するのでブラウザ上にポップアップでOKを押してくださいが表示されます。
ユーザーがOKを押下すると、呼び出された側であったはずのconfirmed関数が引数で受け取った関数を呼び出しています。
その結果console.log("OKを押しました")の処理が実行されるので、コンソールにOKを押しましたと表示されます。
最初は呼び出された側であったconfirmed関数が処理を実行した後、逆に関数を呼び出す側になったと思います。
これがコールバック関数です。

コールバック関数が主に使われるケース

非同期処理を行う時に使用する事が多いです。

非同期処理というのは、誰かに仕事を任せる事で自分は別の仕事を進める事ができます。(つまり同時に複数処理を行える。)
この場合コールバック関数は、非同期処理でお願いした仕事が終わった後に、特定の処理を指定する時に使われます。

実際にsetTimeout関数を使用した例をみてみましょう。

setTimeout( コールバック関数 , 時間の指定 )

第一引数にコールバック関数、第二引数に時間の指定をする事ができます。
setTimeoutは時間を指定し、一定時間後に一度だけコールバック関数を実行する事ができます。

const Bye = function(){
  console.log('さよなら!');
}

console.log('おはよう!')

setTimeout(Bye, 3000);

console.log('調子はどう?');

>> おはよう!
>> 調子はどう?
// 3秒後にByeが実行される
>> さよなら!

処理を流れをみてみます。
console.log('おはよう!')を実行した後、setTimeoutが発火します。
このsetTimeoutは非同期処理のため、3秒間待つようにお願いし、その間に自分は次の処理に進む事ができます。
その結果console.log('調子はどう?')を実行し、そして3秒待った後Byeが実行され、さよなら!が表示されます。

まとめ

コールバック関数は関数の引数に渡された関数のことを指します。
非同期処理で使用する場合、お願いした仕事(非同期処理)が終わった後に、別の処理を指定する際にコールバック関数が使われます。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tsuji_za
24歳 エンジニアになるため転職活動中です! 日々学習したことをアウトプットしていきます!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?