JavaScriptで秒後に実行する5つの方法

はじめに
●JavaScriptで秒後に実行する基本
- ○setTimeout
- ○setInterval
●JavaScriptで秒後に実行する応用例
- ○PromiseとsetTimeout
- ○Async/AwaitとsetTimeout
●注意点と対処法
●カスタマイズ方法
- ○複数のタイマーを連続して実行する
- ○リアルタイムな更新が必要な場合、requestAnimationFrameを使う
まとめ

はじめに

この記事を読めば、JavaScriptで秒後に実行する方法が5つマスターできるようになります。

初心者目線で徹底解説し、サンプルコードや注意点、カスタマイズ方法も網羅しています。

これを読めば、あなたもJavaScriptで秒後に実行するプロになれるでしょう。

●JavaScriptで秒後に実行する基本

JavaScriptで秒後に実行する方法として、まずは基本となるsetTimeoutとsetIntervalを紹介します。

○setTimeout

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

// このコードではsetTimeoutを使って3秒後にメッセージを表示するコードを紹介しています。
// この例では、3秒後にコンソールに"こんにちは、世界!"と表示しています。
function helloWorld() {
  console.log("こんにちは、世界!");
}

setTimeout(helloWorld, 3000); // 3秒後にhelloWorld関数を実行

setTimeoutは、第1引数に実行する関数を、第2引数に待機時間（ミリ秒）を指定します。

上記の例では、3000ミリ秒（3秒）後にhelloWorld関数を実行しています。

○setInterval

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

// このコードではsetIntervalを使って5秒ごとにメッセージを表示するコードを紹介しています。
// この例では、5秒ごとにコンソールに"こんにちは、世界!"と表示しています。
function helloWorld() {
  console.log("こんにちは、世界!");
}

setInterval(helloWorld, 5000); // 5秒ごとにhelloWorld関数を実行

setIntervalも、第1引数に実行する関数を、第2引数に待機時間（ミリ秒）を指定します。

上記の例では、5000ミリ秒（5秒）ごとにhelloWorld関数を繰り返し実行しています。

●JavaScriptで秒後に実行する応用例

ここでは、PromiseとsetTimeout、Async/AwaitとsetTimeoutを組み合わせた応用例を紹介します。

○PromiseとsetTimeout

Promiseを使って、setTimeoutをより簡潔に書く方法を紹介します。

この例では、2秒後にメッセージを表示するコードを紹介しています。

// このコードではPromiseとsetTimeoutを使って2秒後にメッセージを表示するコードを紹介しています。
// この例では、2秒後にコンソールに"こんにちは、世界!"と表示しています。
function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function helloWorld() {
  await delay(2000); // 2秒間待機
  console.log("こんにちは、世界!");
}

helloWorld();

delay関数は、指定したミリ秒後にPromiseを解決する関数です。

helloWorld関数内でawaitを使って、delay関数が終了するまで待機しています。

○Async/AwaitとsetTimeout

Async/Awaitを使って、setTimeoutをさらに分かりやすく書く方法を紹介します。

この例では、1秒後にメッセージを表示するコードを紹介しています。

// このコードではAsync/AwaitとsetTimeoutを使って1秒後にメッセージを表示するコードを紹介しています。
// この例では、1秒後にコンソールに"こんにちは、世界!"と表示しています。
function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function helloWorld() {
  await delay(1000); // 1秒間待機
  console.log("こんにちは、世界!");
}

helloWorld();

この例でも、delay関数を使って指定したミリ秒後にPromiseを解決し、helloWorld関数内でawaitを使って待機しています。

●注意点と対処法

setTimeoutやsetIntervalを使用する際には、次の注意点があります。

ブラウザがバックグラウンドにある場合、タイマーの実行が遅れることがあります。
これを解決するには、Web Workersを使用することができます。
setTimeoutやsetIntervalのコールバック関数内で、外部変数に依存すると予期しない結果が発生することがあります。
コールバック関数内で必要な変数は、引数で渡すかクロージャを使用してください。

●カスタマイズ方法

JavaScriptで秒後に実行する方法をカスタマイズする際には、次の方法があります。

複数のタイマーを連続して実行する
リアルタイムな更新が必要な場合、requestAnimationFrameを使う

それぞれの方法について、サンプルコードとともに解説していきます。

○複数のタイマーを連続して実行する

この例では、複数のタイマーを連続して実行するコードを紹介しています。

1秒後に”1秒経過”、2秒後に”2秒経過”と表示しています。

// このコードでは、複数のタイマーを連続して実行するコードを紹介しています。
// この例では、1秒後に"1秒経過"、2秒後に"2秒経過"と表示しています。

function timer1() {
  setTimeout(() => {
    console.log('1秒経過');
  }, 1000);
}

function timer2() {
  setTimeout(() => {
    console.log('2秒経過');
  }, 2000);
}

timer1();
timer2();

○リアルタイムな更新が必要な場合、requestAnimationFrameを使う

この例では、requestAnimationFrameを使ってリアルタイムなアニメーションを実行するコードを紹介しています。

円が右へ移動するアニメーションを行っています。

// このコードでは、requestAnimationFrameを使ってリアルタイムなアニメーションを実行するコードを紹介しています。
// この例では、円が右へ移動するアニメーションを行っています。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let xPos = 0;

function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(xPos, 50, 20, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();

  xPos += 1;
  requestAnimationFrame(drawCircle);
}

drawCircle();

このコードでは、requestAnimationFrameを使って円が右へ移動するアニメーションを実行しています。

drawCircle関数は、円を描画してxPosを1増やし、再度requestAnimationFrameで自分自身を呼び出すことでアニメーションを繰り返しています。