【JavaScript】コールバック関数の基礎を学ぶためのサンプルコード

コールバック関数とは「他の関数に引数として渡され、その関数の中で呼び出される関数」です。
これだけでは意味がわからないので、サンプルコードを見ながらコールバック関数の基礎を理解しましょう。

名前の後に「様」または「さん」を付ける
ボタンをクリックしたら関数を実行する
1. コード
2. 解説
ボタンを押した3秒後に挨拶する
Web開発を学ぶならUdemyがおすすめ

名前の後に「様」または「さん」を付ける

コード

function printNameWith(name, callback) {
  console.log(callback(name));
}

function polite(name) {
  return name + ' 様';
}

function casual(name) {
  return name + ' さん';
}

printNameWith('たろう', polite);
printNameWith('じろう', casual);

出力結果

たろう 様
じろう さん

解説

このコードは、「コールバック関数」を使って名前の表示方法を切り替える例です。

まず、printNameWith という関数があります。

function printNameWith(name, callback) {
  console.log(callback(name));
}

ここでのポイントは、第二引数 callback です。
これは「名前をどのように加工するか」を外から渡す仕組みになっています。callback は関数として受け取られ、callback(name) の形で実行されます。

次に、名前を加工するための関数が2つ用意されています。

function polite(name) {
  return name + ' 様';
}

function casual(name) {
  return name + ' さん';
}

polite は丁寧な表現、casual はやわらかい表現に変換します。
どちらも name を受け取り、加工して戻り値として返すだけのシンプルな関数です。

最後に、加工方法を変えて printNameWith を実行しています。

printNameWith('たろう', polite);
printNameWith('じろう', casual);

ここで渡している polite や casual が「コールバック関数」です。
printNameWith は、受け取った関数をあとから実行するため、表示方法を自由に切り替えられます。

まとめ

printNameWith は、名前を表示する役割を持つ。
表示形式（丁寧・カジュアル）は引数として渡し、あとで実行される。
その「あとで呼び出すために渡される関数」がコールバック関数。

このように処理の一部を外から差し替えられるのが、コールバック関数の特徴です。

ボタンをクリックしたら関数を実行する

コード

<button>クリックして！</button>
<script>
  const button = document.querySelector('button');

  button.addEventListener('click', function () {
    console.log('ボタンがクリックされました！');
  });
</script>

解説

こちらは、ボタンを押すと「ボタンがクリックされました！」と出力されるコードです。

function () { ... } もコールバック関数です。

このとき、JavaScript は：

「今すぐこの関数を実行する」のではなく
「ボタンがクリックされたらこの関数を実行してね」

という形で関数を渡しています。

そして、実際にクリックされた瞬間に
addEventListener がその関数を呼び出します。

この「あとで呼び出すために渡された関数」がコールバック関数です。

addEventListener は DOM要素（ここでは button）に属するメソッド（関数） です。
このメソッドに、クリック時に実行してほしい処理としてコールバック関数を渡しています。

【広告】

ボタンを押した3秒後に挨拶する

コード

<button id="btn">3秒後に挨拶</button>
<script>
  function sayHi() {
    console.log('やあ！'); // 3. 3秒後に実行
  }

  document.getElementById('btn').addEventListener('click', function () {
    console.log('ボタンを押した：3秒後に挨拶を予約...'); // 1. すぐ実行

    // 3秒後に sayHi を実行する予約（非同期処理）
    setTimeout(sayHi, 3000);

    console.log('--- 予約完了 ---'); // 2. 次の処理（同期処理）
  });
</script>

出力結果

ボタンを押した：3秒後に挨拶を予約...
--- 予約完了 ---
やあ！

コードをコピペして確認してください。
「ボタンを押した：3秒後に挨拶を予約…」「— 予約完了 —」と出力された３秒後に「やあ！」と出力されます。

解説

このコードは非同期処理の例です。

JavaScriptが提供するsetTimeout関数を使った処理が非同期処理にあたります。

ボタンを押すと、まず「ボタンを押した：3秒後に挨拶を予約…」と「— 予約完了 —」のメッセージがすぐに表示されます。
これは、console.log('--- 予約完了 ---') の方が後に書いてあっても、setTimeout（3秒後に実行する予約）が処理を止めずに即座に完了し、次の行へとすぐに進むためです。
そして、3秒が経過した後、予約されていた関数（sayHi）が実行され、「やあ！」と表示されます。