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

JavaScriptのコールバック関数とは？基本の仕組みと使い方を実例で解説

JavaScriptにおいて、コールバック関数（callback function）とは、別の関数に引数として渡される関数のことです。引数として受け取った側の関数は、必要なタイミングでその関数を「呼び戻す（call back）」ため、この名前が付けられています。

JavaScriptでは処理が上から順に実行されますが、時間のかかる処理（タイマー、通信など）を待っている間に他の処理を進めたい場合があります。こうした非同期処理を実現する基本的な手法が、コールバック関数です。

コールバック関数の基本例

以下のコードは、setTimeoutを使って5秒後にコールバック関数を呼び出すシンプルな例です。実際にブラウザで実行して、表示される順序を確認してみてください。

<html>
   <head>
      <script>
         var callback = function(myCallback) {
            setTimeout(function() {
               myCallback();
            }, 5000);
         };
         
         document.write("First is displayed");
         document.write("<br>Second is displayed");
         
         callback(function() {
            document.write("This is Callback function");
         });
         document.write("<br>Last is displayed");
      </script>
   </head>
</html>

実行結果と解説

このコードを実行すると、画面には次の順序でテキストが表示されます。

  1. 「First is displayed」
  2. 「Second is displayed」
  3. 「Last is displayed」
  4. 5秒後に「This is Callback function」

ポイントは、callback() の呼び出し後に書かれた「Last is displayed」が、コールバックの中身より先に表示されることです。これは、setTimeoutによる5秒間の待機中もスクリプトの残りの処理が先に実行され、指定時間が経過した時点で初めてコールバック関数が呼び出されるためです。

このように、コールバック関数を使うことで、「ある処理が完了した後に実行したい処理」を柔軟に定義できます。イベント処理やAPI通信など、JavaScriptの非同期処理の基礎となる重要な概念なので、しっかり理解しておきましょう。

  1. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2