JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのコールバック関数とは？基本の仕組みと実装例をわかりやすく解説

JavaScriptでは、関数もオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡すことが可能です。このように渡された関数は、受け取った側の関数の中で呼び出すことができ、これをコールバック関数（callback function）と呼びます。

コールバックは、非同期処理やイベントハンドリングなど、現代のJavaScript開発において欠かせない重要な概念です。ここでは、基本的なコールバックの仕組みをサンプルコードとともに解説します。

コールバック関数のサンプルコード

以下は、2つの数値を加算し、その結果をコールバック関数で処理するシンプルな例です。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>JavaScript コールバック関数のデモ</h1>
<p class="sample"></p>
<button class="btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、add関数が別の関数をコールバックします
</h3>
<script>
    function add(a, b, callback) {
        callback(a + b);
    }
    function multiplyResultByTwo(res) {
        document.querySelector(".sample").innerHTML = res * 2;
    }
    document.querySelector(".btn").addEventListener("click", () => {
        add(4, 5, multiplyResultByTwo);
    });
</script>
</body>
</html>

コードの解説

このサンプルのポイントは以下の通りです。

  • add(a, b, callback)：第3引数として関数を受け取り、計算結果をその関数に渡して呼び出しています。
  • multiplyResultByTwo(res)：コールバックとして渡される関数で、受け取った結果を2倍にして画面に表示します。
  • addEventListener：ボタンのクリックイベント発生時に、add(4, 5, multiplyResultByTwo) を実行します。

実行結果

ページを表示した直後の状態：

JavaScriptのコールバック関数とは？基本の仕組みと実装例をわかりやすく解説

「CLICK HERE」ボタンをクリックすると：

JavaScriptのコールバック関数とは？基本の仕組みと実装例をわかりやすく解説

この例では、add(4, 5) の結果である 9 がコールバック関数に渡され、さらに2倍された 18 が画面に表示されます。このように、処理の一部を外部の関数に委ねることで、柔軟で再利用性の高いコードを書くことができます。

  1. JavaScriptの関数プロトタイプとは？仕組みと使い方を解説

    JavaScriptで作成されたすべての関数には、JavaScriptエンジンによって自動的にprototypeプロパティが追加されます。このprototypeプロパティはオブジェクトであり、デフォルトではconstructorプロパティを含んでいます。関数のプロトタイプには、以下のようにしてアクセスできます。functionName.prototypeコンストラクタ関数を使ってオブジェクトを生成する場合、このprototypeプロパティを活用することで、同じコンストラクタから作成された複数のオブジェクト間でメソッドやプロパティを効率的に共有することができます。これにより、各インスタンスごとに

  2. JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説

    ファーストクラス関数（第一級関数）とは？ JavaScriptでは、関数もオブジェクトの一種として扱われます。そのため、関数を別の関数の引数（パラメータ）として渡したり、関数の中で別の関数を戻り値として返したりすることが可能です。 このような性質を持つことから、JavaScriptの関数はファーストクラス関数（第一級関数）と呼ばれています。つまり、関数は変数・オブジェクト・配列などに自由に格納できる「値」だということです。 さらに、関数を引数として受け取る、関数を戻り値として返す、あるいはその両方を行う関数は高階関数（Higher Order Function）と呼ばれます。 ファーストクラ