JavaScriptの非同期処理
•
0 likes•41 views
JavaScriptの非同期処理について解説したプレゼンテーションです。 システム開発チームにおける技術研修の目的で作成しました。 JavaScriptランタイムの「イベントループ」について触れた上で、コールバックと"Promise"の仕組みを説明しています。 "async/await"キーワードについても簡単にまとめています。 ！お願い！ スライド内のリンクおよび参考文献につきまして、本PDFファイルをダウンロードの上、ご参照ください。
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (8)
Featured
Featured (20)
JavaScriptの非同期処理
- 2. 目次 §1 JavaScriptの非同期処理 §1.1 コールバックについて ➢ イベントループ ➢ setTimeout()の例 §1.2 委譲（delegate）について ➢ イベントハンドラの登録 ➢ Promiseの使用例 ➢ Promiseの実装例 §1.3 async/awaitについて ➢ 糖衣構文（シンタックスシュガー） 参考文献
- 3. 目次（再掲） §1 JavaScriptの非同期処理 §1.1 コールバックについて ➢ イベントループ ➢ setTimeout()の例 §1.2 委譲（delegate）について ➢ イベントハンドラの登録 ➢ Promiseの使用例 ➢ Promiseの実装例 §1.3 async/awaitについて ➢ 糖衣構文（シンタックスシュガー） 参考文献
- 4. §1 JavaScriptの非同期処理 プログラムを、１行ずつ完了するまで待ちながら進める"同期処理"に対して... 待ち時間が発生するような処理（ファイルの読み書き、HTTP通信など）の完了を待たず、 続く行のプログラムを実行した後で結果を処理するテクニック。 ➢ 未完了の行が発生しても、プログラムの実行を進める仕組み ➢ 未完了だった行の処理が完了した後に結果を処理する仕組み が必要。 JavaScriptはシングルプロセス・シングルスレッドで動作するプログラミング言語。 ⚠︎ 注意 ： 非同期処理を実現するための仕組みは、必ずしも他のプログラミング言語と 同じでない！！ JavaScriptランタイムの動作原理を学び、非同期処理を支える言語機能を活用することで 理解を深めていく。
- 5. §1.1 コールバックについて 関数のうち、他の関数に引数として渡され、 任意の処理を実行するもの。 同期処理・非同期処理を問わず利用される。 非同期処理においては、完了後の結果を 処理するためのプログラムをコールバック 関数にまとめ、適切なタイミングで実行する。 コールバック関数が入れ子状に宣言されて いくと、必要以上にネストの深いプログラムが 作成されること（"コールバック地獄"）がある。 できるだけ回避されるよう工夫する。 参考 ： mdn web docs - Callback function
- 6. ➢ イベントループ JavaScriptランタイムは、マシンのメモリ上に "メッセージキュー"（以下、キュー）を用意し、 関数と紐づいたデータを管理している。 ➢ "スタック"と呼ばれる領域では、実行中の 関数の引数とローカル変数 ➢ "ヒープ"と呼ばれる領域では、オブジェクト が管理されている。 キューは常にループ処理で監視されており、 データが存在すると、FIFO（先入れ先出し） 方式で、紐づいた関数が実行されていく。 JavaScriptプログラムを実行するキューのループ制御を"イベントループ"と呼ぶ。 非同期処理においては、待ち状態の処理が完了したタイミングで、コールバック関数と 紐づいたメッセージがキューに追加され、既存のメッセージの後に処理される。 参考 ： mdn web docs - The event loop (https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop)
- 7. ➢ setTimeout()の例 非同期関数のひとつである"setTimeout()"を 使用して、イベントループの動作を確認する。 ➢ setTimeout()を実行 ➢ 第１引数 ： コールバック関数 ➢ 第２引数 ： 遅延（０ミリ秒） ➢ whileループを１秒実行 setTimeout()に渡したコールバック関数は 即時メッセージキューに追加されるが、 whileループ以降の処理が完了するのを 待って実行される。
- 9. ➢ イベントハンドラの登録 イベント発生時に、委譲（delegate）を用いて 登録されたハンドラを実行する。 ➢ コントローラーオブジェクトに、 イベントハンドラを定義する ➢ ボタンオブジェクトに、クリック イベント発生時のハンドラを 登録する ➢ イベント発生時、ボタンオブジェクトに 登録されたハンドラを順番に実行する
- 10. ➢ Promiseの使用例 2つのコールバック関数（resolve/reject）を 引数に持つ関数を、コンストラクタに渡す。 Promiseをインスタンス化した後のプログラムで "then"メソッドが呼び出されている場合... ➢ resolveメソッドは、"then"メソッドの第1引数に 渡されたコールバック関数を実行する ➢ rejectメソッドは、"then"メソッドの第2引数に 渡されたコールバック関数を実行する "then"メソッドは連続的に呼び出すことができ、 直前の"then"メソッドのコールバック関数が Promiseを返さない場合、返り値を引数として 第1引数に渡されたコールバック関数を実行する。 "コールバック地獄"の発生を防ぎ、非同期処理を 連続的に実行することができる。
- 11. ➢ Promiseの実装例 非同期関数の実行が、コールバックによって 連鎖的に委譲（delegate）されるオブジェクトを 作成する。 ➢ "then"メソッドは、Promiseインスタンスを 新たに生成する このとき、successHandler/failureHandlerと、 新しいPromiseインスタンスのresolve/reject メソッドとを、インスタンスプロパティに保存する ➢ "最初のPromise"は、コンストラクタに渡された 関数内でresolve/rejectメソッドが呼ばれると、 successHandler/failureHandlerを実行し、 "次のPromise"のresolve/rejectメソッドを 呼び出す ➢ "最後のPromise"のresolve/rejectメソッドが 呼び出されるまで同様の処理を繰り返す 参考 ： さくらのナレッジ - JavaScriptの非同期処理を理解する その2 〜Promise編〜
- 12. §1.3 async/awaitについて Promiseによる非同期処理の制御を、 "then"メソッドの連鎖的な呼び出しなしに、 同期処理に近い書式で記述する。 ➢ 順番に実行したい非同期処理を、 "async"キーワードをつけた関数内に まとめる ➢ "await"キーワードつけた処理は、 完了（resolve/reject）まで、 続く行の実行を待たせることができる ➢ resolveメソッドの引数に渡した値は、 変数に保存し、続く処理で使用できる ➢ rejectメソッドの引数に渡した値または 例外は、try/catch構文で補足できる 参考 ： mdn web docs - async function
- 13. ➢ 糖衣構文（シンタックスシュガー） "async/await"は、Promiseを利用した 非同期処理を簡潔かつ同期処理に近い、 読みやすい形式で記述でき、糖衣構文の 性質を持っていると言える。 ※厳密に糖衣構文であるとは断言しない。 "async"キーワードをつけて宣言された 関数を、Promiseを用いて模倣する。 ➢ "await"キーワードにより、関数本文を 分割する ➢ 分割された処理を、Promiseの "then"メソッドで順番に実行する ➢ 例外は"catch"メソッドで補足する
- 14. §1 JavaScriptの非同期処理（再掲） プログラムを、１行ずつ完了するまで待ちながら進める"同期処理"に対して... 待ち時間が発生するような処理（ファイルの読み書き、HTTP通信など）の完了を待たず、 続く行のプログラムを実行した後で結果を処理するテクニック。 ➢ 未完了の行が発生しても、プログラムの実行を進める仕組み ➢ 未完了だった行の処理が完了した後に結果を処理する仕組み が必要。 JavaScriptはシングルプロセス・シングルスレッドで動作するプログラミング言語。 ⚠︎ 注意 ： 非同期処理を実現するための仕組みは、必ずしも他のプログラミング言語と 同じでない！！ JavaScriptランタイムの動作原理を学び、非同期処理を支える言語機能を活用することで 理解を深めていく。
- 15. 目次（再掲） §1 JavaScriptの非同期処理 §1.1 コールバックについて ➢ イベントループ ➢ setTimeout()の例 §1.2 委譲（delegate）について ➢ イベントハンドラの登録 ➢ Promiseの使用例 ➢ Promiseの実装例 §1.3 async/awaitについて ➢ 糖衣構文（シンタックスシュガー） 参考文献
- 16. 参考文献 ➢ Asynchronous JavaScript ➢ mdn web docs - Asynchronous JavaScript ➢ mdn web docs - Callback function ➢ mdn web docs - The event loop ➢ Promise ➢ さくらのナレッジ - JavaScriptの非同期処理を理解する その1 〜コールバック編〜 ➢ さくらのナレッジ - JavaScriptの非同期処理を理解する その2 〜Promise編〜 ➢ Innolitics - Decorating Async JavaScript Functions ➢ Deep JavaScript - Environments: under the hood of variables ➢ Aysnc/await ➢ mdn web docs - async function ➢ mdn web docs - Iterators and generators ➢ mdn web docs - Closures