コールバック関数ってなに

コールバック関数

プログラムにおいて非同期処理やイベント駆動処理を実現するための概念

ある関数の引数として渡され、その関数内で特定のタイミングや条件が発生した際に呼び出される関数のこと

コールバック関数　利用場面の例

非同期処理

非同期処理が完了した後に実行されるコードを指定
→その処理が完了するまで待たずに他の処理を継続できる

・タイマー処理
・HTTPリクエストなど

非同期処理とは

非同期処理

プログラムの実行において、タスクが同期的に逐次的に処理されるのではなく、順序なく並行して実行される処理のこと
→プログラムの性能向上やユーザーエクスペリエンスの向上に役立つ

☆ウェブブラウザでは非同期処理が重要
→ウェブページが応答しなくなるブロッキングを防ぐために非同期なリクエストが多用される

非同期処理の例

• タイマー処理
  一定時間後に特定の処理を実行する場合
  →非同期なタイマー処理を使う

• ネットワークリクエスト
  サーバーからデータを取得する場合
  →非同期なネットワークリクエストを使ってウェブサーバーと通信

• イベント処理
  ボタンのクリックやキーボード入力などのイベントを処理する場合

非同期処理のかみ砕いた例

クッキーづくりを例とした同期処理と非同期処理

• 同期的処理の場合
  クッキーを1つ焼いては、焼き終わるまで次のクッキーを焼き始めれない
  クッキーが全部焼き終わるまで待たないといけないうえ、待っている間に他のことができない

• 非同期的処理の場合
  クッキーを焼いている間に、デコレーション用のチョコを溶かしたりなどの準備ができる
  待ち時間の間にほかのことができるようになるということ（同時並行で作業ができる）

ウェブページやゲームでも同じような考え方
ウェブページの表示やゲームの処理が非同期的に行われることで、スムーズに動くようになる

イベントハンドリング

イベントが発生した際に実行されるコードをコールバック関数として指定
・ボタンがクリックされた
・マウスが要素に乗った　など

コールバック関数の例

function fetchDataFromServer(callback) {
  // サーバーからデータを非同期で取得する処理
  // データ取得が完了した後に、コールバック関数を呼び出す
  const data = ...; // データの取得処理
  callback(data); // コールバック関数を実行
}

// fetchDataFromServer関数を呼び出し、コールバック関数を渡す例
fetchDataFromServer(function(data) {
  console.log("データを取得しました:", data);
});

fetchDataFromServer関数にコールバック関数を引数として渡す
↓
サーバーからデータを取得した後、そのコールバック関数を呼び出している