コールバック関数とは?【初心者向け】JavaScript講座

こんにちは!
今回は「コールバック関数」について解説します。コールバック関数は、JavaScriptやPythonなど多くのプログラミング言語で使われる概念で、非同期処理や動的な動作の実現に欠かせないものです。初心者には少し難しく感じるかもしれませんが、この記事を読めばきっと理解できるようになります!


コールバック関数とは?

簡単に言うと

「他の関数に引数として渡される関数」 のことです。

例えば、誰かに「これが終わったらこれをして!」と頼むようなものです。コンピュータプログラムでも同じように、ある処理が終わったら次の処理を行うよう指示する際にコールバック関数が活躍します。


コールバック関数の仕組みを理解しよう

例としてJavaScriptを使った簡単なコードを見てみましょう。

function greet(name, callback) {
    console.log(`こんにちは、${name}さん!`);
    callback();
}

function sayGoodbye() {
    console.log("さようなら!");
}

greet("田中", sayGoodbye);

解説

  1. greet関数は2つの引数を受け取ります。1つ目は名前、2つ目がコールバック関数です。
  2. greet内では、まず挨拶を表示し、その後に渡されたコールバック関数を実行します。
  3. 実行結果として、「こんにちは、田中さん!」の後に「さようなら!」が表示されます。

コールバック関数の用途

1. 非同期処理

Webアプリケーションでは、データの取得やAPI呼び出しなど時間のかかる処理があります。この間に他の作業を続けるために、コールバック関数がよく使われます。

以下は、JavaScriptの非同期処理での例です。

function fetchData(callback) {
    setTimeout(() => {
        console.log("データ取得完了");
        callback("取得したデータ");
    }, 2000);
}

function processData(data) {
    console.log(`処理中: ${data}`);
}

fetchData(processData);

このコードでは、2秒後にデータを取得し、その後コールバック関数processDataが呼び出されます。これにより、時間のかかる処理が終わるまで待つ必要がなくなります。

2. イベントリスナー

ボタンをクリックしたときに特定の処理を行うのもコールバック関数の一例です。

document.getElementById("myButton").addEventListener("click", function() {
    console.log("ボタンがクリックされました!");
});

addEventListenerに渡している匿名関数がコールバック関数です。


コールバック地獄に注意!

コールバック関数は便利ですが、複雑な処理で多用すると**「コールバック地獄」**と呼ばれる問題が発生します。これは、コールバック関数が入れ子になりすぎてコードが読みにくくなる状態です。

例: コールバック地獄

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            console.log(result3);
        });
    });
});

これを避けるために、JavaScriptではPromiseasync/awaitが導入されています。例えば、Promiseを使うと以下のようにスッキリ書けます。

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => console.log(result3))
    .catch(error => console.error(error));

コールバック関数の利点

  1. 柔軟性が高い
    他の関数の動作を自由に変更できるため、汎用性が高まります。
  2. 非同期処理を実現
    他の作業を待つ必要がなく、効率的にプログラムを動かせます。
  3. コードの再利用性
    汎用的な関数を組み合わせて使うことで、同じコードを複数の場面で活用できます。

公式ドキュメントを参照しよう!

さらに詳しく知りたい方は、MDN Web Docsのコールバック関数についてもぜひチェックしてみてください。


まとめ

この記事では、コールバック関数の基本から応用まで解説しました。
最初は少し難しく感じるかもしれませんが、実際にコードを書いて練習することで慣れることができます。特に、非同期処理やイベント処理の場面では必須の知識となるため、ぜひ活用してみてください!


関連する記事はこちら↓↓

タイトルとURLをコピーしました