- これまで学習してきた「同期処理・非同期処理の流れの理解」を確実なものにする
- GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール
課題内容は以下の課題レポジトリに記述しています。
GitHub : js_excercise_for_frontend_5
目次
課題解決するために参考になる資料
【JavaScript】コールスタックとは【関数実行の順番を理解する】
https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/what-is-the-call-stack/
非同期処理の理解をする前に、同期処理(同期関数)がそもそもどのような流れで実行されているのかを理解する必要があります。
そこで重要な概念なのが「スタック」になります。
上記記事で「関数が実行されるときのスタック内の動き」を図を使って解説しています。
「スタックって何？」「関数が実行されている流れをうまく説明できない」といった方は上記記事を参考にすると良いです。
【JavaScript】非同期関数を含む処理の流れ【キューとは】
同期関数では「スタック」の理解が重要だと前の章で説明しました。
非同期関数の場合は「スタック」に加えて「キュー」の理解も重要になってきます。
「スタック」と「キュー」がどのように連動しているのかを理解するのが、非同期処理の流れを理解するときのキモとなります。
「キューって何？」「スタックとキューがどのように連動しているかわからない」といった方は上記記事を参考にして頂けたらと思います。
【JavaScript】setTimeoutを使った非同期処理
https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/use-the-settimeout-method/
これまで学習してきた「スタック」と「キュー」の理解をより強固にするために、非同期メソッドである「setTimeout」メソッドを使った処理の流れを上記記事で図を使いながら解説しました。
特に「setTimeout」に「0ミリ秒」をセットしたときの処理の流れが理解できると、非同期処理の流れの理解がだいぶ深まってきていると言っても良いでしょう。
「setTimeout」に「0ミリ秒」をセットしたときの処理の流れは、上記記事で図を使いながら解説しています。
質問・答え合わせ受け付けてます
課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。
お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。