JavaScript入門 - 非同期処理の基礎
非同期処理の基礎
Promiseやasync/awaitを使って非同期処理を扱う方法を学びます。
タスク
Promiseの実装
Promiseを使って非同期処理を実装してみましょう。
async/awaitの活用
async/awaitを使って非同期処理を簡潔に記述してみましょう。
イベントリスナー
ボタンクリックで非同期処理を実行してみましょう。
出力の表示
非同期処理の結果を画面に表示してみましょう。
ヒント
Promiseを使って非同期処理を実装し、async/awaitで簡潔に記述してみましょう。
参考コード
// Promiseの例
const promiseBtn = document.getElementById("promiseBtn");
const asyncBtn = document.getElementById("asyncBtn");
const output = document.getElementById("output");
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
promiseBtn.addEventListener("click", function() {
output.textContent = "Promise実行中...";
delay(2000).then(() => {
output.textContent = "Promise完了！";
});
});
// async/awaitの例
asyncBtn.addEventListener("click", async function() {
output.textContent = "async/await実行中...";
await delay(2000);
output.textContent = "async/await完了！";
});