1時間半で克服するJavaScriptの非同期処理/async_javascript_kokufuku

Transcript

1. 1時間1時間半で克服する JavaScriptの非同期処理 〜Promise, async/await〜
2. 自己紹介 - 名前: 阿部 真之 - 仕事: 株式会社ゆめみ でAndroidエンジニアしてます - 最近はサーバサイド Kotlinの仕事も始めました - 趣味 - コーヒー、ビール、アニメ、ゲーム、読書、 etc… - Twitter: @marchin_1989
3. アジェンダ - 同期処理、非同期処理とは - コールバックによる非同期処理 - Promise - async/await - まとめ
4. 対象者 - JavaScriptでプログラミングしたことがある方 - Promiseやasync/awaitによる非同期処理があまり理解できていないと感じる方
5. よくあるつまずきポイント - なぜか処理が呼び出されなかったり、期待する順番で動作させることができない - いつ非同期処理が必要になるのかわからない - いつawaitをつけるべき？
6. 同期処理、非同期処理とは？
7. 同期処理 処理Aから順番に実行される。 次の処理(処理B)は、前の処理(処理 A)が終わるまで実行されない。
8. 同期処理 非同期処理 前の処理(処理B)が完了する のを待たずに、次の処理 (処理 C)を実行できる。
9. なぜ非同期処理が必要なのか？
10. なぜ非同期処理が必要なのか？（同期処理だと困ること） - 同期処理だと、実行中の処理が終わるまで、次の処理を実行できない。 - 長時間かかるような処理を実行すると、次の処理をすぐ実行したくてもできない - 例1: Appサーバで、HTTPリクエストごとにデータベースにアクセス (I/O処理)し、完了待ちしてるとき に、別のHTTPリクエストを捌けない - 例2: ブラウザでAPIアクセスしている間に、ユーザがボタンをクリックしても反応しない
11. なぜ非同期処理が必要なのか？（非同期処理にすると） - 処理をブロックせず、次の処理を実行できる。 - 非同期処理を使って効率的に処理を実行できる。
12. JavaScriptの非同期処理
13. - JavaScriptはシングルスレッドで実行される - 普通に書いていると、同時に 1つのことしか実行できない。 (同期処理) JavaScriptの非同期処理
14. - JavaScriptはシングルスレッドで実行される - 普通に書いていると、同時に 1つのことしか実行できない。 (同期処理) - 非同期に処理されるAPI(以降、非同期API)を利用することで、非同期処理を実現 できる JavaScriptの非同期処理 非同期APIの呼び出し。 非同期に実行できるように実装 されている。
15. - タイマー - setTimeout - setInterval - I/O - fs.readFile - fetch - … JavaScriptでの非同期APIの例
16. - タイマー - setTimeout - setInterval - I/O - fs.readFile - fetch - … JavaScriptでの非同期APIの例 => コールバックを受け取るものや、Promiseを返すものなど違いがあり、 たくさんあるが、利用するときはドキュメントをしっかりみるべし
17. JavaScriptの非同期処理デモ
18. - 非同期APIは、コールバック関数を最後の引数に取り、非同期処理の終了時にコー ルバックが呼び出される - コールバックを登録しておいて、処理の完了後に呼び出される（重要） - 昔は非同期処理といえば、コールバックを使うしかなかった - コールバック地獄 - コールバックの結果を使おうとすると、ネストが深くなって読みづらくなる コールバックの非同期処理
19. - JavaScriptはシングルスレッドで実行される - 普通に書いていると、同時に 1つのことしか実行できない。 (同期処理) - 非同期に処理されるAPI(以降、非同期API)を利用することで、非同期処理を実現 できる JavaScriptの非同期処理（再掲）
20. - JavaScriptはシングルスレッドで実行される - 普通に書いていると、同時に 1つのことしか実行できない。 (同期処理) - 非同期に処理されるAPI(以降、非同期API)を利用することで、非同期処理を実現 できる JavaScriptの非同期処理（再掲） JavaScriptはシングルスレッドで、 同時に1つのことしか実行できない のに、なんで「非同期 API」というも のを呼ぶだけで非同期処理ができ る？
21. イベントループ（ざっくり）
22. イベントループ JavaScript関数の実行のされ方を みる。 まず、同期処理(非同期APIを利用し ない場合)。
23. イベントループ 呼び出された関数はコールスタック に積まれ、実行される。
24. イベントループ 実行が完了すると、ポップされる。
25. イベントループ
26. イベントループ
27. イベントループ
28. イベントループ
29. イベントループ 非同期APIの場合。 デモでみたファイル読み込みの例。
30. イベントループ
31. イベントループ
32. イベントループ
33. イベントループ JavaScriptの実行環境からオフロードされ、別スレッドで 実行される。 JavaScriptのメインスレッドとは別の場所で実行される。 ブラウザはWebAPIsが対応。
34. イベントループ 完了時のコールバック（の 参照）が渡される。
35. イベントループ 非同期APIの呼び出しは、コールス タックからすぐにポップされ、次の処 理が呼び出される。
36. イベントループ
37. イベントループ ファイルの読み込みが終わると ...
38. イベントループ メッセージキューにコール バックが追加される
39. イベントループ 【重要】コールスタックが空 になると...
40. イベントループ イベントループが、メッセージキュー にあるコールバックを、コールスタッ クに追加する
41. イベントループ ファイルの読み込み完了後のコール バックの処理が実行される
42. 以上、ざっくりイベントループでした
43. Promise
44. Promiseとは - Promiseオブジェクトは、時間のかかる処理（非同期処理）を呼び出して、いつか結 果を返すと約束するもの。 - 結果は、成功 or 失敗 で返る。 - Promiseのthenメソッドを使って、非同期処理が完了し、成功が返ってきたときの処 理を、コールバック関数で登録できる。 - 失敗時の処理はcatchメソッドで登録。 - Promiseを使うことで、コールバック関数による非同期処理のネストを解消できる。 - 標準ライブラリや、サードパーティのライブラリがPromiseを返すAPIを提供している
45. Promiseのイメージ メインコード 非同期API
46. Promiseのイメージ メインコード 非同期API
47. Promiseのイメージ メインコード 非同期API
48. Promiseのイメージ メインコード 非同期API
49. Promiseのイメージ メインコード 非同期API then(成功時のコールバック ) catch(失敗時のコールバック )
50. Promiseのイメージ メインコード 非同期API
51. Promiseのデモ
52. async/await
53. async/await - async/awaitを利用することで、Promiseチェーンを使うよりすっきり書ける - ただし、Promiseの上に成り立っているので、Promiseの理解は必須 - asyncキーワード - 関数を非同期関数にするキーワード - 返り値が暗黙的にPromiseになる - awaitキーワード - async関数の中でしか使えない - Promiseオブジェクトの前につける - Promiseが「成功(resolve)」を返すまで処理が中断でき、同期的（コードの順番）にかける（ブロッキ ングするわけではない） - 成功時の結果を受け取れる（ thenのコールバックの引数を返す）
54. async/awaitのデモ
55. まとめ - JavaScriptの非同期処理 - 非同期API（最後の引数にコールバックを渡す形式） - Promise - async/await - 基本はasync/awaitを使いましょう
56. 参考 - Overview of Blocking vs Non-Blocking | Node.js - https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/ - The Node.js Event Loop, Timers, and process.nextTick() - https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ - 非同期 JavaScript - ウェブ開発を学ぶ | MDN - https://developer.mozilla.org/ja/docs/Learn/JavaScript/Asynchronous - What the heck is the event loop anyway? | Philip Roberts | JSConf EU - https://www.youtube.com/watch?v=8aGhZQkoFbQ - JavaScript Visualized Series' Articles - DEV Community - https://dev.to/lydiahallie/series/3341
57. ご清聴ありがとうございました！