JavaScriptで待機処理をマスター！5つの使い方とサンプルコード

はじめに

この記事を読めば、JavaScriptで待機処理を行う方法がマスターできます。

待機処理は非同期処理や一定時間後の処理など、様々な場面で活用されます。

ここでは、JavaScriptで待機処理を実装するための基本的な方法を初心者向けに徹底解説し、使い方や注意点、カスタマイズ方法を含む5つのサンプルコードを紹介します。

それでは、始めていきましょう！

●JavaScriptでの待機処理の基本

待機処理を実装するためには、次の4つの方法があります。

setTimeout
setInterval
Promise
async/await

それぞれの方法について、簡単に説明します。

○setTimeout

setTimeoutは、指定した時間後に一度だけ実行される関数です。

第一引数には実行したい関数を、第二引数には実行までの待機時間をミリ秒単位で指定します。

○setInterval

setIntervalは、指定した時間ごとに繰り返し実行される関数です。

setTimeoutと同様、第一引数には実行したい関数を、第二引数には繰り返しの間隔をミリ秒単位で指定します。

○Promise

Promiseは、非同期処理の結果を表すオブジェクトです。

成功（resolve）や失敗（reject）の状態に応じて、後続の処理を実行します。

○async/await

async/awaitは、非同期処理をより直感的に記述できる構文です。

async関数の中で、awaitを使ってPromiseの結果を待ち、その値を直接取得できます。

●使い方とサンプルコード

それでは、それぞれの方法について、サンプルコードを見ながら詳しく解説していきます。

○サンプルコード1: setTimeoutを使った一定時間後の処理

このコードでは、setTimeoutを使って3秒後にメッセージを表示する処理を紹介しています。

この例では、3秒後に「Hello, World!」と表示しています。

setTimeout(() => {
  console.log('Hello, World!');
}, 3000);

○サンプルコード2: setIntervalを使った繰り返し処理

このコードでは、setIntervalを利用して1秒ごとにメッセージを表示する処理を紹介しています。

この例では、「Hello, World!」というメッセージを1秒ごとに出力しています。

setInterval(() => {
  console.log('Hello, World!');
}, 1000);

○サンプルコード3: Promiseを使った非同期処理の待機

このコードでは、Promiseを用いて非同期処理の結果を待機する方法を紹介しています。

この例では、3秒後に成功（resolve）するPromiseを作成し、その後にメッセージを表示しています。

const wait = (time) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
};

wait(3000).then(() => {
  console.log('3秒経過しました');
});

○サンプルコード4: async/awaitを使った非同期処理の待機

このコードでは、async/awaitを用いて非同期処理の結果を待機する方法を紹介しています。

この例では、先ほどのPromiseを用いて、3秒待機した後にメッセージを表示しています。

const asyncWait = async () => {
  await wait(3000);
  console.log('3秒経過しました');
};

asyncWait();

○サンプルコード5: clearTimeoutとclearIntervalを使った待機処理のキャンセル

このコードでは、clearTimeoutとclearIntervalを使って待機処理をキャンセルする方法を紹介しています。

この例では、setTimeoutとsetIntervalをキャンセルし、メッセージの表示を停止しています。

const timeoutId = setTimeout(() => {
  console.log('これは表示されません');
}, 3000);

const intervalId = setInterval(() => {
  console.log('これも表示されません');
}, 1000);

clearTimeout(timeoutId);
clearInterval(intervalId);

●注意点と対処法

○タイマーの精度

JavaScriptのタイマーは、完全に正確ではありません。

実際の待機時間が指定した時間よりも若干長くなることがあります。

そのため、厳密なタイミングが求められる場合は、他の方法を検討してください。

○ブラウザの非アクティブ時の挙動

ブラウザが非アクティブの状態だと、タイマー関数が遅延する場合があります。

この問題を回避するには、Web Workerを利用することが一つの解決策です。

○非同期処理のエラー処理

非同期処理でエラーが発生した場合、適切なエラー処理が重要です。

ここでは、Promiseを使った非同期処理でのエラー処理方法を紹介します。

このコードでは、Promiseでエラーが発生した場合に、catchを使ってエラー処理を行う方法を示しています。

この例では、エラーメッセージを表示しています。

const waitWithError = (time, shouldReject) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldReject) {
        reject(new Error('エラーが発生しました'));
      } else {
        resolve();
      }
    }, time);
  });
};

waitWithError(3000, true)
  .then(() => {
    console.log('正常に終了しました');
  })
  .catch((error) => {
    console.error('エラーが発生しました:', error.message);
  });

●カスタマイズ方法

○カスタムタイマー関数の作成

JavaScriptの標準タイマー関数をカスタマイズして、独自のタイマー関数を作成することもできます。

このコードでは、指定した回数だけ繰り返し処理を実行するカスタムタイマー関数を紹介しています。

この例では、「Hello, World!」というメッセージを3回表示しています。

const customSetInterval = (callback, interval, times) => {
  let count = 0;
  const intervalId = setInterval(() => {
    callback();
    count++;
    if (count >= times) {
      clearInterval(intervalId);
    }
  }, interval);
};

customSetInterval(() => {
  console.log('Hello, World!');
}, 1000, 3);

○非同期処理のチェーン

Promiseを使った非同期処理では、thenやcatchをチェーンして複数の処理を連続して実行することができます。

このコードでは、2つの非同期処理を連続して実行する例を示しています。

この例では、まず3秒待機した後、次に2秒待機しています。

wait(3000)
  .then(() => {
    console.log('3秒経過しました');
    return wait(2000);
  })
  .then(() => {
    console.log('さらに2秒経過しました');
  });

まとめ

この記事では、JavaScriptでの待機処理の基本的な方法を紹介しました。

setTimeoutやsetIntervalなどのタイマー関数を用いて一定時間後の処理や繰り返し処理を実行する方法について説明しました。

また、Promiseやasync/awaitを利用した非同期処理の待機方法も解説しました。

さらに、5つのサンプルコードを通じて、待機処理の使い方や注意点、カスタマイズ方法を示しました。

非同期処理でのエラー処理やカスタムタイマー関数の作成、非同期処理のチェーンなどの応用的な使い方も紹介しました。

これらの方法を理解し、自分のプロジェクトに応用できるようになれば、非同期処理の実装がよりスムーズに行えるでしょう。

今後も、JavaScriptでの待機処理や非同期処理に関する知識を深めていくことで、より効果的なコードを書くことができるようになります。