JavaScriptの非同期処理を学んでいると、async や await が出てきます。見た目は少し特殊ですが、結論からいうと async/await は Promise を読みやすく書くための構文 です。
then を何度もつなぐ書き方が読みにくいと感じたときに、async/await が役立ちます。この記事では、Promise との関係を前提から整理しながら、初心者向けにやさしく解説します。
結論: async/await は Promise を自然な順序で書ける仕組みです
| キーワード | 役割 |
|---|---|
async | 関数を非同期関数として定義する |
await | Promise の結果が返るまで待つ |
try/catch | 成功と失敗を分けて書く |
ただし、async/await は Promise を知らなくても使える魔法ではありません。まずは Promise とどうつながっているのかを押さえると理解しやすくなります。
1. まずは Promise を前提として考えましょう
Promise は、あとで結果が返ってくる処理を表すオブジェクトでした。たとえば API通信やタイマー処理など、すぐに終わらない処理で使われます。Promise 自体がまだ曖昧な方は、先に Promiseとは何かを解説した記事 を読むと、async/await の位置づけがつかみやすくなります。
function getUser() {
return Promise.resolve("田中");
}
この getUser() は、すぐに文字列を返しているように見えても、実際には Promise を返しています。async/await は、この Promise を扱いやすくするための書き方です。
2. async と await の基本
async を付けた関数は、必ず Promise を返します。そして、その関数の中で await を使うと、Promise の結果を待ってから次の行へ進めます。
async function showUser() {
const user = await Promise.resolve("田中");
console.log(user);
}
このコードは、上から順に読むだけで処理の流れを追えます。これが async/await の大きなメリットです。
3. Promise の then と比べると違いがわかりやすいです
同じ処理を、まずは Promise の then で書いてみます。
function getUser() {
return Promise.resolve("田中");
}
getUser().then(user => {
console.log(user);
});
これを async/await で書くと、次のようになります。
function getUser() {
return Promise.resolve("田中");
}
async function showUser() {
const user = await getUser();
console.log(user);
}
どちらも意味は同じですが、async/await のほうが「まず取得して、そのあと表示する」という順序が見えやすいはずです。初心者にとって読みやすいのはこの点です。
4. エラー処理は try/catch で書くのが基本です
非同期処理では、成功するときだけでなく失敗するときもあります。async/await では、失敗時の処理を try/catch で書くのが基本です。
function fetchUser() {
return Promise.reject("ユーザー取得に失敗しました");
}
async function showUser() {
try {
const user = await fetchUser();
console.log(user);
} catch (error) {
console.log(error);
}
}
Promise の catch と同じ役割を、async/await では try/catch で表現していると考えると理解しやすいです。
5. async/await は fetch API と相性が良いです
async/await は、API通信のように「結果を待ってから次へ進みたい」処理でよく使われます。たとえば fetch API の基本 と組み合わせると、かなり読みやすいコードになります。
async function loadUsers() {
try {
const response = await fetch("https://example.com/api/users");
const data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
response.json() も Promise を返すため、そこにも await を付けている点が大切です。
6. よくあるつまずき
await は async 関数の中でしか使えません
await だけを単独で使おうとするとエラーになります。まず async function の中で使う、と覚えておきましょう。
async 関数は Promise を返します
async を付けた関数は、見た目が普通の関数でも Promise を返します。ここを知らないと「なぜ戻り値がそのまま取れないのか」で混乱しやすいです。
await はプログラム全体を止めるわけではありません
await は、その関数の中で Promise の結果を待つためのものです。アプリ全体が完全に止まる、と考えると誤解しやすいので注意しましょう。
関連して読みたい記事
- JavaScriptのPromiseとは？使い方を初心者向けにわかりやすく解説
- JavaScriptのfetch APIとは？GETとPOSTの使い方を初心者向けに解説
- JavaScriptのコールバック関数とは？
- JavaScriptのアロー関数とは？
まとめ
async/await は、見た目の新しさに比べて考え方はシンプルです。Promise の「あとで結果が返る」というイメージを持ったうえで、上から順に読める書き方として慣れていくのがおすすめです。