JavaScriptを学習し始めると、必ずと言っていいほどぶつかるのが「コールバック関数」という概念です。言葉だけ聞くと難しく感じますが、実は私たちの日常にある「お使い」の仕組みと同じです。
コールバック関数とは「後で呼んでもらう約束」
プログラミングにおけるコールバック関数とは、簡単に言うと「他の関数に渡して、タイミングが来たときに実行してもらう関数」のことです。
例えば、あなたが友人に「コンビニに行ってきて」と頼むとします。その際、ただ「行ってきて」と伝えるだけでなく、「買ってきたら、最後にレシートを見せてね」という指示を追加したとします。この「レシートを見せる」という行動が、プログラミングでいうコールバック関数です。
なぜわざわざ関数を渡すのか？
「なぜ自分で実行せずに、わざわざ他の関数に渡すの？」と疑問に思うかもしれません。その理由は、「処理の順番をコントロールするため」です。
特にWeb開発では、サーバーからデータを取得したり、画像が読み込まれるのを待ったりと「時間がかかる処理」が頻繁に発生します。もし処理が終わるのをただ待っているだけだと、画面がフリーズしてしまいます。そこで、「処理が終わったら、この関数を呼んでね」とあらかじめ予約しておくことで、効率よくプログラムを動かせるのです。
具体的なコード例で見てみよう
実際に、JavaScriptでよく使われるタイマー関数を例に見てみましょう。
const sayHello = () => {
console.log(“こんにちは！”);
};
setTimeout(sayHello, 3000);
このコードでは、setTimeoutという関数に「3秒後にsayHelloという関数を実行してね」と指示を出しています。ここで渡している「sayHello」がコールバック関数です。自分で直接呼び出すのではなく、「タイミングをsetTimeoutに委ねている」のがポイントです。
初心者が気をつけるべき「コールバック地獄」
コールバック関数は非常に便利ですが、使いすぎると問題も発生します。関数の内側にまた関数を書き、その中にまた関数を…と繰り返すと、コードが右側にどんどんズレていき、構造が複雑で見にくくなる「コールバック地獄」という状態に陥ります。
これを避けるために、現代のJavaScriptでは「Promise」や「async/await」といった新しい書き方が普及しています。しかし、それらの根本にある考え方は、やはりこの「コールバック」です。
まとめ
コールバック関数は、プログラムに「作業が終わったら、この続きをお願いね」という指示書を渡す仕組みです。まずは「関数を引数として渡すことができる」というJavaScriptの柔軟な特徴を、ぜひ実際にコードを書いて体験してみてください。最初は不思議に感じるかもしれませんが、使いこなせるようになると、Webサイトに動きをつけるのがぐっと楽しくなりますよ！