関連用語集

JavaScriptのコールバック関数とは？仕組みと使い方をやさしく解説

JavaScriptを学んでいると、「コールバック関数」という言葉をよく目にするようになります。
最初は難しく感じるかもしれませんが、実はとてもシンプルで、JavaScriptの非同期処理や柔軟なプログラムに欠かせない重要な仕組みです。

この記事では、コールバック関数の意味と使い方を、初心者にもわかりやすく解説します。

コールバック関数とは？

コールバック関数とは、「別の関数に引数として渡される関数」のことです。
ある処理が終わった後に実行してほしい関数を、あらかじめ渡しておくことで、順番に処理を実行できます。

基本的な例

function greet(name, callback) {
  console.log("こんにちは、" + name);
  callback();
}

function afterGreet() {
  console.log("ご挨拶が完了しました。");
}

greet("Taro", afterGreet);

この例では、afterGreet 関数がコールバック関数として greet 関数に渡されています。

コールバック関数の使い道

主な使い道は次の通りです。

処理の順番を制御したいとき
非同期処理（タイマー、読み込みなど）の後に実行する処理を指定したいとき
共通の処理ロジックを複数の場所で使い回したいとき

非同期処理でのコールバック例

setTimeout(function() {
  console.log("3秒後に実行されました");
}, 3000);

setTimeout の第1引数はコールバック関数です。3秒後にこの関数が呼び出されます。

無名関数（匿名関数）を使ったコールバック

コールバック関数は、その場で定義する「無名関数（匿名関数）」として書くこともできます。

greet("Hanako", function() {
  console.log("Hanakoさんへの挨拶が終わりました。");
});

このようにすれば、1回限りの処理としてその場で関数を定義できます。

配列メソッドとの組み合わせ

forEach や map などの配列メソッドでも、コールバック関数が使われます。

const numbers = [1, 2, 3];

numbers.forEach(function(n) {
  console.log(n * 2);
});

配列の各要素に対して処理を行う関数を、コールバックとして渡しています。

注意点：コールバック地獄

コールバックを多用しすぎて、関数が入れ子（ネスト）になりすぎることを「コールバック地獄」と呼びます。

doSomething(function(result) {
  doNext(result, function(nextResult) {
    doAnother(nextResult, function(finalResult) {
      // ...
    });
  });
});

こうした状況を避けるために、Promise や async/await が登場しました。