【ITニュース解説】CallBack In JS
2026年09月08日に「Dev.to」が公開したITニュース「CallBack In JS」について初心者にもわかりやすく解説しています。
ITニュース概要
JavaScriptにおけるコールバックは、別の関数へ引数として渡され、受け取った関数が必要な時に実行する関数だ。主に非同期処理などで、ある処理の完了後に別の処理を自動的に実行させる際に用いる。関数名をそのまま渡すのが特徴で、JavaScriptの多くの概念の基礎となる重要な仕組みだ。
ITニュース解説
コールバックとは、ある関数に引数として別の関数を渡す仕組みを指す。渡された関数は、その受け取り側の関数が必要なタイミングで呼び出すことが可能になる。これは、「この関数を用意しておくので、準備ができたらそれを実行してほしい」と依頼するようなものである。
JavaScriptでは、関数を他の一般的なデータ(数値や文字列など)と同じように「値」として扱うことができる。この特性により、関数を変数に代入したり、別の関数の引数として渡したり、さらには関数の戻り値として別の関数を返したりすることが可能となる。ある関数が別の関数を引数として受け取り、その受け取った関数を後から実行する場合、引数として渡された関数が「コールバック関数」と呼ばれる。
具体的な例で考えてみよう。例えば、「Hello!」とコンソールに出力するgreetという関数があるとする。
function greet() { console.log("Hello!") }
そして、このgreet関数を引数として受け取り、その引数を実行するexecuteという関数があるとする。
function execute(callback) { callback() }
ここで、execute(greet)と記述してexecute関数を呼び出すと、何が起こるだろうか。greet関数がexecute関数の引数callbackとして渡される。execute関数の内部では、callback()という記述があるため、これは渡されたgreet関数を実行することになる。結果として、「Hello!」とコンソールに出力されるのだ。この一連の流れでは、greet関数がexecute関数にとってのコールバック関数となる。
コールバック関数は、特定の処理の後に別の処理を実行したい場合に非常に役立つ。特に、非同期操作と呼ばれる、時間がかかる処理や、いつ完了するか分からない処理を扱う際にその重要性が際立つ。非同期操作とは、例えばインターネットからデータを取得する処理や、タイマーを使って一定時間後に何かを実行する処理などを指す。これらの処理は、その完了を待つことなくプログラムの次の行が実行されるため、処理が完了したことを検知し、その後に続くべき処理を実行するためにコールバックが必要となる。
JavaScriptの標準機能であるsetTimeout()関数は、まさにコールバックの典型的な例である。setTimeout()は、指定したミリ秒数が経過した後に特定の関数を実行させるために使われる。
setTimeout(function () { console.log("2 seconds passed") }, 2000)
このコードでは、function () { console.log("2 seconds passed") }という無名関数がsetTimeout()の最初の引数として渡されている。これがコールバック関数である。setTimeout()は、2000ミリ秒(つまり2秒)が経過した後に、このコールバック関数を呼び出す。これにより、プログラムは2秒間待つことなく次の処理に進み、2秒後に「2 seconds passed」というメッセージが表示される。
ここで、コールバック関数を「渡す」ことと「呼び出す」ことの違いを理解することが非常に重要である。
先ほどのexecute関数の例で見てみよう。
execute(greet)と記述した場合、これは「greetという関数そのものをexecute関数に渡す」ことを意味する。このとき、greet関数はまだ実行されていない、単なる関数の定義として渡されるのだ。execute関数の中で、渡されたgreet関数がcallback()として実行される。
しかし、もしexecute(greet())と記述してしまったらどうなるだろうか。この場合、greet関数はexecuteに渡される前に、まずgreet()としてすぐに実行されてしまう。そして、greet関数が実行された結果(greet関数は何も値を返さないため、この場合はundefined)がexecute関数に引数として渡されることになる。つまり、「greet関数をすぐに実行し、その結果をexecuteに渡す」という意味になるのだ。これは、関数そのものを後で実行してもらうために渡すという、コールバックの本来の目的とは全く異なる動作である。システムエンジニアを目指す上で、この違いはプログラミングにおける非常に基本的な概念であり、誤解がないように注意深く理解しておく必要がある。
結論として、コールバックは、ある関数を別の関数に引数として渡し、その別の関数が後で、または特定の条件が満たされたときに渡された関数を呼び出すためのシンプルな仕組みである。この概念を理解することは、JavaScriptの学習において非常に重要である。なぜなら、JavaScriptにおけるイベント処理(ボタンクリックなどのユーザー操作への応答)、非同期プログラミング(Promiseなどの高度な手法)、そして配列のmapやfilterといった多くのメソッドなど、JavaScriptの主要な機能や概念の基盤としてコールバックが広く活用されているからだ。コールバックをしっかり学ぶことで、より複雑な処理やユーザー体験豊かなアプリケーションを構築するための第一歩を踏み出せるだろう。