コールバック関数
こんにちはkazutoです。今回は、コールバック関数について解説していきます。
コールバック関数とは
コールバック関数とは、関数の中に関数を引数として呼び出し先に渡し、呼び出し先で実行する関数です。
言葉だけで説明されてもわからないと思うので、図解化してみました。
上記の画像をみて頂くと、コールバック関数の概要をなんとなく掴み事ができると思います。コールバック関数は、慣れない内は、処理が行われる順番が掴みづらいです。
なので実際に、ご自身でコールバック関数を使ってみてください。
コールバック関数の概念の解説が終わった所で、実際にコールバックを用いたプログラムを実装してみましょう。構文が下記の通りです。
function 関数名( コールバック関数(関数B) ) {
//コールバック関数の呼び出し
コールバック関数();
}
function 関数B (){
//処理
}
//関数呼び出し
関数名(コールバック関数)構文を確認した所で、実際にコードにしてみましょう。
//コールバック関数を呼び出す関数
function A (call){
call()
}
//コールバック関数
function B (){
console.log("コールバック関数です");
}
//関数呼び出し
A(B)上記は先ほどの画像を元にし、コードに書き換えてみました。冷静にコードを読んで見ると、プログラムの流れがわかると思います。このように、一度、図解化してからコードを見る事で、複雑な概念も頭の中にスゥーと入ってくるはずです。
難しい概念を図解化して構造的に捉えるのは、大変ですが、難しい概念こそ図解化して構造化してみる事はおすすめです。
コールバックのよくある使い方[記述編]
コールバック関数について解説しましたが、実はコールバック関数に色々とパターンがあります。少し応用的な内容になってしまいますが、覚えていきましょう。
変数に格納してからコールバック関数を呼び出す場合
function A (call){
call()
}
//変数に関数を格納した場合
const B =function (){
console.log("コールバック関数です");
}
//アロー関数の場合
const B = ()=>console.log("コールバック関数です")
A(B)上記は、関数を変数に格納してから、コールバック関数を呼び出す例です。何度も、コールバック関数を呼び出す時になどに便利な記述方法です。
関数の引数に関数を記述する場合
function A (call){
call()
}
//関数の引数に関数を記述する場合
A(function B (){
console.log("コールバック関数です");
})
//アロー関数の場合
A(()=>console.log("コールバック関数です"))上記は、関数の中の引数に直接、コールバック関数を記述してしまう方法です。
- 変数に格納してからコールバック関数を呼び出す
- 関数を定義してから、関数名を引数としてコールバック関数を呼び出す
と比較して、関数を定義する必要がなく、呼び出し元の引数に直接、記述できるという点は、記述量が減り「楽だな」と個人的に感じます。しかし、記述量が減る反面、コールバック関数に慣れていない場合ですと、少し混乱してしまうと思います。
なので、慣れない内は、
- 変数に格納してからコールバック関数を呼び出す
- 関数を定義してから、関数名を引数としてコールバック関数を呼び出す
のどちらかでコールバックを使う事をおすすめします。
コールバックのよくある使い方[メソッド編]
最後にJavascriptに、元から定義されているメソッドをいくつか紹介し、その後、コールバック関数を使った非同期処理について解説します。
※メソッドについて詳しく解説しません。あくまでもコールバック関数についての解説の一環として取り上げた程度なので。
forEachメソッド
配列内の要素を全て取り出す。
const array=["a","b","c"]
array.forEach(element => console.log(element));
setTimeoutメソッド
一定時間後にコールバック関数を実行する。
function numCount(){
setTimeout(function(num){
num++;
console.log(num);
setTimeout(function(num){
num++;
console.log(num);
setTimeout(function(num){
num++;
console.log(num);
setTimeout(function(num){
num++;
console.log(num);
setTimeout(function(num){
num++;
console.log(num);
},1000,num)
},1000,num)
},1000,num)
},1000,num)
},1000,0)
}
numCount()
上記は、非同期処理を行っており、コールバック関数の中にコールバック関数を繋げています。このような記述をコールバック地獄といいます。非同期処理については深掘りはしませんが、本来の非同期処理では、あまり上記のような記述方法は取らないみたいです(好ましくないです)。
以上でコールバック関数の解説は終わります。
まとめ：コールバック関数
今回はコールバック関数について解説していきました。
- アロー関数
- 無名関数
- コールバック関数
など色々と関数の種類が多くて覚えるのは大変だとは思います。しかJavascriptでは、プログラムを組んでいく際に、とても必要な知識なってきますので、徐々に覚えていきましょう。
以上、kazutoでした。