JavaScriptのasync / awaitとは？Promiseをもっと簡単に書く方法

async と await は、Promiseをより読みやすく・書きやすくするために導入された構文です。
複雑な非同期処理も、まるで同期処理のように書けるため、現在のJavaScript開発では広く使われています。

この記事では、async / await の基本的な使い方や注意点をわかりやすく解説します。

asyncとは？

async は「非同期関数」を定義するためのキーワードです。
async をつけた関数は、常にPromiseを返します。

async function sayHello() {
  return "こんにちは";
}

sayHello().then(function(result) {
  console.log(result); // "こんにちは"
});

このように、async 関数の戻り値は自動的にPromiseに変換されます。

awaitとは？

await は、Promiseの完了を「待つ」ためのキーワードです。
使えるのはasync 関数の中だけです。

function fetchData() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve("データ取得完了");
    }, 1000);
  });
}

async function load() {
  const result = await fetchData();
  console.log(result); // データ取得完了
}

load();

await は、Promiseの結果が返るまで処理を一時停止し、完了後に次の行へ進みます。

複数のawaitを使う

async function process() {
  const a = await Promise.resolve(1);
  const b = await Promise.resolve(2);
  console.log(a + b); // 3
}

process();

複数の非同期処理も、順序を意識しながら自然な形で記述できます。

try / catchでエラー処理

await を使うときのエラー処理には、try / catch を使うと便利です。

async function fetchData() {
  throw new Error("エラー発生");
}

async function load() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log("エラー:", error.message);
  }
}

load();

Promiseの .catch() と同じように、エラーを捕捉して処理できます。

forループとの併用

for 文との組み合わせで、順番に非同期処理を実行することも可能です。

const items = [1, 2, 3];

async function processAll() {
  for (let item of items) {
    const result = await Promise.resolve(item * 2);
    console.log(result);
  }
}

processAll();

まとめ

• async を使うと関数がPromiseを返す
• await はPromiseの結果を待つために使う
• コードが直感的で読みやすくなる
• エラー処理は try / catch で行う
• async / await は Promise をより簡潔に扱える構文

async / await を使いこなせば、複雑な非同期処理も整理され、保守性の高いコードが書けるようになります。
まずはシンプルな例から試して、書き方に慣れていきましょう。