JavaScriptの非同期処理とは？async/await・Promiseの使い方を解説

PR JavaScript

JavaScriptの非同期処理とは？async/await・Promiseの使い方を解説

💡 この記事でわかること

  • 非同期処理とは何か
  • コールバック関数の基本と限界
  • Promiseの書き方(resolve・reject・then・catch)
  • async/awaitの書き方とtry/catchでのエラー処理
  • fetchを使った実践的な非同期処理の例

1. 非同期処理とは？

非同期処理とは、
👉 時間のかかる処理の完了を待たずに、次の処理を進められる仕組みです。

なぜ非同期処理が必要なの？

例えば、サーバーからデータを取得する処理は数百ミリ秒〜数秒かかることがあります。
もし処理が終わるまで画面が固まってしまったら、ユーザーは何も操作できなくなってしまいます。

非同期処理を使うことで、データ取得中も他の処理(画面の描画やボタン操作など)を止めずに進めることができます。

2. コールバック関数の基本と限界

非同期処理の古くからある書き方が「コールバック関数」です。処理が終わったときに呼び出す関数を、あらかじめ引数として渡しておきます。

setTimeout(() => {
  console.log("1秒後に実行されました");
}, 1000);

ただし、非同期処理を複数連続で行うと、コールバックの中にコールバックを書くことになり、コードが読みにくくなってしまいます。この状態は「コールバック地獄」と呼ばれます。

処理A(() => {
  処理B(() => {
    処理C(() => {
      // ネストがどんどん深くなる
    });
  });
});

💡 この問題を解決するために生まれたのがPromiseです。

3. Promiseとは？

Promiseとは、
👉 非同期処理の「成功」か「失敗」かの結果を表すオブジェクトです。

基本構文

const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("成功しました");
  } else {
    reject("失敗しました");
  }
});

promise
  .then((result) => console.log(result))
  .catch((error) => console.log(error));

👉 resolveが呼ばれるとthen、rejectが呼ばれるとcatchの処理が実行されます。

4. async/awaitとは？

async/awaitとは、
👉 Promiseをより読みやすく書くための構文です。見た目が同期処理のように書けるのが特徴です。

基本構文

async function getMessage() {
  const result = await promise;
  console.log(result);
}

👉 関数の前にasyncを付け、Promiseを返す処理の前にawaitを付けるだけで、結果が返るまで待ってから次の行に進んでくれます。

エラー処理(try/catch)

async/awaitでのエラー処理にはtry/catchを使います。

async function getMessage() {
  try {
    const result = await promise;
    console.log(result);
  } catch (error) {
    console.log("エラー: " + error);
  }
}

5. fetchを使った実践例

実際の開発では、APIからデータを取得するfetchと組み合わせて使うことが多いです。

async function fetchUser() {
  try {
    const response = await fetch("https://example.com/api/user");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("データの取得に失敗しました: " + error);
  }
}

fetchUser();

⚠️ 注意: 上記のURLはサンプルです。実際に動かす際は、実在するAPIのURLに置き換えてください。

まとめ

  • 非同期処理は、時間のかかる処理を待たずに次に進める仕組み
  • コールバックはネストが深くなりやすい欠点がある
  • Promiseは非同期処理の結果を表すオブジェクト
  • async/awaitはPromiseをより読みやすく書ける構文
  • エラー処理にはtry/catchを使う

非同期処理はJavaScriptの重要な基礎のひとつです。まずはPromiseとasync/awaitの基本構文に慣れて、実際に手を動かしながら理解を深めていきましょう。

-JavaScript
-, ,