async await 結局、同期・非同期どっちなの？

大Funabashi\.dev（2026/09/12）で発表した資料になります。
https://funabashidev.connpass.com/event/398253/

Transcript

1. async await 結局、同期・非同期どっちなの？ @ike-2525
2. 自己紹介 いけちり 住宅設備メーカー勤務 ~ 2025年９月： ローコード開発エンジニア（OutSystems） 2025年10月 ~： Webアプリケーションエンジニア（Vue.js / TypeScript） 2
3. はじめに 疑問を持ったことはありませんか？？ async ⇒ 非同期の関数につけるもの await ⇒ その非同期関数の完了を待つためのもの 非同期なのに、”待つ”ってどういうこと？ つまり、それは同期では？？ 3
4. 同期処理とは 呼び出し側が呼び出し先の完了や応答を待って 次の処理に進むこと console.log("① 処理開始"); 出力 const data = fetchDataSync(); ① 処理開始 console.log("② データ受け取り:", data); ② データ受け取り:(実際のデータ) console.log("③ 処理終了"); ③ 処理終了 4
5. 非同期処理とは 呼び出し側が呼び出し先の応答を待たずに 呼び出し先と並行して先の処理を実行すること console.log("① 処理開始"); 出力 async function main() { ① 処理開始 const data = await fetchData(); console.log("③ データ受取、処理終了:", data); } ② 処理中... ③ データ受取、処理終了:(実際のデータ) main(); console.log("② 処理中..."); 5
6. 新たな疑問 同期のコードを再度見てみると... console.log("① 処理開始"); const data = fetchDataSync(); console.log("② データ受け取り:", data); 非同期では、③が②に追い越した でも同期では、②と③が逆転しない... console.log("③ 処理終了"); なぜ、この現象が起こるのか？？ 6
7. ブロッキングとは 呼び出し先が完了するまで、 呼び出し側も他の作業ができないこと console.log("① 処理開始"); const data = fetchDataSync(); console.log("② データ受け取り:", data); console.log("③ 処理終了"); ここでブロッキングが発生 呼び出し側も含めて動けないため、 ②・③が逆転することはない 7
8. ノンブロッキングとは 呼び出し先の完了を待たずに、 呼び出し側は他の作業ができること console.log("① 処理開始"); async function main() { const data = await fetchData(); ここがノンブロッキング console.log("③ データ受取、処理終了:", data); } main(); console.log("② 処理中..."); main()を待たずに、先に処理がされる 8
9. 改めて、同期・非同期とは ブロッキング・ノンブロッキングの要素を取り除くと... 同期 ⇒ 処理完了かどうか確認する責任が、呼び出し側にあること 非同期 ⇒ 処理完了を知らせる責任が、呼び出し先にあること 9
10. 4象限にすると... ブロッキング 定番 同期 自分で確認するため、 その場を動けない レア 非同期 その場を動けないが、 相手から通知をしてくれる ノンブロッキング レア 自由に動けるが、 自分で確認する必要がある 定番 相手が通知してくれるので、 その間自由に動ける 10
11. 具体例に変換すると... ブロッキング ノンブロッキング 同期 非同期 11
12. それを踏まえて... 処理のフロー console.log("① 処理開始"); async function main() { const data = await fetchData(); // ここだけ一時停止 console.log("③ データ受取、処理終了:", data); Ⅰ. ①のログを出力 Ⅱ. main()関数を開始 Ⅲ. dataが入るまで待機 ノン ブロッキング } Ⅳ. ②のログを出力 main(); Ⅴ. dataが完了の通知を受け取る console.log("② 処理中..."); 非同期 Ⅵ. ③のログを出力 待っているのは、その関数の"中"だけ 呼び出し元を含めた外側は、待たずに動き続けている 12
13. さらに詳しく見てみると... async ⇒ 呼び出すと、値をそのまま返すのではなく "promise”という容器に包んで返す await ⇒ “promise”の中身が確定するまで待って 中身を受け取る promiseとは、 将来の値を表す入れ物 状態は下記の3つ、 ・pending(保留中) ・fulfilled(成功して確定) ・rejected(失敗して確定) 13
14. await の有無を比較すると... ある場合 ない場合 async function main() { async function main() { const data = await fetchData(); // awaitあり const data = fetchData(); // awaitなし console.log(data); console.log(data); } } main(); main(); console.log("loading…"); console.log("loading…"); 出力： loading… 出力： Promise { <pending> } （データ） 正常に中身を出力 loading… 中身を待たずに 先に出力 14
15. 疑問に戻ると... 非同期なのに、”待つ”ってどういうこと？ ⇒ "待つ(ブロッキング)" と "非同期"は別軸の話 つまり、それは同期では？？ ⇒ 待っているのはその関数の"中"だけ、 外側は待たずに動き続けている 15
16. まとめ async await： 非同期・ノンブロッキングの処理を 同期処理のように書けるようにするものである。 同期・非同期： 完了を「自分で確認する」か「相手が知らせてくれる」か ブロッキング・ノンブロッキング： 待っている間、呼び出し側が「動けない」か「動ける」か 16
17. ご清聴ありがとうございました。 17