Work illustrations by Storyset
こんにちは。ひげぶろです。
今回はJavascript、コールバック関数を定義する上での考え方や、簡単な例文を使用して引数の挙動についても詳しく書いていきたいと思います。
コールバック関数の基本や挙動に関する詳細は以下の記事で解説しています。
こういった悩みを解決します。
いろんなパターンに触れて、コールバック関数に慣れていきましょう。
ひげぶろ- コールバック関数の使用例
- コールバック関数の引数の挙動
- 引数や関数名の影響範囲
関数を定義する前に
関数の目的から考える
それでは関数を作る前に、関数の目的を考える必要があります。
なぜその関数を作るのか？
どういう目的で設定するのか？
関数を定義する意味は目的達成のためのツールみたいなものです。
ある意味「これが正解」みたいな形がないので、定義の形は様々です。
使い回せる仕組みにしたいのか、それともその場所でしか使わないのか、使い方でも定義の方法は変わってきます。
次の例では、aとbの異なる数字を様々な計算式で答えが出せることを目的とした関数を定義していきます。
この場合、様々な計算式で答えが出せるという部分がポイントでして、つまり計算式を後から変更できるようにする必要があります。
後から変更できるようにするためにはコールバック関数が必要です。ということは計算式の部分はコールバック関数が関わってくることになります。
このようなニュアンスで、以上のことを踏まえて関数を定義していきます。
コールバック関数を使用した関数定義
目的が決まりましたので、実際にコードを書いていきます。
計算式を実行する関数
まず計算式を実行する関数を定義します。
こちら今後の説明では便宜上、①の関数とします。
//計算式を実行する関数
function test(a,b,callback){
const result = callback(a,b);
console.log(result);
}test()のカッコ内に含まれているcallbackがコールバック関数となります。
ここでおさらいの意味も込めてですが、関数の実行は関数名（）です。
つまり、コード3行目のcallback(a,b)の部分で、a,bの引数があるcallbackの関数を実行しています。
コールバック関数に入る関数名は任意で大丈夫です。
注意していただきたいのが、この段階のcallbackという関数名はこの関数の中だけのものとなります。
つまり「関数名の影響範囲は関数の定義内だけ」、ということです。
この辺りはまた後半解説します。
3行目では、コールバック関数の出力結果を変数resultに格納。その後コンソール出力する指示を書いています。
計算式を返す関数
全体の流れを担当する関数（計算式を実行する関数）は先程定義しました。
次は計算式を返す関数を定義していきます。
こちらは便宜上、②の関数とします。
ここで定義する関数がコールバック関数として①の関数に呼ばれます。
先程のコードのcallback の部分に該当します。
//a,bの値を掛け算をする関数
function multiply(a,b){
return a * b;
}ここで「返す」という表現を使用していますが、returnは関数が呼ばれた場所に返すというものなので「返す」という表現を使用しています。
引数にa,bやreturn a * bとありますが、こちらは①の関数を実行する際に引数に渡った数字がこちらのa,bに代入されます。
関数の実行
ここまでで、
①の関数 … 全体の流れを決める関数（計算式を実行する関数）の定義
②の関数 … ①に入るコールバック関数の定義
以上2つの関数を定義しました。最後に関数を実行します。
5×5の掛け算です。
//①計算式を実行する関数
function test(a,b,callback){
const result = callback(a,b);
console.log(result);
}
//②a,bの値を掛け算をする関数
function multiply(a,b){
return a * b;
}
//①の関数の実行
test(5,5,multiply);①の関数の実行 test() と 引数に( 5,5,multiply)をセットし出力しています。
出力結果は 25 となります。
因みにこれまで①、②、関数の実行を段階を追って説明するために便宜上番号をふりましたが、実はこの記述の順番は前後していても動作します。
ですので、例えば。。。
//②a,bの値を掛け算をする関数
function multiply(a,b){
return a * b;
}
//①の関数の実行
test(5,5,multiply);
//①計算式を実行する関数
function test(a,b,callback){
const result = callback(a,b);
console.log(result);
}この順番でも作動します。例えば実行が一番上でも作動します。
とりあえず今の段階では定義の順番に拘らずとも作動するということは覚えておいてください。
関数・コールバック関数・変数の関係性
「計算式を実行する関数」のセクションで、関数名の影響範囲は関数の定義内だけと解説しました。
そのことについて触れていきます。
関係性の解説
下の画像にそれぞれの変数と、関数の関係を色で表してみました。
同色同士が関係しておりまして、同じ値が渡ります。
関数名の影響範囲は関数の定義内だけというのは、これは関数名の話であって、関数名は違えど内容に関してはリンクしています。
上記画像の場合ですと、callbackとmultiplyは同じ内容です。
関数multiplyが、test関数のコールバック関数として機能するように16行目で定義されています。
16行目で関数が実行された結果、引数にある関数multiplyが ＝ callbackに代入。
つまり6行目はcallback(a,b) ＝ multiply(5 ✖️ 5) という意味になります。
ひげぶろちょっとややこしいですが、コールバック関数は引数にある関数ということを思い出してください。
さらにちょっとややこしいのですが、５行目の関数のa,bと、11行目からの関数a,bは名前を揃えなくても機能します。
今回はわかりやすいようにa,bを統一していますが、違う関数の場合は内容がリンクしても関数名は任意で変更可能ということを覚えておいてください。
引数の順番に注意
それぞれの関数の引数の順番に注目してください。
注意して見ると、順番は（multiplyの値a, multiplyの値b, コールバック関数）となっています。
関数名はそれぞれの関数で違っていても作動しますが、引数の順番がそれぞれ異なると作動しません。
ですので、引数の順番は統一するようにしてください。
終わりに
今回はコールバック関数を引数や関数名の影響範囲も交えて解説しました。
私自身、コールバック関数の引数の挙動について理解することに時間がかかりましたので、過去の自分に教えるようなつもりで書いてみました。
ちょっとややこしい部分もあり、馴染むまで時間がかかると思いますが、是非実際に手を動かして書きながら覚えていくことをオススメします。読む力も上がります。
コールバック関数の理解について改めて勉強し直しているので、今後も色々な記述パターンや発見をシェアできたらと思います。
私自身、Javascriptに関してはUdemyを活用しているのですが、理解がグッと深まったコースがあるのでシェアさせていただきます。
特に、Webサイトでアニメーション等リッチな表現をしたい方には向いていると思います。
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
ご一読いただきましてありがとうございました。
