🙌

JavaScript の非同期通信ちゃんと復習した話【#1 基本知識】

2024/01/09に公開

最近 Next.js の勉強をしていると、「あれ、実はJavaScriptの非同期処理の構文をちゃんと理解していないかも？」と感じることがありました。

そこでこの記事では、僕自身の復習も兼ねて、JavaScriptの非同期プログラミングについて軽く解説します。

今回はまず基本知識について解説し、別の記事でJavaScriptを使った具体的な書き方を紹介しようと思います。

非同期処理って何？

そもそも、初心者プログラマーにとっては「非同期処理って何？同期処理もよくわからない」という疑問を持つ人もいるかもしれません。

言葉自体が難しく感じると思うので、まずは同期処理と非同期処理について、日常のワンシーンで例えてみましょう。

同期処理とは、簡単に言うと順番に作業を行っていくことです。

例えばあなたが仕事でクライアントに100人にパスポートの番号を聞き出す必要があったとします。

ここでクライアント全員に電話をかけてパスポートの番号を聞く場合、

というのが1連の作業となりますね。

もしクライアントがパスポートをどこにしまったかわからなくなっている場合は、それを探すのに時間がかかりますし、確認が完了するまで電話を切ることもできません。

またクライアントが電話に出られなかった場合や、外出中でパスポート番号が確認できない場合は、クライアントの確認作業は保留にしてあとで確認する必要が出てきます。

このように、一つ一つの作業が完了するまで他の作業ができなくなるのが同期処理です。

一方で非同期処理とは、1つの作業が完了するまで待たない処理を示します。

これだけだとわかりにくいかもしれませんので、先程と同じ例を使って解説します。

先程は電話でパスポートの番号を確認しましたが、電話の代わりにメールを使った場合を考えてみましょう。
＊メールでパスポート番号を聞くのはセキュリティ的に問題があるかもしれませんがあくまで例えということで

メールであればクライアント100人に一斉に送信し、クライアントが各々返事をしてくるまで別の作業をすることができます。

電話のように後でかけ直す必要もなければ、クライアントがパスポートを探している時間を待つ必要もありません。

クライアントもすぐに確認する必要がないので、自分のタイミングでパスポートの番号を返信できます。

このように、作業が完了するまで待機することなく進められるのが非同期処理です。

非同期処理なんて堅苦しい名前なのでわかりにくいですが、こういった処理方法は僕たちも普段の生活で行っています。

例えば、カフェでコーヒーを受け取るために番号の付いたレシートを受け取ったり、フードコートで料理ができあがるまでブザーを渡されて待つのも、非同期処理と同じ処理方法ですね。

さて、日常生活で非同期処理が便利なのはわかりましたが、プログラミングでは具体的にどのような場面で非同期処理が便利なのでしょうか？

まず同期処理の問題ですが、通常プログラムはコードを上から下へと順序立てて実行するので、この方法では一つの処理が完了するまで次の処理に移れません。

もし特に時間がかかる処理（例えば、データベースへの問い合わせやファイルのダウンロードなど）を行った場合、そのタスクが終わるまで他のタスクを止めてしまうことになります。

これにより、プログラム全体の効率が大きく落ち、「え？サイト固まった？」とユーザーにも勘違いを生みやすく、ユーザーエクスペリエンスも悪くなります。

たまにあるのが、フォームを入力した後にデータを送信するためのボタンを押しても、何も反応が起きなくてどうなっているか不安になるというパターン。

本当に送信できたのか？今どういう状態なのか？がわからず、非常に微妙なユーザー体験になることが想像できます。

ここで非同期処理を利用すれば、重いタスクをバックグラウンドで実行しつつ、同時に他のタスクを進行できます。これによりユーザーに「サイトが固まっている」という印象を与えずにすみ、ユーザーエクスペリエンスが改善されます。