非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因

Transcript

1. 非同期処理の迷宮を抜ける 初学者がつまずく構造的な原因 Forkwell Library #115
2. イントロ 自己紹介 name: PADAone work: フロントエンドエンジニア activity: オープンソースのドキュメント活動 Zenn MDN Web Docs Nushell Docs サバイバルTypeScript JavaScript Primer Obsidian hobby: ジム/ 銭湯/ ターミナル改造 最近気になっていること 型理論 圏論 / 代数学 RDB 理論 / 関係代数 関数型DDD Koka 言語 (Effect system) Async Effect / Structured Asynchrony SD(2023):9 月号2 章 本書籍 3-2
3. 今日のゴール 非同期処理が「なぜ難しいのか」を知ってもらう 典型的なトラップを「目的・仕組み・用語」の3 視点で整理 迷わない学習ルートとチェックポイントを持ち帰る
4. 何故、この書籍で非同期処理の記事を書いたのか?
5. 始まりは 時は2022 年頃、 記憶がおぼろげだが 以下のようなTypeScript の非同期処理コードを理解しようとしていた 当時JavaScript については適当にググって個人サイトの記事で勉強をしたことがあるような状態 つまりほぼ知らない状態で、TypeScript については全くの初心者だった type User = { id: number; name: string; }; async function fetchUser(id: number): Promise<User> { const res = await fetch(`/api/users/${id}`); const json = await res.json(); return json; } async function main() { const user = await fetchUser(1); console.log(user.name); }
6. とりあえずTypeScript の勉強してみる サバイバルTypeScript の非同期処理の章 当時はChatGPT もまだ出ていなかったぐらいだったので、ウェブで検索して良さそうなドキュメントを読ん でみるという行為をしていた。 ちょうど検索結果の上位にでできていた「サバイバルTypeScript 」の非同期処理の章を読む事から始めた。 👉 結果: 全然わからん( 挫折) 型ってなに? 文法についての知識がまったくない
7. JavaScript の独学 👉 JavaScript の基本が分かった! (azu さんに感謝)
8. 非同期処理の壁にぶち当たる 🤔 非同期処理ってのがあるのか、でもよく分からないな そこでPromise について調べる… 👉 Promise 分かってきたカモ
9. 実行順序がなぜこうなるのかがわからない この時期から、様々な海外の記事は動画に手を伸ばし始める 以下の動画で「イベントループ」という概念に出会う 👉 ようやくJS のランタイムモデルと非同期処理の全体像が見えた 見る What the heck is the event loop anyway? | Philip Robert What the heck is the event loop anyway? | Philip Robert… … 共有 共有
10. Zenn で記事書いた 非同期処理が理解できない理由はこれだろ、というような https://zenn.dev/estra/articles/js-async-programming-roadmap 👉 結果: 初のバズ記事 『そうだ、学習していった内容を更新していけばより理解できるはず』 色々な記事や動画を調査しまくって内容を反映していけば完全な理解に到達できるはず!
11. そしてZenn で本を書いた
12. いつの間にかSD で記事書いていた SD(2023):9 月号2 章 本書籍 3-2
13. 非同期処理はカジュアルに書けるけど… async/await で手続き的にかけて一見シンプル しかし動作を正しく語るには様々な知識が不可欠 であるが、それを事前に知ることが難しい 初学者は「動く」ことと「理解する」ことのギャ ップで迷子になってしまう type User = { id: number; name: string }; async function fetchUser(id: number): Promise<User> { const res = await fetch(`/api/users/${id}`); return res.json(); } async function main() { const user = await fetchUser(1); console.log(user.name); }
14. 学習上のトラップ（書籍では8 つのポイント） 例えば… async/await が伝播して使われるため何故必要なのかが分かりづらい シンタックスだけ覚えても動作モデルが見えない 異なる仕組みを持つ非同期API をひとまとめにされて混乱しがち 用語・訳語がバラバラで誤解しやすい ランタイムや環境ごとの差異を無視しがち
15. 3 つの観点に圧縮したトラップ 1. 非同期処理のシンタックスを書く目的があいまい 2. 理解に必要な情報が多く学習ルートが霧の中 3. 用語や訳語の罠に混乱させられる
16. 観点1: 目的があいまい JavaScript は言語レベルでシングルスレッド UI スレッドやメインスレッドをブロックしないために非同期API を使う ゴールは「ノンブロッキングでIO 等を進め、後続処理を制御する」こと つまり、目的は非同期API の利用
17. 言語機能 vs 環境API Promise/async 関数は ECMAScript の機能 setTimeout や fetch は 環境の機能(API) 同じ「非同期」に見えても実装も挙動も別物 console.log('[1]'); setTimeout(() => console.log('[3]'), 0); // タスク Promise.resolve().then(() => console.log('[2]')); // マイクロタスク
18. 非同期API の分類 タスクベース: setTimeout , setInterval マイクロタスク直投入: queueMicrotask , MutationObserver Promise-based: fetch , Blob.text など 仕組みが違うと実行タイミングも違う → キューを意識
19. 観点2: 学習ルートが霧の中 シンタックス（型, Promise チェーン, async-await ）だけでは実は情報が不十分 環境知識が必須 ランタイムモデル( コールスタックとイベントループ) タスク/ マイクロタスク/ キューの優先順位 ECMAScript と環境が提供するAPI （ブラウザ, Node, Bun, Deno 等）の境界 ブラウザ環境ならレンダリングパイプラインの知識
21. イベントループの共通ルール タスク1 つ処理 → 直後にマイクロタスクを全て処理 タスクキューは複数、選択規則は環境依存 マイクロタスクキューは基本的に1 つで高優先度 while (tasksAreWaiting()) { // すくなくても１つ以上のタスクキューから( 環境定義のルールで) １つのタスクキューを選ぶ taskQueue = getTaskQueue(); // １つのタスクを処理する task = taskQueue.pop(); execute(task); // １つのマイクロタスクキューにあるすべてのマイクロタスクを処理する while (microtaskQueue.hasTasks()) { microtask = microtaskQueue.pop(); execute(microtask); } }
22. 観点3: 用語の罠 concurrency （並行）と parallelism （並列）は別物 blocking と non-blocking で理解する async 関数と「非同期関数」という一般語を混同しない なるべく訳語より原文で確認する習慣を
23. 同期API vs 非同期API 同期API: ブロッキングで流れは単純 非同期API: ノンブロッキングで効率的だが流れが 見えにくい まず「ブロックする/ しない」で整理すると理解が 進む 上記はDeno 環境のAPI 例 // 同期API （ブロッキング） const data = Deno.readTextFileSync(path); console.log(data); // 非同期API （ノンブロッキング） Deno.readTextFile(path) .then((data) => console.log(data)); console.log(' 次の処理へ');
24. 迷わないためのチェックポイント 目的: どの非同期API で何をノンブロックにしたい？ 仕組み: キュー種別とイベントループの挙動を利用する環境で確認 用語: concurrency/parallelism/asynchronous を英語で整理
25. ヤッター! これで非同期処理の迷宮を抜けられる!
26. 並行処理の広大な世界 非同期処理は大きくは並行処理のテーマに含まれる この迷宮を抜けた? 先には更に広大な迷宮世界が広がっている アプリケーション層 TypeScript/ フレームワーク ランタイムシステム層: OS や、システムコール(kqueue/epoll/IOCP) 非同期IO/ 同期IO の仕組み 環境に含まれる libuv, Tokio(mio) 等 C や Rust などのシステムレベル言語 ハードウェア層: CPU 、メモリ、キャッシュ, I/O デバイス
27. END ありがとうございました