コールバック関数は実務でどのような場面で使われるのでしょうか？

Question

現在、js,tsを学習中で、コールバック関数について学びました。例えば以下のようなコードです。

function callBack(
  num: number,
  cb: (value: number) => number
): void {
  const result = cb(num + 2)
  console.log(result)
}

callBack(21, value => value * 2)

この例では、数値を受け取り、その数値を加工する処理を関数として渡す。という動きになることは理解できています。また、数値だけでなく 文字列など他の型でも使える ことも想像はできています。

ただ、実務でどのような場面で使われるのかがまだピンと来ていません。
また、メリットや、代替や今時の書き方はあるのでしょうか？

初心者で恐縮ですが、どのような場面で使われているのかを理解したく、教えていただけますと幸いです

Comments

[cametan]

これはコールバック関数じゃなくって、高階関数(higher-order function)だな。

高階関数:
https://ja.wikipedia.org/wiki/%E9%AB%98%E9%9A%8E%E9%96%A2%E6%95%B0

コールバック関数はその定義だとcbの方だ。引数に代入される側の関数をコールバック関数と呼ぶ。

> また、メリットや、代替や今時の書き方はあるのでしょうか？

むしろコールバック関数の方が「今時」かね。メリットはそのまんま、「計算処理の中核部分」を丸ごと置き換えられるように書ける事。代替は、処理自体を「直接埋め込む」事だ。こっちが典型的な書き方にはなるんだけど、「似たような関数を複数書くハメになる」。

例えば、典型的な例としてソーティングがある。JavaScriptで言うとArray.prototype.toSorted()がある。

Array.prototype.toSorted():
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted

toSortedにコールバック関数を与えて、昇順/降順を切り替えたり、あるいは配列要素がどんなデータ型なのか、で適する比較方法を変えるわけだ。
仮にコールバック関数を受け入れるような高階関数を書かなければ、僕らは「昇順用のソーティング関数」「降順用のソーティング関数」の2つが必要になり、また、対象とするデータ型によって別々のソーティング関数をわざわざ書かないとならないだろう。

言い換えると、コールバック関数を取る高階関数を書く事は「汎用性を高める」効果がある。だから「どのような場面で使われる」に対して、かなりピンポイントで言うなら、「自作ライブラリ」を作る際に効果を発揮するだろう。「使い回しが効く」と言うのをかなり高度に行えるんだ。

繰り返すけど、高階関数はどっちかっつーと「新しい」方の方法論に準じてると思う。特定の言語に於いては知られてるテクニックで、そこそこ長い歴史はあるんだけど、一方、「やり方」は確かに、一般的にはそこまで広まってないと思う。低レベルな言語で初めてプログラミングを学んだ層だとあまり使いこなせてない人が多い、ってのは事実だろう、とは思うからだ。

その「特定の言語」で説明されてるんだけど、次の文書がある程度この辺の背景を説明してくれてると思う。

なぜ関数プログラミングは重要か:
https://www.sampou.org/haskell/article/whyfp.html

[kent1212]

cametanさん

> 「今時」かね。メリットはそのまんま、「計算処理の中核部分」を丸ごと置き換えられるように書ける事。代替は、処理自体を「直接埋め込む」事だ。こっちが典型的な書き方にはなるんだけど、「似たような関数を複数書くハメになる」。

なるほどです。ありがとうございます！
リンクも参考にさせていただきます。

[u2025]

「コールバック関数は実務でどのような場面で使われるのでしょうか？」という質問は「この書き方はどんなメリットがあるのか？」という意図でよろしい？
前提として、コールバック関数という呼び方も高階関数という呼び方も正しい。(ただし関数の名前の付け方がややこしい)という前提で話す。

今の状態だと、引数に対して2を足してコールバックに渡すという意味がある。
```
function callBack(
num: number,
cb: (value: number) => number
): void {
const result = cb(num + 2)
console.log(result)
}

callBack(21, value => value * 2)
```

これを「全体」の計算処理でやっておくと、2を3に書き換えたいときに一か所に集約されているので変更が楽だというメリットがある。

