プログラマーへの道 #148 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。 この記事はYouTubeに投稿した動画の補足ブログです。

投稿した動画

今回は以下の動画の補足説明をします。

GitHub のURL

私のGitHubは以下です。
https://github.com/tio-iis

Gist のURL

私のGitst（メモ書きみたいなもの）のURLは以下です。
https://gist.github.com/tio-iis

今回の動画で実装したソースコード

今回の実装は以下です。
https://github.com/tio-iis/memo-server/pull/61/files

現時点でのソースコードは以下です。
https://github.com/tio-iis/memo-server/tree/4edd82275545f4d23a6c46d61eb5d63bad116f37

補足内容

バックエンドサーバからレスポンスを受け取る際の非同期処理について

動画内で「JavaScriptがバックエンドサーバと通信するとき、バックエンドサーバからのレスポンスは非同期で返ってくる」という言及をしました。 非同期処理というのはJavaScriptにおいてとても重要な概念です。

以前の実装では、以下のように memos.addMemo() からエラーメッセージが返却され、 それを確認することでエラーメッセージを表示していました。
https://github.com/tio-iis/memo-server/blob/4edd82275545f4d23a6c46d61eb5d63bad116f37/index.html#L405-L411

これは以下のようにバックエンドサーバにリクエストを送信する前にバリデーションを実行できたからです。
https://github.com/tio-iis/memo-server/blob/4edd82275545f4d23a6c46d61eb5d63bad116f37/index.html#L217-L221

しかし、現在の実装ではバックエンドサーバにバリデーションを実装しているので、 JavaScript側がバリデーション結果を知るのはバックエンドサーバのレスポンスが返ってきたあとになります。 ここでのポイントはJavaScriptがバックエンドサーバからのレスポンスを受け取るときには、 すでにmemos.addMemo()の処理は終わっているということです。 バックエンドサーバからのレスポンスを受け取る以下の実装は memos.addMemo() のメソッドが実行されたあとに実行されます。
https://github.com/tio-iis/memo-server/blob/4edd82275545f4d23a6c46d61eb5d63bad116f37/index.html#L227-L248

そのため、バックエンドサーバのレスポンスを扱う無名関数の中で値を return しても、 memos.addMemo()の戻り値としては扱われません。

これはJavaScriptがシングルスレッドで動作するのが理由です。 シングルスレッドの概念と非同期処理の説明は以下にあるので、興味のある方は読んでみてください。
https://qiita.com/ryosuketter/items/dd467f827c1b93a74d76