async/await とは？初心者にもわかりやすい非同期処理の基本解説

プログラミング言語•2025/1/28

はじめに

JavaScriptで非同期処理を行うとき、見慣れない構文や複雑なコールバックチェーンに戸惑うことがあるのではないでしょうか。こうした非同期処理に対して、とてもシンプルな記述を可能にするものが async/await です。この機能を上手に使うことで、コードの可読性が大きく向上し、思わぬバグを防ぎやすくなることがあります。初めてプログラミングを学び始めた皆さんにとっても、扱いやすい構文だと感じられるかもしれません。

ここでは、非同期処理の基本から具体的なコード例、そして実務での活用シーンまでを一通り紹介していきます。

この記事を読むとわかること

非同期処理がなぜ必要なのか
Promiseやコールバックとの違いと、それぞれのメリット・デメリット
async/await の基本的な使い方
実務でどのように活用されることが多いのか
注意点やよくある疑問点

async/await の概要

非同期処理の必要性

JavaScriptは、ブラウザ上で動くスクリプトとして始まりましたが、サーバーサイドなどでも使われる場面が増えています。しかし、長時間かかる処理をそのまま書くと、プログラムの流れが止まってしまい、他の処理も止まってしまうことがあります。たとえば、外部のAPIにアクセスするとき、ネットワークの応答速度は常に一定ではありません。もし応答を待っている間にプログラムが止まってしまうと、ユーザーに何も返せず、使い勝手が悪くなります。

そこで、非同期処理を利用すると、APIの応答を待ちながらも別のタスクを進めることができます。非同期処理を適切に導入すると、ユーザーの操作感を滑らかに保ったり、処理効率を高めたりすることが期待できます。

Promiseとコールバックとの違い

非同期処理と聞くと、多くの方はまずコールバック関数を思い浮かべるかもしれません。コールバック関数では、ある処理が終わった後に呼ばれる関数をあらかじめ渡しておき、完了のタイミングで実行させる仕組みを取ります。しかし、ネストが深くなりやすく、コードが読みにくくなることが課題でした。

これに対して、Promise という仕組みが登場しました。 Promiseは、ある処理が成功したか失敗したかをオブジェクトとして表現し、成功時と失敗時それぞれに応じた処理を.then()や.catch()で行えます。コールバック関数ほどネストが深くならず、エラーハンドリングもしやすいという利点がありましたが、それでも複数のthen()が繋がると読みづらさを感じることがありました。

async/await の登場背景

Promiseをさらに扱いやすく書けるようにした構文が async/await です。実際にはPromiseを裏で使いながら、見た目上は同期的なコードに近い書き方ができます。結果として、複雑なネスト構造を避け、順次実行を行うかのようにスクリプトを書けるため、コードの可読性が高まりやすいといえます。この構文は、JavaScriptを初めて扱う皆さんにとっても、比較的理解しやすいのではないでしょうか。

async/await の基本的な使い方

async 関数の定義

まず、関数の定義に async と付けるところから始めましょう。 asyncが付いた関数の中でのみ、 await を利用できます。以下の例は、非同期処理の結果を受け取った後にメッセージをログに出力するシンプルなコードです。


async function fetchData() {
  return "データ取得完了";
}

async function main() {
  const result = await fetchData();
  console.log(result); // "データ取得完了" と表示されます
}

main();

ここでは、fetchData 関数が返す値を受け取る際、await を使っています。 await fetchData() と書くことで、fetchData が返すPromiseの処理完了を待ち、完了したら変数 result にその値が代入されます。

await の使い方

非同期処理を同期的に扱うかのように書ける、これがawaitの最大の特徴です。 awaitを使うとき、処理が終わるまで次の行に進まないので、直感的に「順番に処理を実行している」感覚でコードが書けます。

ただし、awaitはPromiseを返す関数や値に対してのみ有効です。普通の値にawaitを付けてもエラーにならないケースもありますが、意図しない動作になることが多いので気をつけましょう。複数の非同期処理を連続で書く場合にも、下のように1行ごとにawaitを挟むとわかりやすくなります。


async function processMultipleTasks() {
  const result1 = await fetchDataFromAPI();
  const result2 = await fetchDataFromDatabase();
  const combined = result1 + result2;
  console.log("合計:", combined);
}

processMultipleTasks();

このように書くと、それぞれの処理が完了してから次の処理に進むため、コードの流れが把握しやすいです。

実務での活用シーン

API通信の例

