0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JavaScriptにおける非同期処理、Promise、エラーハンドリングの基本

Posted at

はじめに

Webアプリケーション開発において、非同期処理は避けて通れない重要なトピックです。特に画像の読み込みやAPIリクエストなど、時間のかかる操作を扱う際に適切な非同期処理が不可欠です。この記事では、非同期処理の基本、Promiseの活用、そしてエラーハンドリングについて解説します。

非同期処理の基本

JavaScriptは単一スレッドで動作しますが、非同期処理を利用することで、長時間かかる処理を待たずに次の処理を実行できます。

console.log("Start");
setTimeout(() => {
  console.log("Timeout");
}, 0);
console.log("End");

// 出力:
// Start
// End
// Timeout

この例では、setTimeoutが非同期で実行されるため、"Timeout"の出力が最後になります。

Promiseの活用

Promiseは非同期処理をより扱いやすくする機能です。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John" };
      resolve(data);
      // エラーの場合: reject(new Error("Failed to fetch data"));
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

この例では、fetchData関数がPromiseを返し、データ取得の成功時はresolve、失敗時はrejectを呼び出します。

async/awaitの使用

async/awaitはPromiseをさらに読みやすく書くための構文です。

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

getData();

async関数内でawaitキーワードを使用することで、Promiseの結果を同期的に扱えます。

エラーハンドリング

非同期処理でのエラーハンドリングは特に重要です。try-catchブロックを使用して、エラーを適切に捕捉し処理します。

async function processImage() {
  try {
    await loadImage();
    await processData();
    await saveResult();
    console.log("処理完了");
  } catch (error) {
    console.error("エラーが発生しました:", error);
    // ここでユーザーへのエラー通知などを行う
  }
}

この構造により、各処理段階でエラーが発生した場合でも適切に捕捉され、処理されます。

まとめ

  • 非同期処理は、時間のかかる操作を効率的に扱うために重要です。
  • Promiseは非同期処理を構造化し、管理しやすくします。
  • async/awaitは、Promiseベースのコードをより読みやすく、書きやすくします。
  • 適切なエラーハンドリングは、堅牢なアプリケーション開発に不可欠です。

これらの概念を理解し適切に活用することで、より効率的で信頼性の高いJavaScriptアプリケーションを開発できます。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?