JavaScript

JavaScriptのコールバック関数と高階関数の仕組みを覚える

どうも、つよぽんです!

今回は、JavaScriptの「コールバック関数と高階関数」について解説をします。

JavaScriptのコールバック関数高階関数は、JavaScript学習者がよくつまづく概念となります。

しかし、「関数式」のときに学習した「関数は変数に代入できる」ということを理解していればそこまで難しい概念ではありません。

関数式については以下の記事で解説しています。

あわせて読みたい
JavaScriptの関数式で関数を作る【使う時の注意点も解説】どうも、つよぽんです! 今回は、JavaScriptの関数式について解説をします。 今回解説する「関数式」はJavaScri...

今回の記事は次のような方に向けて書きました。

想定読者
  • コールバック関数って何?
  • 高階関数って何?
  • コールバック関数・高階関数を使えるようになりたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptのコールバック関数と高階関数を理解するJavaScriptの中でも初心者にとって1つの壁である「コールバック関数」について学習します。「コールバック関数」を理解するためには「高階関数」という概念を理解する必要があります。コールバック関数は頻繁に出てくる書き方になるのでここでマスターしましょう。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptの関数式のおさらい
  2. JavaScriptの高階関数とは
  3. JavaScriptのコールバック関数とは

 

JavaScriptの関数式のおさらい

この章では、「関数式のおさらい」をします。

関数式の詳しい解説に関しては以下の記事を参考にしていただけたらと思います。

あわせて読みたい
JavaScriptの関数式で関数を作る【使う時の注意点も解説】どうも、つよぽんです! 今回は、JavaScriptの関数式について解説をします。 今回解説する「関数式」はJavaScri...

関数式とは

関数式を一言でいうと「関数を変数に代入した形式の書き方」のことです。

以下の画像は関数を「hello」変数に代入したものをあらわしています。

関数式のおさらい関数式のおさらい

引数と変数は実質同じことをしている

関数が変数に代入できることは「関数式」から学習しました。

ここでもう1歩先に進んで、関数の引数も考えてみましょう。

引数」の詳しい解説については以下の記事を参考にして頂けたらと思います。

あわせて読みたい
JavaScriptの引数の使い方【関数定義時・実行時の方法】どうも、つよぽんです! 今回は、JavaScriptの「引数」について解説をします。 今回の記事は次のような方に向けて書きま...

引数は関数を定義するときに「()」の中にセットすることが出来ます。

以下のサンプルコードでは「hello関数」に「(message)」という形式で、引数に「message」を受け取れるようにしています。

このとき、「引数message」は「変数message」と言いかえることもできます。

なぜなら上記のサンプルコードでは、hello関数内で「console.log(message)」のように、引数message変数としてつかっているからです。

このことから、関数式の「関数を変数に代入できる」というルールを応用して、「関数を引数に渡すことが出来る」というのが可能となります。

このことが理解できれば、次以降で解説する「高階関数」「コールバック関数」もほぼ理解したと言って良いでしょう。

JavaScriptの高階関数とは

この章では、「高階関数とは何か?」について解説します。

高階関数とは「関数を引数に受け取る関数」のことです。

以下の画像の緑枠内で定義されている関数(=koukai_func関数)が高階関数となります。

高階関数のサンプル高階関数のサンプル

緑枠内で定義されている関数である「koukai_func関数」には引数callbackがセットされています。

そして、「koukai_func関数」の中で実装されているコードを見ると、「callback();」と関数呼び出ししているのがわかります。

まさにこの形式は、関数式の「変数名();」で関数を実行するのと全く同じです。

このことから、「koukai_func関数」は引数に関数を受け取る関数ということになります。

そして、この章の始めのほうでも説明したとおり、「関数を引数に受け取る関数」のことを高階関数といいます。

上の画像のサンプルコードは以下のリンク先からも直接確認できます。

高階関数のサンプル1

JavaScriptのコールバック関数とは

この章では、「コールバック関数とは何か?」について解説します。

コールバック関数とは「引数として渡される関数」のことを言います。

以下の画像は高階関数である「hello関数」を実行したときのコードを表したものです。

コールバック関数のサンプルコールバック関数のサンプル

上のオレンジ枠内で「hello関数」を実行しており、実行時にhello関数の引数として関数を直接セットしています。

そして、引数に直接セットされた関数は、hello関数の「引数callback」に渡されます。

このとき「引数callback」の内容は関数であり、この章の始めの方でも説明した「引数として渡される関数」になるので、「引数callback」はコールバック関数ということになります。

上の画像のサンプルコードは以下のリンク先からも直接確認できます。

コールバック関数のサンプル1

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. 関数式のルールより、関数は変数に代入できる
  2. 関数の引数と変数は実質同じ役割を持つ(=「値を保持する」という役割)
  3. 変数に関数を代入できる」ということは、「引数に関数を渡せる」も成り立つ
  4. 「関数を引数に受け取る関数」のことを「高階関数」という
  5. 「高階関数実行時にセットされる関数」のことを「コールバック関数」という

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptのコールバック関数と高階関数を理解するJavaScriptの中でも初心者にとって1つの壁である「コールバック関数」について学習します。「コールバック関数」を理解するためには「高階関数」という概念を理解する必要があります。コールバック関数は頻繁に出てくる書き方になるのでここでマスターしましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です