Day13.5：非同期処理 練習問題セット
Promise / async / await は、JavaScript を「実務レベル」で扱うための必須スキルです。
ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解説をまとめます。
Promise の基本練習
問題1：Promise を使って1秒後に「完了」と表示する
次の仕様を満たすコードを書いてください。
・1秒後に resolve される Promise を作る
・then を使って「完了」と表示する
解答と解説
const p = new Promise((resolve) => {
setTimeout(() => {
resolve("完了");
}, 1000);
});
p.then((msg) => {
console.log(msg);
});
Promise は「そのうち結果が入る箱」。
resolve が呼ばれた瞬間に then の処理が実行されます。
非同期処理の最も基本的なパターンです。
Promise のエラー処理
問題2：Promise が reject されたら catch でエラーを表示する
次の仕様を満たすコードを書いてください。
・Promise 内で reject(new Error(“失敗”)) を呼ぶ
・catch でエラーメッセージを表示する
解答と解説
const p = new Promise((resolve, reject) => {
reject(new Error("失敗"));
});
p.then((msg) => {
console.log(msg);
}).catch((error) => {
console.log("エラー:", error.message);
});
Promise の失敗は reject で表現されます。
catch を使うことで「非同期のエラー」を安全に扱えます。
これは実務で非常に重要です。
async / await の基本練習
問題3：await を使って Promise の結果を受け取る
次の仕様を満たす async 関数 main を作ってください。
・1秒後に “OK” を返す Promise を await する
・結果を console.log する
解答と解説
function waitOK() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("OK");
}, 1000);
});
}
async function main() {
const result = await waitOK();
console.log(result);
}
main();
await は「Promise の結果が返るまで一時停止」します。
ただし、JavaScript 全体が止まるわけではなく、
「その async 関数の中だけ」が一時停止します。
async / await × try / catch
問題4：await のエラーを try / catch で受け取る
次の仕様を満たすコードを書いてください。
・reject(new Error(“取得失敗”)) を返す Promise を await
・try / catch でエラーを受け取り、メッセージを表示する
解答と解説
function fetchError() {
return new Promise((resolve, reject) => {
reject(new Error("取得失敗"));
});
}
async function main() {
try {
const data = await fetchError();
console.log(data);
} catch (error) {
console.log("エラー:", error.message);
}
}
main();
await は「Promise が reject された瞬間に例外を投げる」ため、
try / catch と組み合わせるのが基本です。
非同期処理のエラーを安全に扱うための必須パターンです。
複数の非同期処理を扱う練習
問題5：Promise.all を使って2つの非同期処理を同時に実行する
次の仕様を満たすコードを書いてください。
・500ms 後に “A” を返す Promise
・700ms 後に “B” を返す Promise
・Promise.all で同時に実行し、結果を配列で受け取る
解答と解説
function fetchA() {
return new Promise((resolve) => {
setTimeout(() => resolve("A"), 500);
});
}
function fetchB() {
return new Promise((resolve) => {
setTimeout(() => resolve("B"), 700);
});
}
async function main() {
const results = await Promise.all([fetchA(), fetchB()]);
console.log(results); // ["A", "B"]
}
main();
Promise.all は「全部終わるまで待つ」仕組みです。
独立した処理を同時に走らせることで、
処理時間を短縮できます（実務で非常に多用されます）。
実務寄りの非同期処理
問題6：ユーザー情報と投稿を順番に取得する
次の仕様を満たすコードを書いてください。
・fetchUser() がユーザー情報を返す
・fetchPosts(user.id) が投稿一覧を返す
・async / await を使って順番に取得し、結果を表示する
function fetchUser() {
return new Promise((resolve) => {
setTimeout(() => resolve({ id: 1, name: "Taro" }), 500);
});
}
function fetchPosts(userId) {
return new Promise((resolve) => {
setTimeout(() => resolve([{ id: 1, title: "投稿1", userId }]), 500);
});
}
解答と解説
async function main() {
const user = await fetchUser();
console.log("ユーザー:", user);
const posts = await fetchPosts(user.id);
console.log("投稿:", posts);
}
main();
「前の結果が次の処理に必要」な場合は、
Promise.all ではなく await を直列に並べます。
非同期処理の“意味”で設計することが重要です。
セキュリティ視点の非同期処理
問題7：エラー内容をユーザーに見せず、ログにだけ残す
次の仕様を満たすコードを書いてください。
・await fetchError() が失敗する
・ユーザーには「読み込みに失敗しました」と表示
・console.error でエラー詳細をログに残す
function fetchError() {
return new Promise((resolve, reject) => {
reject(new Error("内部エラー: DB接続失敗"));
});
}
解答と解説
async function main() {
try {
const data = await fetchError();
console.log(data);
} catch (error) {
console.log("読み込みに失敗しました");
console.error("詳細ログ:", error);
}
}
main();
ユーザーに内部エラーを見せるのは危険です。
内部構造やエラーメッセージが攻撃者のヒントになる可能性があります。
非同期処理でも「ユーザー向け」と「開発者向け」を分けるのが鉄則です。
Day13.5 練習問題まとめ
Promise は「そのうち結果が入る箱」。
async / await は「Promise を待つ処理を読みやすく書くための文法」。
今回の練習問題で、
・Promise の成功と失敗
・async / await の基本
・try / catch との組み合わせ
・Promise.all による並列処理
・実務レベルの非同期設計
・セキュリティを意識したエラー処理
といった、非同期処理の基礎〜応用が身につきました。
