JavaScriptコールバック関数の使用方法

おそらく、関数内で「コールバック」という単語を使用しているコードスニペットがいくつかあることをご存知でしょう。コールバックは、別の関数内で渡される特殊なタイプの関数です。

コールバックは、コードのブロックを実行するためにイベントハンドラー内でよく使用されます。このガイドでは、コールバック関数とは何か、およびそれらがどのように機能するかについて説明します。コードでコールバック関数を使用する方法を学ぶのに役立つコールバック関数の例を見ていきます。

コールバック関数とは何ですか？

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

コールバック関数は、それらが宣言されている関数内で実行されます。関数を実行すると、そのコールバック関数（指定されている場合）が実行されます。実行されると、コールバック関数はメイン関数への応答を返します。

JavaScriptでは、すべての関数がオブジェクトであるため、コールバック関数が機能します。これは、他のオブジェクトと同じようにそれらを操作できることを意味します。他の値の場合と同じように、関数を変数に割り当てたり、引数として渡すことができます。

簡単な例を使用して、コールバックがどのように機能するかを示しましょう。ビデオゲームのユーザー名をコンソールに出力し、その後にキャラクタータイプを出力する関数を作成します。関数を宣言することから始めましょう：

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

これは、コールバックを含む匿名のJavaScript関数です。匿名関数は名前のない関数です。これらは通常、上記の例のように、他の関数の内部に表示されます。

このコールバックは、コードの2番目のパラメーターです。この関数を実行すると、プレーヤーの名前がコンソールに出力されます。次に、callback（）関数の内容が実行されます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

それでは、この関数を使用してみましょう。

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

関数printName()を呼び出しました このコードでは。プレイヤーの名前として「バイオレット」を指定しました。コールバックとして文字タイプを出力する関数を指定しました。このコードを実行して、何が起こるか見てみましょう。

プレイヤー名：バイオレット

キャラクタータイプ：メイジ

printName()の内容 関数が実行され、続いてコールバック関数の内容が実行されます。コールバック関数は、パラメーターとして渡すときに宣言する必要はありません。コードをリファクタリングして、コールバック関数が独自のものになるようにすることができます。

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

printName("Violet", printCharacterType())

このコードは同じ応答を返します。 printCharacterType()という関数を作成しました プレーヤーのキャラクタータイプをコンソールに出力します。この関数は、printName()を実行すると実行されます。 、コールバックとして指定されているため。

イベントでのコールバックの使用

コールバックは通常、JavaScriptイベントで使用されます。

イベントは、ユーザーがボタンをクリックするなどのアクションをリッスンし、そのアクションが実行されるとコードのブロックを実行します。ユーザーが画像にカーソルを合わせたときに実行されるコールバックを作成しましょう。 HTMLファイルを開き、次のコードをタグ内に貼り付けます。

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


これは、ユーザーがクリックできるWebページ上の画像を定義します。次に、次のJavaScriptコードを<script>で囲みます 鬼ごっこ：

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

image.addEventListener("mouseover", function() {
	console.log("The user has moused over the image.");
});

このコードは、IDが「image」の要素を選択します。次に、addEventListenerメソッドを使用して、ユーザーが画像に「マウスオーバー」（ホバー）したときにリッスンします。ユーザーがカーソルで画像にカーソルを合わせると、コンソールにメッセージが出力されます。

ユーザーが画像にマウスを合わせました。

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

Webリクエストは通常​​、同期して実行する必要があります。これは、ほとんどのWebアプリケーションが、ページの残りの部分をロードする前に特定のデータを取得する必要があるためです。

テスト目的で使用できるダミーデータを含むAPIであるJSONプレースホルダーAPIにリクエストを送信するプログラムを作成しましょう。プログラムは、コンソールへの応答を出力する必要があります。まず、リクエストを行う関数を宣言します。

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

この関数は、fetch（）APIを使用してWebリクエストを作成します。応答は変数「query」に割り当てられます。コールバック関数の引数として「query」を渡すことにより、このWebリクエストの結果をコールバックに返します。それでは、関数を呼び出して、コンソールへの応答を出力してみましょう。

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

このコードは、makeRequestメソッドにJSONプレースホルダー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コールバックを使用する準備が整いました。