こんにちは。ひげぶろです。
今回はJavascript、コールバック関数の仕組みや使い方について詳しく書いていきたいと思います。
こういった悩みを解決します。
なるべく簡単なコードで説明しますので、最後までお読みいただければ幸いです。
ひげぶろ- コールバック関数の仕組み
- 無名関数での定義方法
- 定義方法それぞれのメリット
- 簡単な例文を用いてご説明しています
Javascriptのコールバック関数について
まずコールバック関数とはどういうものか、段階を追ってご説明します。
通常の関数の復習
コールバック関数の意味を文章で説明しますと、
コールバック関数は、定義されてある関数の引数に渡された関数のことを指します。
これだけですとちょっとわかりにくいので、まずは通常の関数の挙動を見ていきましょう。
以下、通常の関数の定義と実行です。
//'おはようございます’をコンソールに出力する関数
function test(){
console.log('おはようございます。');
}
//関数の実行
test(); //おはようございますが出力される上記のコード、function 〇〇(){ console.log(‘おはようございます’); }の〇〇の部分に関数名が入ります。
関数名は任意で命名していただいてで大丈夫す。今回は「test」という関数名にしました。
そしてtest(); と関数名とカッコを付けて記述することで、その名前が付いた関数が実行されます。
実行される内容は今回はconsole.log(‘おはようございます’);という内容でしたので、
コンソールに「おはようございます」と出力されます。
以上が関数の定義と実行の基本となります。
コールバック関数の記載箇所
コールバック関数は、定義されている関数の引数に渡された関数のことを指します。とご説明しました。
先程の関数の引数はどうなっていましたでしょうか？
//'おはようございます’をコンソールに出力する関数
function test(){
console.log('おはようございます。');
}
//関数の実行
test(); //おはようございますが出力される引数はカッコ内に入ってきますので、上記コードの場合は中身が空ですね。つまり引数は無い状態です。
このカッコ内 = 引数に、別に定義した関数を入れます。
そしてここで疑問に思う人もいるのではないでしょうか。なぜそんなことする必要があるの？と
その理由は後述しますので、まずはコールバック関数の定義方法についてみていきましょう。
コールバック関数の定義詳細
目的：上記の 「おはようございます。」と出力される関数に、さらに「佐藤さん」と名前が付く関数を加え
「おはようございます。佐藤さん」と出力させる
// ①付け加える関数（コールバック関数）をどのように使用するかを設定。
function test(callback){
console.log('おはようございます。' + callback());
}
// ②'佐藤さん’を返す関数を定義
function name(){
return '佐藤さん';
}
// ③関数の実行（引数には新しく定義したnameというコールバック関数が付与）
test(name); // おはようございます佐藤さん とコンソールに出力される恐らく、最初のうちはコールバック関数の定義の順番とかに意識が向くかもしれません。
私は最初、定義する順番がよく分からず頭に入ってこなかったです。
結論、定義の順番は気にしなくて大丈夫です。
説明のため、便宜上番号を付けていますが上記コードの①、②、③の順番が入れ替わっても作動します。
影響範囲は画像の通りです。
仕組みとしては、11行目、name関数で定義したものが、17行目、test関数の引数に入ります。
その後、画像の5行目と6行目の引数にあるcallbackへと渡ります。
６行目のcallback()でコールバック関数が実行され、「佐藤さん」が出力される状態になります。
17行目ではtest(name);ですので、5行目に定義されているtest関数では「おはようございます。＋コールバック関数」でコンソールで出力してね〜という指示内容になっています。
先程、コールバック関数が実行されると「佐藤さん」 と出力されるとご説明しました。
こちらの結果内容が+され、「おはようございます。佐藤さん」という出力結果となります。
無名関数を使用した例
ちなみに別の書き方として下記の方法でも全く同じ結果になります。
function test(callback){
console.log('おはようございます。' + callback());
}
test(function(){
return '佐藤さん';
});
これはtest関数の引数に、無名関数というものが入ることでコールバック関数として機能します。
1つ目の方法との違いは、name関数をわざわざ定義せずとも、test関数の引数にそのまま関数を入れることが可能です。
name関数のようにわざわざ定義せず、名前がない関数ですので、この関数を無名関数といいます。
ひげぶろ無名関数を使用した例との比較①
通常の関数を使用した例と、無名関数をコールバック関数に使用した例をもう1度見てみましょう。
①通常の関数を使用した例
function test(callback){
console.log('おはようございます。' + callback());
}
function name(){
return '佐藤さん';
}
test(name); ②無名関数を使用した例
function test(callback){
console.log('おはようございます。' + callback());
}
test(function(){
return '佐藤さん';
});
上記2つとも同じ結果が出力されます。
ただ、結果は同じですが結果までの過程が異なります。このそれぞれの過程の特性を利用して使い分けます。
使い分ける理由としては、サイト設計でコード管理を考える際に管理のしやすさを考えて使い分けます。
無名関数を使用した例との比較②
例えば出力結果を「おはようございます。佐藤さん」以外に、「佐藤さん」の部分を「今日も天気が良いですね」や「今日は曇りですね」に変更し、両方とも出力したいとします。
複数使用したい場合どうなるか、①と②の両方のパターンで見ていきましょう。
①通常の関数を使用した例
function test(callback){
console.log('おはようございます。' + callback());
}
function name(){
return '今日も天気が良いですね';
}
//新しく追加した関数
function name2(){
return '今日は曇りですね';
}
test(name);//「おはようございます。今日も天気が良いですね」が出力
//新しく追加した関数の出力
test(name2);//「おはようございます。今日は曇りですね」が出力
②無名関数を使用した例
function test(callback){
console.log('おはようございます。' + callback());
}
test(function(){
return '今日も天気が良いですね';
})
test(function(){
return '今日は曇りですね';
})それぞれのメリット
①の例は、②と比べてコード量が多くなりましたが、メリットとしては関数名が明確に分けられます。
また、別の場所で関数を使用する時にもこの関数名で使用すれば良いので、使い回すことがができます。
②の例は、①と比べてコード量が少なく済みます。無名関数の場合は処理だけを記述するので、その場だけで使用している処理という表現にもなることがメリットです。
ひげぶろコールバック関数のまとめ
コールバック関数の仕組みや使い方についてご紹介しました。
コールバック関数の恩恵は、設計の複雑さによって比例するのではじめのうちは概要が掴みづらいかもしれません。
今回ご紹介したシンプルな例でも、実際に手を動かしていくと理解が深まるので是非ご自身でも書いてみてください。
終わりに
Javascript学習は色々方法があると思いますが、私はその中でもUdemyをオススメしています。
参考書等のテキストで学習することも勿論大切ですが、見る・聞く・コードを書いて覚える、という体系的に学べる一連の流れは参考書とはまた違った恩恵を実感できると思います。
他にUdemyをオススメする理由は、
・受講内容が最新の技術にアップデートさているものもあるので、情報の新鮮度が参考書よりも高いところ
・動画内で分からないことがあれば質問できる
・セール時は¥1200~と安価に購入できる機会も多くあること
以上のことが大きな魅力と感じるからです。
私が実際に受講したJavascriptのコースを下記に貼っておきますので良かったら覗いてみてください。
全体的に評価が高く、皆さん満足されているみたいです。勿論私も受講して良かったと感じています。
Javascriptの初学者及びフロントエンドを目指している方にオススメです。
ご一読いただきましてありがとうございました。
