---
title: "async/awaitとは？非同期処理をわかりやすく書くJSの基礎"
description: "APIからデータを取得するような「待ちが発生する処理」でコードが読みにくくなる悩みを解消するのがasync/awaitです。非同期処理の考え方からこの構文が生まれた背景まで、つまずきポイントを押さえて解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/async-await-term"
markdown: "https://giga-site.com/articles/async-await-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# async/awaitとは？非同期処理をわかりやすく書くJSの基礎

サーバーからデータを取ってくるような「待ち時間のある処理」は、JavaScriptでは少し書き方にコツがいります。それを読みやすく整えてくれるのがasync/awaitです。非同期処理の考え方から、なぜこの構文が便利なのかまで、つまずきやすい点を押さえながら解説します。

> Source HTML: https://giga-site.com/articles/async-await-term
> Article index: https://giga-site.com/articles/index.md

## そもそも非同期処理とは

非同期処理とは、ある処理の完了を待っている間も、他の処理を止めずに進められる仕組みのことです。たとえばサーバーへの問い合わせは結果が返るまで時間がかかりますが、その間ページが固まらないのは非同期で動いているからです。

一方で「結果が返ってきてから次に進みたい」という場面も多くあります。この順序の制御を、読みやすく書けるようにしたのがasync/awaitです。

## asyncとawaitの役割

asyncは関数の前に付けるキーワードで、その関数が非同期処理を含むことを示します。async関数の中では、awaitというキーワードが使えるようになります。

awaitは「この処理が終わるまでここで待つ」という意味です。awaitを付けると、結果が返ってくるまで次の行に進まず、返ってきた値をそのまま受け取れます。これにより、本来コールバックやthenでつなぐ必要のあった処理を、上から下へ素直に読める形で書けます。

## 実務ではどこで関係する？

async awaitは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

async/awaitについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## Promiseとの関係

async/awaitは、Promiseという仕組みの上に成り立っています。Promiseは「いつか結果が返ってくる約束」を表すオブジェクトで、awaitはそのPromiseの結果を取り出す役割を持ちます。

つまりasync/awaitはPromiseを置き換えるものではなく、Promiseを扱いやすく書くための糖衣構文です。内部で何が起きているかを知っておくと、エラーが出たときに原因をたどりやすくなります。

## 基本的な書き方の手順

データ取得のような非同期処理をasync/awaitで書くときの流れを整理します。

1. 関数を定義するときに先頭へ async を付ける
2. 時間のかかる処理の前に await を付けて結果を待つ
3. 返ってきた値を変数に受け取り、続きの処理で使う
4. 失敗に備えて try と catch で囲み、エラーを拾う
5. 呼び出す側でも必要に応じて await や then で結果を待つ

## エラー処理とよくある誤解

非同期処理は通信失敗などで途中で止まることがあります。awaitを使うときはtry/catchで囲み、失敗したときの処理を用意しておくのが基本です。これを怠ると、エラーが握りつぶされて原因がわかりにくくなります。

よくある誤解は、awaitを付ければ何でも待てると思い込むことです。awaitが意味を持つのはPromiseを返す処理に対してだけです。また、async関数は必ずPromiseを返すため、呼び出し側でも結果を待つ意識が必要です。

## 作った非同期処理を試してもらう

async/awaitを使いこなせると、データの取得や保存といった実用的な機能が読みやすいコードで書けるようになります。Web開発で避けて通れない基礎なので、小さな例を繰り返し動かして慣れるのが近道です。

通信を含むサンプルページを誰かに見てもらいたいとき、HTMLやJavaScriptをまとめて共有URLにできると確認が早く進みます。ギガサイト便ならドロップするだけで一時公開でき、社内だけで見せたい場合はメール認証や会社ドメイン認証を併用できます。

## よくある質問

### async/awaitとPromiseのthenはどちらを使うべきですか？

どちらも同じ非同期処理を扱えますが、処理が連続する場合はasync/awaitの方が上から下へ読みやすくなります。一方、複数の処理を同時に走らせたいときはPromiseの仕組みと組み合わせると効率的です。場面に応じて使い分けます。

### awaitはどこでも使えますか？

awaitはasync関数の中で使うのが基本です。async以外の通常の関数の中では使えません。近年はトップレベルで使える環境もありますが、まずはasync関数の中で使うものと覚えておくと安全です。

### 複数の非同期処理を同時に待つには？

それぞれにawaitを順番に付けると一つずつ待ってしまい遅くなります。同時に走らせたいときは、複数のPromiseをまとめて待つ仕組みを使うと、全体の待ち時間を短縮できます。

### エラーが出ても画面に何も表示されないのはなぜですか？

try/catchで囲っていない場合、非同期処理のエラーが拾われず静かに失敗していることがあります。catchの中でメッセージを表示する、コンソールに出すなどの処理を入れて、何が起きたか見える状態にしておきましょう。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [DOMとは？HTMLをJavaScriptが操作する仕組みをやさしく解説](https://giga-site.com/articles/dom-term/index.md)
- [イベントリスナーとは？クリックなどに反応する仕組みの基礎](https://giga-site.com/articles/event-listener-term/index.md)
- [Fetch APIとは？JavaScriptでデータを取得する仕組みの基礎](https://giga-site.com/articles/fetch-api-term/index.md)
- [JSONとは？データをやり取りする共通フォーマットの基礎](https://giga-site.com/articles/json-term/index.md)
- [SPA（シングルページアプリ）とは？仕組みと特徴](https://giga-site.com/articles/what-is-spa/index.md)
- [async・deferとは？scriptの読み込みタイミングの違い](https://giga-site.com/articles/what-is-async-defer/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "async/awaitとは？非同期処理をわかりやすく書くJSの基礎",
  "description": "APIからデータを取得するような「待ちが発生する処理」でコードが読みにくくなる悩みを解消するのがasync/awaitです。非同期処理の考え方からこの構文が生まれた背景まで、つまずきポイントを押さえて解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/async-await-term",
  "url": "https://giga-site.com/articles/async-await-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "async/awaitとPromiseのthenはどちらを使うべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "どちらも同じ非同期処理を扱えますが、処理が連続する場合はasync/awaitの方が上から下へ読みやすくなります。一方、複数の処理を同時に走らせたいときはPromiseの仕組みと組み合わせると効率的です。場面に応じて使い分けます。"
      }
    },
    {
      "@type": "Question",
      "name": "awaitはどこでも使えますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "awaitはasync関数の中で使うのが基本です。async以外の通常の関数の中では使えません。近年はトップレベルで使える環境もありますが、まずはasync関数の中で使うものと覚えておくと安全です。"
      }
    },
    {
      "@type": "Question",
      "name": "複数の非同期処理を同時に待つには？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "それぞれにawaitを順番に付けると一つずつ待ってしまい遅くなります。同時に走らせたいときは、複数のPromiseをまとめて待つ仕組みを使うと、全体の待ち時間を短縮できます。"
      }
    },
    {
      "@type": "Question",
      "name": "エラーが出ても画面に何も表示されないのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "try/catchで囲っていない場合、非同期処理のエラーが拾われず静かに失敗していることがあります。catchの中でメッセージを表示する、コンソールに出すなどの処理を入れて、何が起きたか見える状態にしておきましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```