JavaScriptの「async/await」は同期？非同期？開発現場での使い方を実例で解説！

はじめに

JavaScriptで非同期処理を扱ううえで欠かせないのが async / await。
一見「処理が止まっている」ように見えるのに、実際には非同期処理という、この2つのキーワードは初心者だけでなく中級者でも混乱しがちです。

この記事では、async/await の本質を、実務的なユースケースを交えて、分かりやすく解説します。

async / await とは？

`async`：

関数に付けることで、その関数が 常に Promise を返す関数になる。

async function sample() {
  return 42;
}
// sample() は Promise を返す

`await`：

Promiseが解決（fulfilled）されるのを「待ち」、結果を取り出す構文。async 関数内でしか使えません。

const result = await someAsyncFunction();

一番大事な理解：「非同期なのに止まる」理由

結論から言えば、await は「処理の流れ」を一時停止しますが、JavaScriptのシングルスレッド処理をブロックすることはありません。
つまり：

同期的に書ける（コードの見た目）
非同期的に実行される（中の仕組み）

これが、async/await の最大の特徴です。

実践例：ユーザーと投稿を順番に取得

目的：

サーバーからユーザー情報を取得
そのユーザーの投稿一覧を取得
投稿を表示する

async/awaitを使った実装：

async function loadUserData() {
  try {
    const userRes = await fetch("/api/user");
    const user = await userRes.json();

    const postsRes = await fetch(`/api/posts?userId=${user.id}`);
    const posts = await postsRes.json();

    console.log("投稿一覧", posts);
  } catch (err) {
    console.error("通信エラー:", err);
  }
}

loadUserData();

実行の流れ

console.log("① ユーザー情報を取得します");

loadUserData();

console.log("② 画面描画など他の処理を継続します");

コンソール出力例：

① ユーザー情報を取得します
② 画面描画など他の処理を継続します
投稿一覧 [...] ← 数秒後に出力

await によって関数の内部では処理が一時停止しているにも関わらず、他の処理（ログ出力やUI描画）は並行して進んでいることがわかります。

UIとの連携でさらに実感

async function fetchAndRender() {
  showLoading(); // 「読み込み中...」表示

  const userRes = await fetch("/api/user");
  const user = await userRes.json();

  const postsRes = await fetch(`/api/posts?userId=${user.id}`);
  const posts = await postsRes.json();

  hideLoading(); // ローディング終了
  renderPosts(posts); // 投稿を画面に表示
}

「awaitがなければ」通信完了までUIがフリーズするため、UXが著しく低下します。

並列処理も可能：Promise.allとの併用

async function fetchAll() {
  const [userRes, configRes] = await Promise.all([
    fetch("/api/user"),
    fetch("/api/config")
  ]);

  const user = await userRes.json();
  const config = await configRes.json();

  console.log("ユーザー:", user);
  console.log("設定:", config);
}

よくある誤解

誤解	正しい理解
`await` は同期処理？	違います。非同期的に止まっているだけです。
`async` 関数は普通の関数？	常に `Promise` を返します。
`await` はどこでも使える？	`async` 関数の中でのみ使えます。

まとめ

項目	説明
見た目は同期的	`await` によって順番通りに処理が書ける
実体は非同期	イベントループにより他の処理をブロックしない
UIやAPI処理に最適	非同期通信・UX向上・複数API連携に有効

最後に

async/await は、非同期処理をより直感的かつ安全に扱える強力な手段です。
Promiseやコールバック地獄に苦しんだ方も、この構文をマスターすることで、保守性の高いコードが書けるようになります。