まとめ ~ JavaScript の非同期を理解する
本記事は、個人的に学んだ JavaScript の非同期処理についてまとめた記事シリーズのまとめとなります。
まだ読んでいない方は、よければぜひご覧ください。
- 第 0 章 はじめに
- 第 1 章 JavaScript の歴史と特徴
- 第 2 章 JavaScript 実行モデル (ECMAScript が定める実行モデル)
- 第 3 章 ブラウザでの JavaScript の実行 (HTML Living Standard が定める実行モデル)
- 第 4 章 実装レベルで見る JavaScript の実行 (V8 & Chromium)
- 第 5 章 非同期処理の基本 (Callback)
- 第 6 章 非同期処理の基本 (jQUery Deferred)
- 第 7 章 Promise と async/await
- 第 8 章 終わりに
まとめ
ここまで 3 ヶ月ほど、JavaScript の非同期処理について学んできました。
当初は、async / await の書き方がなんとなくわかる。程度の理解しかありませんでしたが、ここまで勉強することで、JavaScript の非同期処理の基礎的な仕組みやそのベースとなっている概念。
また、内部的にどのように動いているのかといった部分の基礎を学ぶことができました。
そういった知識の上で、WebAPI, Promise, async/await を学んだことにより、各メソッドがなぜそのような挙動をするのか、といったことが概念的に理解できるようになりました。
詳細な仕様や挙動はまだまだ理解できていない部分も多いですが、ベースとなる概念を抑えることができたため、今後、新しい知識を学ぶ際にも、比較的スムーズに理解することができるのではないかと思っています。
また、この記事を書くにあたり、さまざまな記事や動画を参考にしながら、非同期処理を勉強させていただきました。
おかげさまで、これまであまりよくわかっていなかった非同期処理の仕組みについて、基本的なことが理解できたと感じています。
参考資料として記載しているものの他にも、さまざまな動画や記事を拝見させていただきました。改めてこの場を借りて、お礼を申し上げます。ありがとうございました。
各記事のまとめ
以下は各記事の内容のまとめとなります。
第１章 JavaScript の歴史と特徴
- JavaScript は、1995 年に登場したプログラミング言語です。
-
agentやrealmといった概念、そして シングルスレッドでの実行を前提とします(ブラウザ)
第２章 JavaScript 実行モデル (ECMAScript が定める実行モデル)
- JavaScript はそれぞれが Task として処理、実行されます
- キューとスタック、イベントループによる Task 処理が行われます
- Promise は、非同期処理として優先的に処理される必要があると定義されています
第３章 ブラウザでの JavaScript の実行 (HTML Living Standard が定める実行モデル)
- 実行コンテキストと呼ばれるものがあり、その中で実行されます
- 実行コンテキストはメモリに保存され、必要に応じてスタックに積まれます
- マイクロタスクと呼ばれる、一部の処理だけを優先して行う機構が定義されています
第４章 実装レベルで見る JavaScript の実行 (V8 & Chromium)
- ブラウザは、JavaScript の実行以外にも、画面描画や I/O などさまざまな処理を行い、イベントループで制御します
- JavaScript の実行では、通常のタスクキューとマイクロタスクキューがあり、マイクロタスクはスタックが空になるたびに優先的に実行されます
- 結果として、マイクロタスクは、メインスレッドの実行をブロックせず、処理が完了したタイミングで、マイクロタスクとして優先処理されるため、非同期処理として扱うことができます
第５章 Callback 関数による非同期処理
- Callback 関数を使った非同期処理は主に、WebAPI を利用したものです
- マイクロタスクは利用せず、WebAPI が処理を完了した時点で、Callback 関数を Task として登録、実行されます
- 利用時に、Callback 地獄と呼ばれるネスト構造が発生しやすくなります
第６章 jQuery Deferred
- jQuery は、JavaScript のライブラリとして、非同期処理を扱うための Deferred オブジェクトを提供しています
- これまで扱いづらかった、非同期処理のステータスと処理結果を、より直感的に扱うことができます
- しかし、非同期処理の結果はチェーンとして記述するため、複雑な条件分岐を扱う場合にはネスト構造になりやすくなります
第７章 Promise と async/await
- Promise は JavaScript が ES2015 にて導入した、非同期処理を扱うオブジェクトです。jQuery Deferred と類似しており、チェーン構造による処理の記述が必要です
- ES2017 での async / await 導入により、さらに直感的に非同期処理を記述することができるようになりました
第 0 章 はじめに
- 第 0 章ですが、書いたのは一番最後になります。これまで学んだことをもとに、JavaScript の非同期処理について理解できているかどうかをチェックするクイズを作りました。
- 全 10 問ですが、3 ヶ月前の自分であれば、おそらく 1 問も解けなかったと思います。もしよかったらぜひ皆さんも解いてみてください。