Zenn
👏

JavaScriptのCallBack関数

に公開
JavaScript
callback
tech

callback function?

コールバック関数は、他の関数に引数として渡される関数です。その関数内で実行（呼び出し）されます。

なぜ使う？

  • 非同期処理の管理
    非同期処理を行う際に、処理が完了した後に実行するコードを指定するためにコールバック関数を使用します。これにより、処理が完了するまで待つことなく、他の作業を進めることができます。

  • 動的なコード実行
    特定の条件に基づいて異なる処理を実行したいときに、コールバック関数を使うことで、動的に異なる関数や処理を実行できます。

  • 再利用性の向上
    コールバック関数を使用することで、同じ関数を何度も呼び出し、異なる挙動を定義できます。これにより、コードの再利用性と柔軟性が高まります。

  • 非同期関数の同期的な流れの制御
    複数の非同期タスクを順番に実行したい場合に、各タスクが完了した後に次のタスクを実行するためにコールバック関数を使用します。これにより、非同期処理を同期的に制御できます。

例 1：基本的な使い方

function greet(name, callback) {
  console.log("こんにちは、" + name);
  callback(); // 渡された関数を実行
}

function sayBye() {
  console.log("さようなら！");
}

greet("たろう", sayBye);

📎 出力結果:

こんにちは、たろう
さようなら！

⭐️callbackという名前でなくても構いませんが、誰が見てもすぐに分かるように
callbackという名前を使うのが一般的な書き方（慣例）です。

例 2-1：無名関数（インラインで書く）

greet("はなこ", function() {
  console.log("良い一日を！");
});

📎 出力結果:

こんにちは、はなこ
良い一日を！

例 2-2 比較：無名関数↔️名前あり関数

setTimeout

setTimeout(function() {
  console.log("1秒後に表示されます");
}, 1000);


function showMessage() {
  console.log("1秒後に表示されます");
}

setTimeout(showMessage, 1000);

forEach

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

fruits.forEach(function(fruit) {
  console.log(fruit);
});


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

function printFruit(fruit) {
  console.log(fruit);
}

fruits.forEach(printFruit);

イベントリスナー（DOM × 無名関数）

document.getElementById("myButton").addEventListener("click", function() {
  alert("クリックされました！");
});

function handleClick() {
  alert("クリックされました！");
}

document.getElementById("myButton").addEventListener("click", handleClick);

カスタム関数

function greet(callback) {
  console.log("こんにちは！");
  callback();  // ここでコールバック実行
}

greet(function() {
  console.log("さようなら！");
});


function sayHello() {
  console.log("こんにちは！");
}

function sayBye() {
  console.log("さようなら！");
}

function greet(callback) {
  sayHello();
  callback();  // ここでコールバック関数を実行
}

greet(sayBye);

アロー関数

setTimeout(() => {
  console.log("これはアロー関数の無名コールバックです");
}, 500);

よく使われる場面：

  • setTimeoutやsetInterval
  • 配列のmap, filter, forEachなど
  • useEffect, fetch().then()などReactや非同期処理
  • イベントリスナー（例：onClick）

まとめ：

  • コールバック関数は、他の関数の中で呼ばれる関数です。
  • 関数の引数として渡すのがポイント。
  • 結果を待ってから処理を進めたり、処理を柔軟にしたいときに使います。

Discussion