Zenn
🎉

JavaScriptにおける同期処理と非同期処理について

2024/09/25に公開
JavaScript
初心者
プログラミング
tech

最近、業務でJavaScriptを扱う機会が増えたので、まずな基礎の基から学習しました✏️

同期処理と非同期処理とは？

[同期処理]

  • タスクが順番に実行される
  • 一つのタスクが終わるまで、次のタスクは待機する

[非同期処理]

  • タスクが並行して実行される
  • 時間のかかるタスクを待たずに、次のタスクを実行できる

非同期処理が必要になるタイミング

  • クライアントがサーバに情報をとりに行く時
  • API通信で情報取得している時

非同期処理の実装方法

コールバック関数

  • 非同期処理が完了したときに呼び出される関数
function getData(callback) {
  setTimeout(() => {
    callback("データが取得できました");
  }, 1000);
}

getData((result) => {
  console.log(result);
});

Promise

  • 非同期処理の結果を表すオブジェクト
  • 状態：pending（実行中）、fulfilled（成功）、rejected（失敗）
function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("データが取得できました");
    }, 1000);
  });
}

getData()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });
  • resolve：Promiseが成功したときに呼び出す関数
  • reject：Promiseが失敗したときに呼び出す関数

async/await

  • Promiseをより簡潔に扱うための構文
async function fetchData() {
  try {
    const result = await getData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

非同期処理のメリットとデメリット

[メリット]

  • ユーザーインターフェースの応答性が向上する
  • 複数の処理を並行して実行できる
  • 長時間かかる処理でもアプリケーションがフリーズしない

[デメリット]

  • コードが複雑になる可能性がある
  • エラー処理が難しくなることがある
  • 実行順序の制御が難しくなることがある

Discussion