【JavaScript】コールバック関数の基本的な流れを理解する（動画解説付き）

どうも、つよぽん(@tsuyopon_xyz)です！

今回は、JavaScript初心者がつまづきがちな「コールバック関数」の基本中の基本の流れを動画も使って解説していきます。

JavaScriptのコールバック関数の理解は本当に重要で、JavaScript初心者がハマるもう1つの関門である「非同期処理」でもコールバック関数を使うことになるので、

コールバック関数は必須で理解する必要があるものとなります。

 

今回の記事は、特に次のような人の助けになればと思い作成しました。

上記のうち、1つでも当てはまる場合は、この記事で共有している解説動画も使って、コールバック関数の理解度を深めていただけたらと思います。

解説動画

大前提として「関数」の理解が必要

JavaScriptで関数を定義する方法は、大きく分けると次の2つがあります。

1. 関数宣言
2. 関数式

さらに細かく言うと、「関数式」で関数を定義するときは、「function文」での実装と、「アロー関数」での実装がありますが、

今回は「コールバック関数」の解説となるので、「関数宣言」「関数式」「アロー関数」の詳細は割愛します。

 

「関数宣言」「関数式」「アロー関数」について詳しく知りたい場合は、対応するMDNの記事を以下に貼っておくのでそちらを参考にしていただけたらと思います。

動画で「関数」について学習したい場合は、僕が別で運営している「JavaScript関数ドリル」の特典の1つで「関数の解説動画」をプレゼントしているので、そちらを参考にしていただけたらと思います。

関数式の理解がコールバック関数の理解を助ける

関数を変数にセットしたものが「関数式」

コールバック関数の理解をするには、「関数式の理解」が非常に重要です。

関数式を大雑把に説明すると、「関数を変数にセットしたもの」となります。

JavaScriptでは関数も値の1つとして考えられるため、値を保持する変数に関数をセットすることができるのです。

そして変数にセットされた関数を実行するときは、「変数名()」の形式で関数を実行します。

変数と引数の役割は同じ

「変数の役割」は値を保持することでした。

それでは関数を定義するときに使う「引数の役割」は一体何でしょうか？

「引数の役割」も値を保持することです。

もう少し正確な表現で言うならば「関数を実行時にセットされた値を、引数に一時的に保持する」というのが、引数の役割です。

変数と引数はそれぞれ「値を保持する」という役割が共通しています。

つまり、変数にセットされた関数(=関数式)は「変数名()」で実行するのと同じ感じで、引数にセットされた関数(=コールバック関数)は「引数名()」で実行できるというこです。

引数にセットされた関数 = コールバック関数

1つ前の「変数と引数の役割は同じ」の最後でも書いたように、「コールバック関数とは、引数にセットされた関数」と認識しても問題ないでしょう。

改めて、関数式とコールバック関数の関係を簡単にまとめると

• 関数式・・・変数にセットした関数
• コールバック関数・・・引数にセットした関数

 

といった感じになります。

まとめ

今回の話のまとめです。

追伸

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか？

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

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

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

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

無料特典を受け取る