```
function callBack(
num: number,
cb: (value: number) => number
): void {
// const result = cb(num + 2)
// ここを変えるだけで呼び出し元のすべてのコードに反映される
const result = cb(num + 3)
console.log(result)
}

callBack(21, value => value * 2)
```

CPUバウンドな処理なので意味がないが、ロード処理のような前処理と後処理が必要なコードでも閉じ忘れがない。また、この関数の中身を書き換えるだけで他のライブラリに置き換えることもできる
```
function callBack(
num: number,
cb: (value: number) => number
): void {

// UIにローディングスピナー画面を表示する
// loadライブラリを後で付け替えれば別の処理を全体に反映することができる
load.begin();

const result = cb(num + 2)
console.log(result)

// UIのローディングスピナーを非表示にする
load.end();

}

callBack(21, value => value * 2)
```

---
これは要するに処理が集約されていてカプセル化されているということなので、複雑な処理を外部に漏らさないという考え方もできるが、わざわざこんな書き方をしないといけないほど複雑なコード自体が嫌われるケースもある(使う側でどんな処理が想定されているのか分からない)
関数指向の考えはクラスを作るのが冗長でインラインでかけたほうが生産的だという考え方から来ていてむしろモダンな書き方でもある。
個人的には別にこれがよい書き方とは思わない。ハック的な書き方の一つ程度にしか思わないし、学習中なら見せ方や分かりやすさよりもどういった書き方がボトルネックになるのかや推奨される設計を勉強したほうが良いと思う。必ずしも全員がそうやって勉強するというわけではないが。

---
ちなみに今のその関数は引数に2を足してコールバックを実行して「その戻り値をログに出力する」だけなので本質的には何の意味もなくコールバックを複雑にすれば多少意味はありますが、ただ読みにくくなるだけのコードです。
ただの式変形ともとれる。

[TakaiY]

(回答は回答を書くところに書きましょう。読みにくいし議論しにくい)

Answer 1

初心者がこのサイトで質問してはいけないということではないのですが、特定のプログラムや特定の状況においてどうしたらいいかという質問じゃなくて、入門書に書いてあるレベルの話は、今はAIに聞いた方がいいです。AIと会話することであなたの理解度に合わせて説明してくれます。このサイトだと会話の1つのやり取りに数時間かかったりするわけで時間がかかります（AIの言ってることがわからない場合orAIの言ってることは間違ってるんじゃないかと思う場合は、その会話についてこのサイトで質問しましょう）。

コールバックの例ですが、「汎用の処理に、特定の処理を任せる」ケースが１つ目。
この例では、「配列要素のソート」という汎用の処理に、「ソートの順は数値の昇順に」という特定の処理を任せます。
[10,2,999,41]という配列をソートしてみましょう。期待する結果は[2,10,41,999]でしょうか。

入力:
[10,2,999,41].sort()
結果:
[ 10, 2, 41, 999 ]

期待する結果と違いますね。sort()は対象を文字列だとみなして、文字列を辞書的に比較（先頭から1文字ずつ比較）しますので、こういう結果になります。数値とみなしてソートしたいときは、「どういう基準で大小を判断するか」という関数を渡します。

入力:
[10,2,999,41].sort((x,y) => x-y)
結果:
[ 2, 10, 41, 999 ]

期待通りになりました。この(x,y) => x-yがコールバック関数です。function(x,y){return x-y;}と書いてもいいです。他には、生年月日順にソートするとか、役職順にソートするとか。
sort()の仕様は https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 参照。

もう1つは、非同期処理の続きの指定です。「10秒後にこれこれをしたい」というときは、

setTimeout(function(){ これこれの処理; }, 10*1000);

と書きますが、この第一引数がコールバック関数です。
他には、「これこれのHTTPリクエストを行って、レスポンスが返ったら、そのレスポンスに対してこれこれの処理をしろ」とか、「このボタンがクリックされたらこれこれの処理をしろ」とか多種多様。

プログラムの上から下への流れとか、ループや条件判断での処理の流れと別に、「指定時間が経過した時」「サーバーからデータが届いたとき」「ユーザーが何らかの操作をしたとき」などという突然のタイミング（非同期処理）で処理を実行したいとき、その処理関数をあらかじめセットしておくということですね。