初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】コールバック関数とは?使い方と使い道をサンプルコード付きで紹介!

【JavaScript】コールバック関数 コールバック関数の使い方

コールバック関数とは、他の関数に引数として渡される関数のことです

文字だけで説明されてもピンとこないかと思います。
僕はピンときてないです。

コールバック関数を知るためには、まずは基本的な関数の使い方はおさえておきましょう!

コールバック関数は、普通の関数と比べてちょっとだけ複雑。

一体なにができて、どのような使い方をするのでしょうか?

コールバック関数とは?

改めて、コールバック関数とは、他の関数に引数として渡される関数のことです。

コールバック関数の書き方は、このような感じです。

/* 無名関数ver */
const 変数名 = function(){
    何らかの処理;
    return 処理の結果;
}

/* アロー関数ver */
const 変数名 = ()=>{
    何らかの処理;
    return 処理の結果;
}

return 処理の結果; と記述することで、実行した関数そのものが結果の値に変身します。

さて、まだピンときませんね。
それではサンプルコードを見てみましょう。

サンプルコード

まずはコピペして結果を見てみましょう!

<script>
/* コールバック関数を必要とする関数 */
const hello = function(name, cb){
    const result = cb(name);
    console.log(result);
}

/* コールバック関数 */
const en = function(arg){
    return `Hello ${arg} !`;
}

hello('World', en);
</script>

関数「hello」は、第二引数である関数「cb」の引数に第一引数をセットして実行し、その結果をコンソールで出力する関数です。

コールバック関数「en」は、実行することで「Hello 引数 !」という値に変身する関数です。

先ほど書いた通り、コールバック関数は、実行した関数そのものが結果の値に変身します。

わざわざコールバック関数を使った理由は何でしょうか?

サンプルコードをグレードアップ!

先ほどのサンプルコードをさらにグレードアップさせました!

<script>
/* コールバック関数を必要とする関数 */
const hello = function(name, cb){
    const result = cb(name);
    console.log(result);
}

/* コールバック関数 */
const en = function(arg){
    return `Hello ${arg} !`;
}

const jp = function(arg){
    return `こんにちは、${arg}!`;
}

const cn = function(arg){
    return `你好${arg}!`
}

hello('World', en);
hello('世界', jp);
hello('世界', cn);
</script>
えふぃ

コールバック関数を増やして、関数「hello」の幅を広げることができました!

コールバック関数は、メインの関数のパーツとなるものです。
そのパーツを増やしていくことで、メインの活動領域が広がります!

サンプルコードをもいっちょ!

関数「calc」の第一引数と第二引数には数字が入ります。
そして第三引数にコールバック関数「plus」を入れると2つの数字の和が、コールバック関数「multiply」を入れると2つの積がコンソールに出力されます。

<script>
/* コールバック関数を用いて処理される関数 */
const calc = (x, y, callback) => {
    const result = callback(x, y);
    console.log(result);
};

/* コールバック関数「plus」 */
const plus = (n1, n2) => {
    return n1 + n2;
};

/* コールバック関数「multiply」 */
const multiply = (n1, n2) => {
    return n1 * n2;
};

calc(1, 2, plus);
calc(3, 4, multiply);
</script>

コールバック関数はいつ使うのか?

コールバック関数は、単体では力を発揮しません。
メインの材料として使われる関数です。

そのため、シンプルな関数を使う際に出番はなく、複雑な関数を扱うとき、コールバック関数を必要とする場面が現れるのです。

まだその出番は先になるのではないでしょうか。

むむ、これはコールバック関数の出番では!?

と思ったその瞬間、あなたの成長を実感し、自分をたっぷりと褒めてあげてください!