async/awaitでfetchをもっと読みやすく書こう｜非同期処理の基本をやさしく解説

JavaScriptで非同期処理を扱うとき、.then() チェーンで書くと、どうしてもネストが深くなって読みにくくなる… そんなときに便利なのが async/await です。

この記事では、fetch APIと組み合わせて「どんなふうに使うのか？」「書き方は？」を中心に、わかりやすく紹介します。

---

async/awaitってなに？

async/await は、JavaScriptで非同期処理をもっとシンプルに書ける構文です。 fetch() のように、処理が終わるまで「待つ」動きを自然な形で書けます。

例えるなら、 .then() は“口約束を順番に聞いていく感じ”。 それに対して await は“ちゃんと終わるまで待ってから次に進む”スタイル。

---

まずは書き方を見てみよう

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

getData();

解説

• async を付けた関数内で await が使えるようになります
• await fetch(...) で「fetchが終わるまで待つ」
• try/catch でエラー処理もスッキリ書ける

:::イラストポイント::: [キャラが「STOP」標識の前で処理待ちしてるイメージ]

---

.then() と比較してみよう

同じ処理を .then() で書くとこんな感じ：

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

もちろんこれでもOKなんですが、

• ネストが深くなって見づらい
• 複雑な処理が増えるとエラーが拾いにくい

そんなときは async/await のほうが見通しがよくて、管理もしやすくなります。

---

fetchでPOSTリクエストも書いてみる

async function sendData() {
  try {
    const response = await fetch("https://api.example.com/send", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        name: "サンプル",
        age: 30
      })
    });

    const result = await response.json();
    console.log("送信成功：", result);
  } catch (err) {
    console.error("送信エラー：", err);
  }
}

sendData();

---

よくある注意点

注意点	内容
awaitはasync関数の中でしか使えない	グローバルでは使えない（※一部ブラウザを除く）
複数のfetchを並列処理したいときは工夫が必要	Promise.all() と組み合わせると◎
エラーハンドリングは必須	try/catchで書くクセをつけよう

---

まとめ：async/awaitでコードがスッキリ

• 非同期処理を直感的に書けるのが async/await の魅力
• fetch APIとの組み合わせでデータの取得・送信も簡単に
• thenチェーンよりも見通しが良く、エラー処理もしやすい

まずは小さな関数から async/await を試してみて、使い心地を体感してみましょう！