待機処理を制する！JavaScriptの3つの手法と10選サンプルコード

はじめに

この記事を読めば、JavaScriptで待機処理を実装する方法が習得できるようになります。

●JavaScriptでの待機処理とは

JavaScriptで待機処理を実装する方法は、大きく分けて3つの手法があります。

それぞれsetTimeout、Promise、およびasync/awaitです。

それぞれの特徴と使い方を下記に説明します。

○setTimeout

setTimeoutは、指定した時間だけ処理を遅延させることができる関数です。

例えば、ボタンをクリックしてから何かのアクションが実行されるまでに少しの間隔を置きたい場合に利用できます。

○Promise

Promiseは、非同期処理の結果を表すオブジェクトで、処理が完了したときに結果を返すか、エラーが発生したときにその理由を通知します。

これにより、コールバック関数を用いずに非同期処理の結果を扱うことができます。

○async/await

async/awaitは、非同期処理をより簡潔に書くことができる構文です。

Promiseを使った非同期処理を、同期処理のように直感的に書くことができます。

●JavaScriptにおける待機処理の使い方とサンプルコード

JavaScriptの開発において待機処理の理解と適用は重要です。

このセクションでは、JavaScriptでの異なる待機処理の手法とそのサンプルコードを紹介します。

○サンプルコード1：setTimeoutを使った待機処理

setTimeoutはJavaScriptにおける基本的な待機処理の方法です。

この関数を使用すると、指定された時間だけ処理の実行を遅らせることができます。

function delayedHello() {
  setTimeout(function() {
    console.log("Hello, World!");
  }, 2000);
}

delayedHello(); // 2秒後に"Hello, World!"とコンソールに表示されます

このサンプルでは、setTimeoutを使用して、2秒間待機した後に”Hello, World!”というメッセージをコンソールに表示します。

○サンプルコード2：Promiseを使った待機処理

JavaScriptの非同期処理にはPromiseがよく用いられます。

Promiseを利用すると、処理の完了を待つためのより柔軟な方法を提供します。

function sleep(ms) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve();
    }, ms);
  });
}

sleep(2000).then(function() {
  console.log("Hello, World!");
});

ここでは、Promiseを使用して、2秒待機した後に”Hello, World!”を表示する例を表しています。

○サンプルコード3：async/awaitを使った待機処理

async/awaitは、より直感的で読みやすい非同期コードを書くための現代的な機能です。

これを使うことで、非同期処理を同期的なスタイルで記述できます。

async function sleep(ms) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve();
    }, ms);
  });
}

async function main() {
  await sleep(2000);
  console.log("Hello, World!");
}

main();

この例では、async/awaitを用いて2秒間の待機処理を行い、その後にメッセージをコンソールに表示しています。

●JavaScriptの待機処理の応用例とサンプルコード

JavaScriptでの待機処理は多岐にわたる応用が可能です。

ここでは、さまざまなシナリオでの待機処理の実装方法と具体的なサンプルコードをご紹介します。

○サンプルコード4：setTimeoutを用いたアニメーション処理

setTimeoutを使うと、時間を制御しながら動的なアニメーションを実現できます。

下記のコードは、シンプルなアニメーションの例を表しています。

let count = 0;

function animate() {
  console.log("アニメーション中: " + count);
  count++;

  if (count <= 10) {
    setTimeout(animate, 100);
  }
}

animate();

このコードは、100ミリ秒ごとにカウントアップし、アニメーションの進行状況を表示しています。

○サンプルコード5：Promiseを利用したデータ取得処理

データ取得のような非同期処理にPromiseは特に適しています。

下記のサンプルは、データ取得のシミュレーションを表しています。

function fetchData() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve("データ取得完了");
    }, 2000);
  });
}

fetchData().then(function(result) {
  console.log(result);
});

このコードは、2秒後にデータが取得され、「データ取得完了」と表示します。

○サンプルコード6：async/awaitを活用したAPIリクエスト

async/awaitを使うと、非同期APIリクエストの処理が簡潔になります。

async function fetchAPI(url) {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}

fetchAPI("https://api.example.com/data");

このコードは、外部APIからデータを取得し、それをコンソールに表示しています。

○サンプルコード7：setTimeoutによるカウントダウンタイマー

setTimeoutを使ってカウントダウンタイマーを作成することもできます。

function countdown(seconds) {
  if (seconds >= 0) {
    console.log(seconds);
    setTimeout(function() {
      countdown(seconds - 1);
    }, 1000);
  } else {
    console.log("カウントダウン終了");
  }
}

countdown(5);

このコードでは、指定された秒数からカウントダウンし、「カウントダウン終了」と表示します。

○サンプルコード8：Promiseを使用した画像のロード処理

Promiseを使って、画像のロード処理を管理することも可能です。

function loadImage(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject(new Error("画像のロードに失敗しました: " + url));
    };
    image.src = url;
  });
}

loadImage("https://example.com/image.jpg")
  .then(function(image) {
    console.log("画像のロード成功: ", image);
  })
  .catch(function(error) {
    console.error(error);
  });

このコードでは、画像が正常にロードされた場合とエラーが発生した場合の両方を処理しています。

○サンプルコード9：async/awaitを用いた連続的な非同期処理

async/awaitを使って、複数の非同期処理を順番に実行する方法もあります。

async function asyncProcess() {
  console.log("処理1開始");
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log("処理1終了");

  console.log("処理2開始");
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log("処理2終了");
}

asyncProcess();

このサンプルでは、一連の非同期処理が順に実行されます。

●注意点と対処法

JavaScriptで待機処理を行う際の注意点と対処法を紹介します。

• 長い時間の待機処理を行うと、ブラウザがフリーズしたり、応答が悪くなることがあります。
  これを避けるために、適切な時間の待機処理を設定してください。
• Promiseやasync/awaitを使った非同期処理では、エラー処理が重要です。
  catchやtry/catchを使って、エラーが発生した場合の処理を記述しましょう。

●カスタマイズ方法

待機処理のカスタマイズ方法とサンプルコードを紹介します。

○サンプルコード10：setTimeoutを使って、クリックイベントに遅延を追加する

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  setTimeout(function() {
    console.log("ボタンがクリックされました");
  }, 1000);
});

このコードでは、setTimeoutを使ってボタンのクリックイベントに遅延を追加しています。

ボタンがクリックされると、1秒後に「ボタンがクリックされました」と表示されます。

まとめ

この記事を通して、JavaScriptにおける待機処理の基本から応用、さらにはカスタマイズ方法までを幅広く解説してきました。

setTimeout、Promise、async/awaitの使い方や、それぞれのメリットと適切な使用シナリオを理解することが重要です。

これらの知識とサンプルコードを参考に、あなたのプロジェクトにおける待機処理を効果的に実装してみてください。

JavaScriptの非同期処理の理解を深めることで、より高度でユーザーフレンドリーなウェブアプリケーションの開発が可能になります。