もっともよくある活用例の一つが、外部APIへのリクエストです。フロントエンドではユーザーの操作に合わせて、サーバーからデータを取得して画面を更新することがよくあります。以下は架空のAPIにGETリクエストを行う例です。


async function getUserData(userId) {
  const response = await fetch(`https://example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error("ユーザー情報の取得に失敗しました");
  }
  const data = await response.json();
  return data;
}

async function displayUserData(userId) {
  try {
    const userData = await getUserData(userId);
    console.log("ユーザー名:", userData.name);
    console.log("メールアドレス:", userData.email);
  } catch (error) {
    console.error(error.message);
  }
}

displayUserData(1234);

このコードでは、getUserData 関数がAPIリクエストを行い、結果を返します。それを displayUserData 関数内で await を使って受け取り、ユーザー名やメールアドレスなどを取り出しています。コードの見た目がほぼ同期的なフローになっているので、初心者の皆さんでも読み取りやすくなるのではないでしょうか。

データベース操作

サーバーサイドのJavaScript（Node.jsなど）でも、async/await は活用されています。たとえば、データベースとのやり取りが頻繁に発生するときに、処理の完了を待ってから次の処理を行う場面が続きます。下記の例では、架空のデータベース操作関数を呼び出し、ユーザー情報を取得後に別のテーブルへ書き込む流れを示しています。


async function updateUserData(userId, newData) {
  const existingUser = await db.findUserById(userId);
  if (!existingUser) {
    throw new Error("指定されたユーザーが見つかりません");
  }

  const updatedUser = await db.updateUser(userId, newData);
  console.log("更新後のユーザー情報:", updatedUser);

  const logEntry = await db.insertLog({ userId, action: "update" });
  console.log("ログが追加されました:", logEntry);
}

updateUserData(1234, { name: "New Name" });

複数のデータベース呼び出しを直感的に書けるので、実務でもよく使われています。また、コードの追跡が簡単なため、保守性も高めやすいと考えられています。

よくある疑問と注意点

エラーハンドリング

awaitを用いた処理に失敗がある場合、エラーは基本的に例外（throw）として扱われます。そのため、try...catch構文でまとめてエラー処理を行うことができます。例外が投げられた場合、下記のようにcatchブロックでエラーメッセージなどを扱います。


async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://example.com/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("ユーザーデータの取得中にエラーが発生しました");
    throw error;
  }
}

async function showUserData(userId) {
  try {
    const user = await fetchUserData(userId);
    console.log("ユーザー情報:", user);
  } catch (error) {
    console.error("処理を中断します。", error.message);
  }
}

showUserData(9999);

awaitで受ける非同期処理が複数ある場合でも、１つのtry...catchで一括して管理できるので、コードがスッキリしやすいです。

同期的な処理との組み合わせ

awaitは非同期処理を待つキーワードですが、同期的な処理と同じ関数に混在させることもあります。ただし、全体の流れをよく考えずに書いてしまうと、本来分割して並列実行できる処理まで順番待ちにしてしまうことがあります。その結果、パフォーマンスが低下するケースもあり得ます。

非同期処理を何でもかんでも直列にしてしまうと、時間のかかる処理が増える可能性があります。複数の処理を同時に行いたい場合は、Promise.all() などを検討してみるのも手です。

もう一つ注意が必要なのは、async関数が返す値はPromiseである点です。関数を呼び出す側が、その点を理解していないと「なぜか戻り値がPromiseになっている」という混乱を招く場合があります。呼び出し元でもawaitを使うか、もしくは.then()をつないで処理していく必要があります。

まとめ

非同期処理は、JavaScriptを扱ううえで欠かせない概念です。特に async/await は、Promiseと比べても可読性やメンテナンス性の面で有利な場面が多いと考えられます。実務でもAPI通信やデータベース操作などのシーンで頻繁に利用されており、初心者の皆さんが理解しておくと後々役に立つでしょう。

コールバックやPromiseで実装していた複雑な処理も、async/awaitによってシンプルなコードにまとめられることが多いです。ただし、エラーハンドリングや並列処理の書き方を意識しないと、思ったほどパフォーマンスが上がらなかったり、意図しない動作を引き起こす可能性があります。

それでも、理解しやすくトラブルシューティングもしやすい書き方として、さまざまな場面で活用されています。もし今後、JavaScriptの非同期処理を深めていきたい皆さんにとって、async/awaitは大きな味方になるのではないでしょうか。