Zenn
🐡

コールバック関数について書き留める

2024/03/04に公開
HTML
JavaScript
プログラミング初心者
tech

Reactの学習をしていく中で、コールバック関数という概念の理解に苦戦したので書き留めておくことにします。
概念を理解できればさまざまな点で応用できると思うのでしっかり理解しておきたいところです。

コールバック関数とは

コールバック関数とは、他の関数に引数として渡され、別関数内で呼び出される関数のことです。
呼び出し元が設定した関数を呼び出し先の処理で実行するため、コールバックと言われます。
コールバック関数は以下のような場面でよく利用されます。(もちろん、これら以外でもさまざまな部分で利用されています。)

  1. 非同期処理
  2. イベントリスナー
  3. 高階関数の引数

非同期処理

以下にJavaScriptの非同期処理におけるコールバック関数の使用例を記載します。

function fetchUserData(userId, callback) {
  // setTimeoutを使用して非同期処理を模擬
  setTimeout(() => {
    console.log(`Fetching data for user ${userId}`);
    const userData = {
      id: userId,
      name: 'John Doe',
      email: 'john.doe@example.com'
    };
    callback(userData);
  }, 1000); // 1秒後にコールバック関数を実行
}

// コールバック関数を使ってユーザーデータの取得後に処理を実行
fetchUserData(1, (data) => {
  console.log('User data received:', data);
});

この例では擬似的にユーザーデータを取得する非同期処理にコールバック関数を渡し、コンソールにユーザーデータを出力させています。
コールバック関数を別のものに変えることで、データベースからユーザーデータを取得した際の処理を変更することができます。
JavaScriptにおいて、非同期処理を実装する際にはコールバック関数を利用しなければ、確実に非同期処理終了後に関数を実行させることはできません。(非同期処理においては、コールバック関数以外にもPromiseやasync/awaitなどがありますが、今回は割愛させていただきます。)

イベントリスナー

以下がHTMLのイベントリスナーにコールバック関数を利用した例になります。

<button id="myButton">Click me</button>
<script>
  document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button was clicked!');
  });
</script>

clickイベントにコールバック関数を渡すことで、コンソールにログを表示させています。
こちらもコールバック関数を別のものに変更することで、クリック時の動作を変更することができます。

高階関数の引数

高階関数とは、関数を引数に取るもしくは関数を結果として返す関数のことです。
身近なものではJavaScriptのmapメソッドが高階関数です。
以下に使用例を記載します。

const numbers = [1, 2, 3, 4, 5];

// 各要素を二乗するコールバック関数をmapメソッドに渡す
const squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

mapメソッドは配列内の各要素にコールバック関数の処理を行った上で新たな配列を生成します。
こちらも渡すコールバック関数を変更することで柔軟な処理を行うことが可能となっています。

最後に

コールバック関数の使用例を3つほど見てきましたが、コールバック関数は非常に柔軟でさまざまな面で活用できるため、コレ以外にも用途は多岐にわたります。
その分見かけることも、書くことも多くなると思いますので少しずつ理解できるようにしていきましょう。

Discussion