非同期処理を「魔法のように」シンプルに書く！ ✨

前回の記事で、Webサイトをフリーズさせないための非同期処理と、その結果を管理するPromise（プロミス）について学びましたね。Promiseと.then()、.catch()を使えば非同期処理は実現できますが、複数の非同期処理が連なると、コードが縦に長くなり、非常に読みにくくなるという問題（Promiseチェーン）がありました。

そこで登場したのが、asyncとawaitというJavaScriptの「魔法のキーワード」です。これらは、Promiseを裏側で使いながらも、非同期のコードを、まるで上から下に実行される同期的なコードのようにシンプルに記述できるようにしてくれます。

今回は、このasync/awaitの基本的な使い方と、コードの読みやすさがどのように向上するかを解説します。

1. async：関数を非同期にする
1. async関数の定義
2. await：Promiseの完了を「待つ」
1. awaitを使ったデータ取得の例
3. エラー処理：try...catchで例外をキャッチ
まとめ：async/awaitで非同期コードを制覇！

1. async：関数を非同期にする

asyncキーワードは、関数の前に付けることで、「この関数は非同期処理を行うよ」と宣言する役割を果たします。

async関数が持つ最も重要な特徴は、その関数が必ずPromiseを返すということです。関数内で通常の値をreturnしても、JavaScriptはそれを自動的にPromise.resolve()で包んで返します。

async関数の定義

JavaScript

// asyncキーワードを関数の前につける
async function sayHello() {
  return "Hello, World!";
}

// 呼び出し側ではPromiseとして受け取る
sayHello().then(message => {
  console.log(message); // 結果: Hello, World!
});

2. await：Promiseの完了を「待つ」

awaitキーワードは、async関数の中でのみ使用できます。その名の通り、「一時停止」を意味し、後ろに続くPromiseが成功（Fulfilled）するまで、その行の処理を一時的に停止します。

awaitの処理が完了すると、Promiseの結果（データ）が取り出され、次の行の処理が再開されます。

awaitを使ったデータ取得の例

以下の例では、前の記事で使ったfetchData関数（Promiseを返す非同期処理）を使っています。

JavaScript

// fetchData関数（Promiseを返す）は定義済みとする

async function loadData() {
  console.log("① データ取得を開始");
  
  // await: fetchDataが完了するまでここで処理を一時停止
  const data = await fetchData(); 
  
  // fetchDataの完了後、次の行が実行される
  console.log("② データ取得完了:", data); 
  
  console.log("③ 最終処理");
  return data;
}

loadData(); // loadData関数自体は非同期で実行される
// 実行順序: ① → ③ → （fetchDataの待機） → ②

このように、非同期処理を**Promiseのthenチェーンを使わず**に、あたかも同期処理のように上から順に書けるのがasync/awaitの最大のメリットです。

3. エラー処理：try...catchで例外をキャッチ

非同期処理には失敗（エラー）がつきものです。Promiseでは.catch()を使っていましたが、async/awaitでは、通常の同期コードと同じように**try...catchブロック**を使ってエラーをキャッチします。

JavaScript

async function loadDataAndHandleError() {
  try {
    // 成功する可能性のある非同期処理をtryブロックに入れる
    const data = await fetchDataWithError(); // エラーを返すPromiseだと仮定
    console.log("成功時の処理:", data);
  } catch (error) {
    // 失敗（エラー）が発生した場合に実行される
    console.error("エラーが発生しました:", error);
    // ユーザーにエラーメッセージを表示するDOM操作などを行う
  }
}

loadDataAndHandleError();

これにより、エラー処理のロジックも非常にシンプルになり、コードの可読性が大幅に向上します。