JavaScriptコールバック関数とは?基本から実践的な使い方まで徹底解説

コードの中で「callback(コールバック)」という言葉を目にしたことがある方は多いのではないでしょうか。コールバック関数とは、別の関数に引数として渡される特別な種類の関数のことです。

コールバックはイベントハンドラの中でよく使われ、特定のコードブロックを実行するために活用されます。この記事では、コールバック関数とは何か、どのように動作するのかを解説し、実際のコード例を通して使い方を学んでいきます。

コールバック関数とは?

コールバック関数とは、別の関数にパラメータ(引数)として渡される関数のことです。

コールバック関数は、それが渡された関数の中で実行されます。関数を実行するとき、コールバック関数が指定されていれば、それも一緒に実行されます。実行が完了すると、コールバック関数はメインの関数に結果を返します。

コールバック関数が機能するのは、JavaScriptではすべての関数がオブジェクトとして扱われるためです。つまり、他のオブジェクトと同じように操作できます。関数を変数に代入したり、他の値と同じように引数として渡したりすることが可能です。

簡単な例を使って、コールバックの仕組みを見てみましょう。プレイヤーの名前とキャラクターの種類をコンソールに出力する関数を作成します。まずは関数を宣言します。

function printName(name, callback) {
  console.log(`Player Name: ${name}`);
  callback();
}

これはコールバックを含む無名関数(匿名関数)の例です。無名関数とは名前を持たない関数のことで、通常は上の例のように他の関数の中に記述されます。

このコードでは、コールバックは2番目のパラメータとして指定されています。この関数が実行されると、まずプレイヤーの名前がコンソールに出力され、その後、callback()関数の内容が実行されます。

次に、この関数を実際に使ってみましょう。

printName("Violet", function() {
  console.log("Character Type: Mage");
});

このコードではprintName()関数を呼び出し、プレイヤー名として「Violet」を、キャラクターの種類を出力する関数をコールバックとして指定しています。実行結果は以下の通りです。

Player Name: Violet
Character Type: Mage

まずprintName()関数の内容が実行され、その後にコールバック関数の内容が実行されます。なお、コールバック関数は引数として渡す際にその場で定義する必要はありません。コールバック関数を独立させて、以下のようにリファクタリングすることもできます。

function printCharacterType() {
  console.log("Character Type: Mage");
}

printName("Violet", printCharacterType);

このコードも同じ結果を返します。プレイヤーのキャラクターの種類をコンソールに出力するprintCharacterType()関数を作成し、コールバックとして指定しています。ポイントは、関数名の後ろに括弧()を付けずに関数そのものを渡すことです。括弧を付けると関数がその場で実行されてしまい、コールバックとして正しく動作しなくなります。

イベント処理でのコールバックの使い方

コールバックは、JavaScriptのイベント処理で特によく使われます。

イベントは、ユーザーがボタンをクリックするなどのアクションを監視し、そのアクションが発生したときにコードブロックを実行します。ここでは、ユーザーが画像にマウスオーバーしたときに実行されるコールバックを作成してみましょう。HTMLファイルを開き、<body>タグ内に以下のコードを貼り付けてください。

<img src="https://careerkarma.com/favicon.ico" id="image" />

これで、Webページ上に画像が定義されました。次に、以下のJavaScriptコードを<script>タグで囲んで記述します。

var image = document.querySelector("#image");

image.addEventListener("mouseover", function() {
  console.log("ユーザーが画像にマウスオーバーしました。");
});

このコードは、IDが「image」の要素を選択し、addEventListenerメソッドを使って、ユーザーが画像にマウスオーバーした瞬間を監視します。ユーザーがカーソルを画像の上に移動すると、コンソールに次のメッセージが出力されます。

ユーザーが画像にマウスオーバーしました。

Webリクエストでのコールバックの使い方

Webリクエストは通常、非同期で実行されます。ほとんどのWebアプリケーションでは、ページの表示を止めることなくバックグラウンドでデータを取得し、取得が完了したタイミングで必要な処理を実行する必要があるためです。コールバック関数は、このような非同期処理の完了時に実行する処理を指定するのに役立ちます。

ここでは、テスト用のダミーデータを提供するJSON Placeholder APIにリクエストを送信するプログラムを作成し、レスポンスをコンソールに出力してみましょう。まず、リクエストを実行する関数を宣言します。

async function makeRequest(url, callback) {
  const query = await fetch(url).then(res => res.json());
  callback(query);
}

この関数はfetch() APIを使ってWebリクエストを実行します。レスポンスは変数「query」に代入され、コールバック関数の引数として渡されることで、リクエストの結果がコールバックに引き渡されます。次に、関数を呼び出してレスポンスをコンソールに出力してみましょう。

makeRequest("https://jsonplaceholder.typicode.com/posts/1", function(data) {
  console.log(data);
});

このコードは、makeRequestメソッドに対してJSON Placeholder APIへのリクエストを指示します。コールバック関数は、リクエストから返されたデータをコンソールに出力します。

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto."
}

これで、コードがWebリクエストを実行し、そのレスポンスをコンソールに出力できました。

まとめ(とチャレンジ)

コールバックを使うと、関数を別の関数のパラメータとして渡すことができます。イベントハンドラ内でイベント発生時にコードを実行したり、Webリクエストの結果を処理したりする際に広く使われています。

最後にチャレンジ問題です。Webページ上のボタンが押されたときに実行されるコールバック関数を書いてみてください。すでにできたという方は、アイテムのリストを並べ替え、コールバック関数を使って各アイテムをコンソールに出力する関数に挑戦してみましょう。

これで、非同期プログラミングにおいてJavaScriptのコールバックをプロのように使いこなす準備が整いました!

Javaで配列を初期化する方法：初心者向けステップバイステップガイド

Javaラムダ式入門：基本から実践まで徹底解説

JavaScriptで関数をコールバックとして渡す方法
JavaScriptで関数をコールバックとして渡すJavaScriptでは、関数は第一級オブジェクト（ファーストクラスオブジェクト）として扱われるため、他の値と同じように変数に代入したり、引数として別の関数に渡したりすることができます。このように引数として渡され、後から呼び出される関数をコールバック関数と呼びます。コールバックを活用することで、処理の柔軟性が高まり、再利用可能なコードを書くことができます。以下は、add2() 関数を multiply9() 関数のコールバックとして渡すサンプルコードです。コード例<!DOCTYPE html> <html lang="
Excelのデータベース関数とは？12種類の使い方を実例付きでわかりやすく解説
この記事では、Excelのデータベース関数の使い方を詳しく解説します。Excelには12種類のデータベース関数が用意されており、それぞれの適用方法を一つずつ紹介していきます。まずは記事全体の概要を以下の画像でご確認ください。記事を最後まで読めば、すべての関数の使い方を習得できます。練習用ワークブックは、下のダウンロードボタンから入手できます。 Excelのデータベース関数の基礎知識 Excelのデータベース関数を使うと、特定のデータベース（リスト）に対して合計、積、平均などの基本的な計算を簡単に実行できます。データベース関数は全部で12種類あり、DSUM、DAVERAGE、DCOUNT、D