【JS応用｜豆知識】非同期処理の第一歩！JavaScriptのsetTimeoutを使いこなす極意

導入：なぜsetTimeoutが重要なのか

JavaScriptは「シングルスレッド」で動作する言語であり、一度に一つの処理しか実行できません。もし重い処理をそのまま実行すると、画面がフリーズしてしまいます。そこで役立つのが setTimeout です。これは「指定した時間が経過した後に特定の処理を実行する」ための強力なAPIで、非同期処理の基本として、アニメーションの制御やAPI通信のタイムアウト処理、UIの遅延表示など、フロントエンド開発のあらゆる場面で必須となる技術です。

基礎知識：setTimeoutの仕組み

setTimeoutは、ブラウザのWeb API（Node.js環境ならタイマーモジュール）が提供する関数です。仕組みとしては、第1引数に「実行したい関数（コールバック関数）」、第2引数に「待ち時間（ミリ秒）」を指定します。
重要なのは、指定した時間が経過したからといって、その瞬間に処理が即座に割り込むわけではないという点です。JavaScriptの「イベントループ」という仕組みにより、メインのタスクが空いたタイミングで実行されるため、第2引数の時間は「最低保証時間」と捉えるのが正解です。

実装・解決策：基本的な使い方

setTimeoutを使用するには、タイマーをセットするだけでなく、必要に応じて「タイマーの解除」を行うことも重要です。解除しないと、画面遷移後も処理が走り続け、意図しないバグやメモリリークの原因になります。解除には clearTimeout を使用し、setTimeoutが返す「タイマーID」を渡すことで、実行前の処理をキャンセルできます。

サンプルプログラム

以下のコードは、ボタンクリックでタイマーを開始し、途中でキャンセルできる実用的な例です。

// タイマーIDを保持するための変数
let timerId = null;

// 指定した時間に実行される関数
function showMessage() {
  console.log("タイマーが発火しました！");
}

// タイマーを開始する関数
function startTimer() {
  console.log("3秒後にメッセージを表示します...");
  // 3000ミリ秒 = 3秒後にshowMessageを実行
  timerId = setTimeout(showMessage, 3000);
}

// タイマーを途中でキャンセルする関数
function cancelTimer() {
  if (timerId) {
    clearTimeout(timerId); // IDを指定してタイマーを破棄
    console.log("タイマーをキャンセルしました。");
  }
}

// 実行例
startTimer();
// 3秒経過する前にこれを呼ぶと、showMessageは実行されません
// cancelTimer();

応用・注意点：現場で役立つアドバイス

現場でよくある失敗は、「0ミリ秒を指定すれば即座に実行される」という勘違いです。setTimeout(fn, 0) は「今のタスクが終わった直後に実行する」という意味になります。
また、thisの挙動にも注意が必要です。setTimeout内で通常の関数を使うとthisがグローバルオブジェクトを指してしまうため、アロー関数を使うことで、外側のスコープのthisを正しく引き継ぐのが現代のフロントエンド開発におけるベストプラクティスです。
最後に、複雑な非同期処理を繰り返す場合は、setTimeoutのネスト（コールバック地獄）を避けるため、Promiseを用いた記述への書き換えを検討してください。