JavaScriptでsetTimeout・setIntervalを使ったコールバック関数の基本と活用法！初心者向け解説

1. コールバック関数とは何か？

1. コールバック関数とは何か？

JavaScriptでコールバック関数とは、別の関数に渡しておいて、必要なタイミングで実行される関数のことです。例えばボタンを押したときや、時間が経ったときに実行される処理がコールバック関数です。

簡単に例えると、料理を作るときに「タイマーが鳴ったらオーブンから取り出してください」とお願いするようなイメージです。

2. setTimeoutで遅延実行する

2. setTimeoutで遅延実行する

setTimeoutは指定した時間（ミリ秒）後に一度だけ処理を実行する関数です。第一引数に実行したい関数、第二引数に待ち時間を指定します。

setTimeout(function() {
  console.log("3秒後に表示されます");
}, 3000);

上の例では、3秒（3000ミリ秒）待ってからコンソールに文字を表示しています。

3. setIntervalで繰り返し処理する

3. setIntervalで繰り返し処理する

setIntervalは指定した時間ごとに同じ処理を繰り返し実行します。こちらも第一引数に関数、第二引数に時間を指定します。

let count = 0;
let intervalId = setInterval(function() {
  count++;
  console.log(count + "回目の表示");
  if(count >= 5) {
    clearInterval(intervalId); // 5回で止める
  }
}, 1000);

上の例では1秒ごとに処理が実行され、5回目で止まります。clearIntervalを使うことで繰り返しを止められます。

4. コールバック関数を変数にして使う

4. コールバック関数を変数にして使う

コールバック関数は直接setTimeoutやsetIntervalに書くだけでなく、変数に代入して使うこともできます。

function sayHello() {
  console.log("こんにちは！");
}
setTimeout(sayHello, 2000);

このように書くと、コードが見やすくなり、同じ処理を他のタイマーでも使い回せます。

5. 引数をコールバック関数に渡す方法

5. 引数をコールバック関数に渡す方法

コールバック関数に引数を渡したい場合は、無名関数やアロー関数でラップすると簡単です。

function greet(name) {
  console.log(name + "さん、こんにちは！");
}
setTimeout(function() {
  greet("太郎");
}, 1500);

上の例では、1.5秒後に「太郎さん、こんにちは！」と表示されます。引数を直接渡すために無名関数で囲んでいる点がポイントです。

6. アロー関数でコールバックを簡潔に書く

6. アロー関数でコールバックを簡潔に書く

ES6以降ではアロー関数を使ってより短く書けます。

setTimeout(() => console.log("アロー関数で表示"), 1000);

let intervalId = setInterval(() => {
  console.log("1秒ごとに繰り返し");
}, 1000);

アロー関数を使うとfunctionを省略でき、より読みやすいコードになります。

7. setTimeoutとsetIntervalの使い分け

7. setTimeoutとsetIntervalの使い分け

setTimeoutは一度だけ処理を遅延実行したいとき、setIntervalは繰り返し処理を行いたいときに使います。タイマー処理の設計に応じて使い分けることが大切です。

例えば、アニメーションの一時停止や、一定時間後のメッセージ表示はsetTimeout、時計やカウントダウンなど定期的な更新はsetIntervalが向いています。

8. 注意点：非同期処理と順番

8. 注意点：非同期処理と順番

JavaScriptは基本的に1つずつ順番に処理しますが、setTimeoutやsetIntervalは非同期処理です。タイマーを使った処理は後で実行されるため、順番に依存する場合は注意が必要です。

console.log("開始");
setTimeout(() => console.log("タイマー処理"), 0);
console.log("終了");

（出力結果）
開始
終了
タイマー処理

この例では0ミリ秒でもタイマー処理は最後に実行されることに注意しましょう。

まとめ

まとめ

本記事ではJavaScriptにおけるsetTimeoutとsetIntervalを使ったコールバック関数の基本と応用について詳しく解説しました。setTimeoutは指定した時間後に一度だけ処理を実行する遅延実行用の関数であり、setIntervalは指定した間隔で繰り返し処理を行う関数です。それぞれの使い方や、変数に関数を代入して使い回す方法、引数をコールバック関数に渡す方法、さらにES6以降のアロー関数を使って簡潔に書く方法も紹介しました。

JavaScriptの非同期処理の仕組みを理解することで、タイマーを使ったアニメーションやカウントダウン、一定時間後の通知など、実用的なWebアプリケーションの作成が可能になります。特に、setTimeoutとsetIntervalの使い分けや、clearIntervalを用いた繰り返し処理の停止方法を正しく理解することは、効率的なコード設計に不可欠です。また、無名関数やアロー関数を用いることで、可読性が高くメンテナンスしやすいコードを書くことができます。

さらに、非同期処理の順序にも注意が必要です。setTimeoutの待機時間が0ミリ秒であっても、呼び出し元の処理が完了した後にコールバックが実行されるため、処理の順序を意識した設計が求められます。これにより、データの取得やUIの更新などを安全に行うことができます。

まとめると、setTimeoutとsetIntervalを使ったコールバック関数の利用は、時間を制御した非同期処理の基本であり、引数の渡し方や関数の使い回し、アロー関数による簡潔な記述、非同期処理の順序の理解が重要です。これらを組み合わせることで、より効率的で安全なJavaScriptプログラムを作成できます。

let count = 0;
let timerId = setInterval(() => {
count++;
console.log(count + "回目のメッセージ");
if(count >= 5) {
clearInterval(timerId);
console.log("タイマーを停止しました");
}
}, 3000);