JavaScript レッスン11
非同期処理
コールバック、Promise、async/awaitで非同期処理をマスターしよう
非同期処理とは
JavaScriptはシングルスレッドですが、非同期処理により時間のかかる処理（API通信、タイマーなど）を メインスレッドをブロックせずに実行できます。非同期処理の進化の歴史を学びましょう。
コールバック— 最も基本的な方法（コールバック地獄に注意）Promise— コールバックを改善した仕組みasync/await— Promiseを同期的に書ける構文Promise.all— 複数の非同期処理を並列実行Promise.race— 最初に完了したものを取得
コールバックとPromise
setTimeoutを使ってコールバックとPromiseの違いを理解しましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
5 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
async/await・Promise.all・Promise.race
モダンな非同期処理の書き方を学びましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
6 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
非同期処理を使ったローディング表示を作ってみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
5 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。