【JavaScript】コールバック関数とは？基本について

JavaScript(ジャバスクリプト)

2023.05.06

コールバック関数とは？
コールバック関数の例
データを非同期的に取得する
JSONデータを含むサンプルのURL
まとめ

コールバック関数とは？

コールバック関数とは、JavaScriptにおいて非同期処理を行うための重要な概念の1つです。

非同期処理は、処理の完了を待たずに次の処理を実行することを可能にするため、プログラムのパフォーマンスを向上させることができます。

しかし、非同期処理においては、処理が完了する前に次の処理を行うため、結果がまだ得られていない可能性があります。

このような場合、コールバック関数を使用することで、処理が完了した後に呼び出される関数を指定することができます。

サンプル▼（プロンプトが開きます）

https://js.eguweb.tech/2005/

コールバック関数の例

例えば、ファイルの読み込みやAPIの呼び出しを行う場合、処理が完了する前に次の処理を実行することができます。

例えば、以下のようなコードがあるとします。

function fetchData(url) {
  const request = new XMLHttpRequest();
  request.open('GET', url);
  request.send();
  return request.responseText;
}

この関数は、指定されたURLからデータを取得し、そのデータを返します。

しかし、この関数は同期的に実行されるため、データが取得されるまで次の処理が実行されません。つまり、大量のデータを取得する場合、プログラムがフリーズしてしまう可能性があります。

そこで、非同期処理を行うために、コールバック関数を使用します。

以下のように、fetchData関数の最後の引数にコールバック関数を渡します。

function fetchData(url, callback) {
  const request = new XMLHttpRequest();
  request.open('GET', url);
  request.onload = function() {
    callback(request.responseText);
  };
  request.send();
}

このコードでは、XMLHttpRequestオブジェクトのonloadイベントを使用して、データの取得が完了した後にコールバック関数を呼び出しています。コールバック関数は、取得したデータを引数として受け取り、必要な処理を実行することができます。

[rml_read_more]

例えば、以下のように、取得したデータをコンソールに表示するコールバック関数を定義することができます。

function displayData(data) {
  console.log(data);
}

データを非同期的に取得する

fetchData関数を以下のように呼び出すことで、データを非同期的に取得し、コールバック関数でデータを処理することができます。

fetchData('https://example.com/data.json', displayData);

JSONデータを含むサンプルのURL

JSONPlaceholder

JSONPlaceholder - Free Fake REST API

これは、JSONデータのフェイクAPIを提供するサービスです。/postsエンドポイントを使用することで、投稿の一覧を取得することができます。例えば、以下のURLを使用することで、1番目の投稿の情報を取得することができます。

https://jsonplaceholder.typicode.com/posts/1

GitHub API

GitHub REST API documentation - GitHub Docs

To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API.

これは、GitHubのAPIを提供するサービスです。リポジトリ、コミット、プルリクエストなど、GitHub上のあらゆるデータを取得することができます。例えば、以下のURLを使用することで、GitHub上の公開リポジトリの一覧を取得することができます。

https://api.github.com/repositories

OpenWeatherMap API

Weather API - OpenWeatherMap

Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day ...

これは、天気情報のAPIを提供するサービスです。国や都市のコードを指定することで、現在の天気情報や予報を取得することができます。例えば、以下のURLを使用することで、東京の現在の天気情報を取得することができます。

https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid={APIキー}

まとめ

このように、コールバック関数を使用することで、非同期処理を行い、データの取得が完了した後に必要な処理を実行することができます。