コールバック関数とは？
コールバック関数とは、JavaScriptにおいて非同期処理を行うための重要な概念の1つです。
非同期処理は、処理の完了を待たずに次の処理を実行することを可能にするため、プログラムのパフォーマンスを向上させることができます。
しかし、非同期処理においては、処理が完了する前に次の処理を行うため、結果がまだ得られていない可能性があります。
このような場合、コールバック関数を使用することで、処理が完了した後に呼び出される関数を指定することができます。
サンプル▼（プロンプトが開きます）
コールバック関数の例
例えば、ファイルの読み込みや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
これは、JSONデータのフェイクAPIを提供するサービスです。/postsエンドポイントを使用することで、投稿の一覧を取得することができます。例えば、以下のURLを使用することで、1番目の投稿の情報を取得することができます。
GitHub API
これは、GitHubのAPIを提供するサービスです。リポジトリ、コミット、プルリクエストなど、GitHub上のあらゆるデータを取得することができます。例えば、以下のURLを使用することで、GitHub上の公開リポジトリの一覧を取得することができます。
OpenWeatherMap API
これは、天気情報のAPIを提供するサービスです。国や都市のコードを指定することで、現在の天気情報や予報を取得することができます。例えば、以下のURLを使用することで、東京の現在の天気情報を取得することができます。
https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid={APIキー}
まとめ
このように、コールバック関数を使用することで、非同期処理を行い、データの取得が完了した後に必要な処理を実行することができます。
