JavaScriptの非同期処理をやさしく解説！async/await入門ガイド

「asyncとawaitって何？Promiseと何が違うの？」 JavaScriptを書いていて、こんな疑問を抱いたことはありませんか？

今回は、JavaScriptで非同期処理を書くときによく使われるasync/awaitについて、初心者の方にもわかりやすく解説していきます。使い方の基本から、よくあるエラーの原因と対処法まで、この記事でしっかり押さえていきましょう！

---

async/awaitとは？

asyncとawaitは、JavaScriptで非同期処理（時間がかかる処理）をシンプルに書けるようにする仕組みです。

✅ そもそも非同期処理って？

JavaScriptは基本的に上から順にコードを実行していきます。

でも、

• データをAPIから取得する
• ファイルを読み込む
• サーバーにアクセスする など、すぐに終わらない処理があると、その完了を待ってると他の処理が止まってしまいます。

そこで登場するのが非同期処理。待たずに次の処理を進められるようにする仕組みです。

---

async/awaitの基本

使い方の例

async function getData() {
  try {
    const res = await fetch("https://api.example.com/data");
    const json = await res.json();
    console.log(json);
  } catch (err) {
    console.error("エラーが発生しました", err);
  }
}

解説

• asyncを関数につけると、その関数は非同期関数になります
• awaitを使うと、Promiseの完了を待ってから次に進むようになります
• try/catchでエラーハンドリングもバッチリ

---

Promiseとの違いって？

非同期処理は、これまでもPromiseを使って書く方法がありました。

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("エラー", err));

これはこれでOKですが、.then().then().catch()が続くと見づらくなってきます。

async/awaitは、見た目が同期処理っぽくなるので、読みやすくて管理しやすいんです。

---

よくあるエラーと対処法

エラー内容	原因	対処方法
await is only valid in async function	asyncなしでawaitを書いている	asyncを関数の前につける
Unexpected token 'await'	トップレベル（関数外）でawaitを使っている	関数内に処理を移す
ネットワークエラー	APIのURL間違いや通信障害	URLを確認、CORSエラーも要チェック

---

まとめ：まずは1回書いてみよう

• asyncは関数の前につけるだけでOK
• awaitでPromiseの完了を待てる
• 非同期処理がスッキリ書けて、コードが読みやすくなる！

最初は少し戸惑うかもしれませんが、慣れれば手放せない仕組みです。 実際にfetchやAPI通信のコードを書きながら、少しずつ体感してみましょう。

---