【イラスト付き】JavaScriptコールバック関数【丁寧に解説】
はじめに
皆さんこんにちは。
今回はJavaScriptのコールバック関数についてご紹介します。
コールバック関数は頻出であり、これがなければコーディングは不可能と言えるほど多用します。そしてこのコールバック関数は初学者がつまづきやすい言語仕様の代表格でもあります。
こんな人にオススメ
- 初めてJavaScriptに触れる方
- JavaScriptのコールバック関数の文法を把握したい
- コールバック関数のイメージから具体的な利用例まで知りたい
初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。
😋 コールバック関数はJavaScriptの必修項目です♪
コールバック関数とは
まずポイントをチェック
- 引数として渡し、内部で実行される関数をコールバック関数という
- 実行タイミングは受け取った側が決める
- 組み込み関数でよく利用する
コールバック関数のイメージと仕組みについて説明します。コールバック関数は、関数の引数として渡す関数です。このように２つの関数「受け取る側の関数」と「渡す関数」が出てきますので整理します。
受け取る側の関数(渡す関数);
受け取る側の関数
受け取る側の関数は、引数に関数をもらい処理の中で利用します。受け取る側では全体の処理は定義されており、特定のタイミングで行う具体的な処理を引数でもらいます。
| 🍕 例えば、「友達と遊ぶ」ことを処理として実現する場合、具体的な「遊ぶ」の内容がコールバック関数と言えます。 |
|---|
| 🍕 友達と遊ぶプロセスを「誘う」「日付を決める」「遊ぶ」「写真を共有する」の４つのステップとします。この全体の流れは受け取る側の関数で定義しておきます。全体の流れは固定的であるため処理を共通化できます。 |
|---|
| 🍕 「遊ぶ」の具体的な内容はその時々によって「ショッピング」「ランチ」「映画」など様々です。この「遊ぶ」の内容をコールバック関数として「友達と遊ぶ」という処理に適用します。 |
|---|
友達と遊ぶ関数(ショッピングをする関数);
友達と遊ぶ関数(ランチをする関数);
友達と遊ぶ関数(映画を観に行く関数);
このように、受け取る側の関数は全体の流れを共通化する存在です。これにより処理を共通化しつつ、様々な処理パターンに対応することができます。
渡す関数
渡す関数は、通常の関数であり特別な仕様はありません。渡す関数は具体的な処理内容を持っており、適切なタイミングで実行されるのを待ちます。
| 🍕 先程の例では、具体的な「遊び」は友達と予定を立てた後に実行されます。実行タイミングは受け取る側の関数にお任せになります。 |
|---|
このように、コールバック関数は具体的な処理内容を表す存在です。受け取る側の関数の要求に合わせたコールバック関数を渡します。
| 🍕 先程の例では、受け取る側の関数は具体的な「遊ぶ」の内容を要求しています。そこに「歯磨きをする」など「遊ぶ」とは関係ない内容を渡してはいけません。 |
|---|
友達と遊ぶ関数(歯磨きをする関数); // 要求と違うコールバック関数はエラーになる
このように、外から渡す具体的な処理のことをコールバック関数と呼びます。
「受け取る側の関数（共通処理）」と「渡す関数（個別の処理）」を分けて定義することで、再利用性の高いコードが書けます。
😋 コールバック関数は外から渡す具体的な処理内容です♪
コールバック関数の基本構文
まずポイントをチェック
- 受け取る側の関数：引数に関数を受け取る前提で作成する
- 渡す関数：通常の関数だが、受け取る側の仕様を満たすこと
- コールバック関数を渡す方法は２種類
- 関数名を指定
- 関数を直接定義
受け取る側の関数は、引数に関数を受け取り処理内部で実行するように実装します。
受け取る側の関数の書き方
- 引数で受け取った関数を内部で実行する
- 必要なコールバック関数の仕様は明確に指定する
- 引数の数や型
- 戻り値の有無や型
- コメントやドキュメントに記載する
// 引数あり戻り値なしのコールバック関数を渡すこと
const 受け取る側の関数 = (コールバック関数) => {
前後処理
コールバック関数(引数);
前後処理
};
渡す関数は通常の関数ですが、受け取る側の要求を満たす必要があります。
渡す関数の書き方
- 受け取る側が要求する仕様に沿って作成
- 引数や戻り値、処理内容など
| 🍕 例えば、受け取る側が「計算結果を数値で返す関数」を要求する場合、それに従います。 |
|---|
受け取る側の関数にコールバック関数を渡して実行する方法は、２種類あります。定義済みの関数名を指定する方法と、受け取る側の関数の引数に直接定義する方法です。
定義済みの関数名を指定する書き方
- コールバック関数とする関数をあらかじめ宣言
- 受け取る関数の引数に関数名を指定
const 関数名 = ()=>{処理}; // 渡す関数の宣言
受け取る側の関数(関数名);
引数に直接定義する書き方
- 渡す関数を直接引数に記述
- 直接記述する場合は関数名は不要
受け取る側の関数((引数)=>{処理内容});
// 受け取る側の関数を定義
const hangout = (plan) => {
console.log('誘う');
console.log('日付を決める');
plan();
console.log('写真を共有');
};
// 渡す関数を定義
const shopping = () => console.log('ショッピングをする');
const eatLunch = () => console.log('ランチを食べる');
// コールバック関数を渡して実行
hangout(shopping);
hangout(eatLunch);
hangout(() => console.log('映画を観る'));
😋 コールバック関数は仕様を満たすように作ります♪
コールバック関数の利用例
まずポイントをチェック
- map：配列の加工方法をコールバック関数で渡す
- setInterval：定期実行したい処理をコールバック関数で渡す
- addEventListener：イベント発生時の処理をコールバック関数で渡す
利用例として、コールバック関数利用する組み込み関数をいくつかご紹介します。
mapメソッド
mapは配列が持つメソッドで、配列の各要素の加工方法をコールバック関数として引数に渡します。mapのコールバック関数の仕様は引数と戻り値が必要であり、仕様に沿ったコールバック関数を渡します。
// 配列の加工方法をコールバック数で渡す
配列.map((item) => item + 1);
setIntervalメソッド
setIntervalは定期実行のための組み込み関数です。引数には実行間隔と定期実行したい処理を渡します。この定期実行したい処理がコールバック関数です。setIntervalのコールバック関数は引数も戻り値も不要なので、どちらもなしの関数を渡します。
// 定期実行したい処理をコールバック関数で渡す
setInterval(() => console.log('繰り返し'), 1000);
addEventListenerメソッド
addEventListenerは要素オブジェクト（画面上のボタンなど）が持つメソッドで、何らかの操作時に実行したい処理をコールバック関数として渡します。
| 🍕 例えば、ボタンがクリックされた際にメッセージを出したい場合「メッセージを出す処理」をコールバック関数として渡します。 |
|---|
addEventListenerのコールバック関数は引数にeventオブジェクトが渡されるので、引数ありで戻り値なしの関数を渡します。
// ボタンクリック時の処理をコールバック関数で渡す
ボタン.addEventListener('click', (event) => console.log('クリックされた'));
😋 組み込み関数にコールバック関数を渡して使います♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
コールバック関数の仕組みとメソッド例について確認をしていただきました。コールバック関数は非常に多くの場面で利用されており必須の知識です。とはいえ最初の内は戸惑いやすいので、少しずつ身につけましょう。
😋 これからもプログラミング学習頑張りましょう♪
参考リンク集（MDN Web Docs のリンク）
Callback function：https://developer.mozilla.org/ja/docs/Glossary/Callback_function
setInterval()：https://developer.mozilla.org/ja/docs/Web/API/setInterval
Array.prototype.map()：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
EventTarget.addEventListener()：https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
Discussion