JavaScriptの非同期イベント処理の書き方と注意点

1. setTimeoutを使った非同期イベント処理

1. setTimeoutを使った非同期イベント処理

setTimeoutは指定した時間のあとに処理を実行する非同期関数です。ボタンをクリックして一定時間後にメッセージを表示する例を見てみましょう。

const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  console.log("クリックされました。処理を待っています...");
  setTimeout(() => {
    console.log("1秒後にこのメッセージが表示されます");
  }, 1000);
});

ここでは1秒後にメッセージが表示されますが、その間に他の処理も実行可能です。

2. Promiseを使った非同期処理

2. Promiseを使った非同期処理

Promiseは非同期処理の結果を表すオブジェクトです。成功時はresolve、失敗時はrejectを呼び出します。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "太郎" };
      resolve(data);
    }, 1000);
  });
}

const button = document.getElementById("fetchButton");
button.addEventListener("click", () => {
  fetchData().then((data) => {
    console.log("取得したデータ:", data);
  }).catch((error) => {
    console.error("エラー:", error);
  });
});

Promiseを使うことで、非同期処理の結果を受け取るタイミングを簡単に制御できます。

3. async/awaitを使った非同期処理

3. async/awaitを使った非同期処理

async/awaitを使うと、非同期処理を同期処理のように書けます。コードの見通しが良くなり、初心者にも理解しやすいです。

async function handleClick() {
  console.log("データ取得中...");
  try {
    const data = await fetchData();
    console.log("取得したデータ:", data);
  } catch (error) {
    console.error("エラー:", error);
  }
}

const button = document.getElementById("fetchButton");
button.addEventListener("click", handleClick);

awaitを使うとPromiseの処理が完了するまで待つことができます。

4. 非同期イベント処理の注意点

4. 非同期イベント処理の注意点

• 非同期処理は順序が予測しにくくなることがあります。依存関係がある処理はPromiseチェーンやasync/awaitで順序を制御しましょう。
• 複数の非同期処理を同時に実行すると、思わぬタイミングで処理が終わることがあります。Promise.allを使うと複数のPromiseの完了を待つことができます。
• 非同期イベントで例外が発生した場合、try/catchやcatchでエラー処理を必ず行いましょう。
• メモリリーク対策として、不要になったイベントリスナーは削除することも忘れないでください。

これらの注意点を意識することで、非同期イベント処理を安全に使うことができます。