この記事で分かること
async/awaitの基本構文Promiseをより読みやすく書く方法fetchと組み合わせた実用的な書き方try/catchによるエラー処理- 実務での
async/awaitの使いどころ
async / await は、Promise をより直感的で読みやすく扱うための構文で、現代の JavaScript では欠かせない存在です。
この記事では、async / await の基本から fetch との組み合わせ、try/catch を使ったエラー処理、そして実務での使いどころまで、非同期処理を理解するうえで重要なポイントを分かりやすく解説します。
async / await とは？
async / await は、Promise をより簡単に書くための構文です。
非同期処理を「同期処理のように」書けるため、コードが非常に読みやすくなります。
Promise の then / catch を使うとこうなります：
fetch("/api")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
async / await を使うと、これが次のように書けます：
async function load() {
try {
const res = await fetch("/api");
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
}
圧倒的に読みやすい のが async / await の最大のメリットです。
async の基本
関数の前に async を付けると、その関数は
必ず Promise を返す関数になります。
async function hello() {
return "Hello";
}
hello().then(msg => console.log(msg)); // "Hello"
await の基本
await は Promise の完了を待つ ためのキーワードです。
async 関数の中でしか使えません。
const result = await fetch("/api");
await を使うと、非同期処理の結果を変数に代入できます。
fetch と async / await の組み合わせ（最重要）
async function loadData() {
const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
const data = await res.json();
console.log(data);
}
loadData();
fetch は Promise を返すため、await と非常に相性が良いです。
try/catch でエラー処理を統一できる
async / await の最大のメリットの1つが、
エラー処理を try/catch に統一できる ことです。
async function loadData() {
try {
const res = await fetch("/api");
if (!res.ok) {
throw new Error("HTTPエラー: " + res.status);
}
const data = await res.json();
console.log(data);
} catch (err) {
console.error("エラー:", err);
}
}
fetch の「HTTPエラーは例外にならない」という特徴も
try/catch でまとめて扱えるようになります。
複数の非同期処理を順番に実行する
async function process() {
const a = await fetch("/a");
const b = await fetch("/b");
const c = await fetch("/c");
console.log("完了");
}
Promise チェーンよりも圧倒的に読みやすいです。
複数の非同期処理を同時に実行する（Promise.all）
async function loadAll() {
const [a, b, c] = await Promise.all([
fetch("/a"),
fetch("/b"),
fetch("/c")
]);
console.log("3つ同時に完了");
}
「同時に実行 → 全部終わるのを待つ」という処理も簡単に書けます。
async / await に関するよくある質問（FAQ）
await は async 関数の外で使えますか？
使えません。await は async 関数の中でのみ使用できます。
async 関数は何を返しますか？
必ず Promise を返します。return の値は Promise.resolve() で包まれます。
fetch のエラーは try/catch で捕まえられますか？
ネットワークエラーは捕まえられますが、HTTPエラーは自分でチェックする必要があります。
Promise と async / await のどちらを使うべきですか？
基本は async / await が推奨されます。コードが読みやすく、エラー処理も統一できるためです。
まとめ
async / await は Promise をより簡単に扱うための構文で、
fetch と組み合わせると最強 です。
async→Promiseを返す関数になるawait→Promiseの完了を待つtry/catchでエラー処理を統一できるfetchのレスポンス処理が読みやすくなる
非同期処理を扱う現代の JavaScript では、
async / await は必須のスキルです。
