はじめに

JavaScriptを学習中、非同期についての内容が少々ヘビーに感じたので、こちらの記事にアウトプットして理解を深めようとしている次第でございます。

非同期処理とは

JavaScriptに限らず、多くのプログラミング言語で同期・非同期の概念はあります。
では同期・非同期とは？

同期とは

同期とは処理が順番に実行されることを言います。

カレーを作るときに置き換えて考えてみます。

1. 材料を切る
2. 材料を煮込む
3. ルウを溶かす

これらの作業は順番に行うので、前の作業が終わらない限りは次の作業に取り掛かることはありません。

コンピューターの処理に置き換えると、「ある処理が完了するまで次の処理が実行されない」ということです。

非同期とは

非同期とは処理が順番に実行されるとは限らないことを言います。

カレーだけではなく、お米を炊いてサラダを作ることも考えてみましょう。

・カレー
    1. 材料を切る
    2. 材料を煮込む
    3. ルウを溶かす

・ごはん
    1. お米を洗う
    2. 炊飯器で炊く

・サラダ
    1. 材料を切る
    2. ドレッシングをかける

沢山の作業がありますが、カレーの具を煮込む時間やお米を炊いている時間は自分の手が空いています。
効率的に作ることを考えると、カレーを煮込んでいる間や、お米を炊いている間に他の材料を切ったりしますよね。
カレーを完成させてからご飯を炊いていては完成まで時間がかかってしまいます。

コンピュータの処理に置き換えると、「ある処理が完了する前に次の処理が実行される」ということです。

非同期はどこで使う？

同期・非同期の違いは説明しました。
では、非同期処理はいつ使うのか？逆に同期処理はいつ使うのか？が気になりますね。

非同期処理の使用例　：　Webサーバーとのやり取り

検索結果の画面などで、ある程度下までスクロールすると表示する量が増える機能がありますが、もし表示量を増やす処理が走る度に画面が固まったらどうでしょうか。
インターネット回線の速度は人それぞれですし、遅い人が見ようとしたらすぐに画面が固まってしまうサイトになってしまうのです。

そこで非同期処理を使い、データを読み込んでいる間にもWebサイトが動く仕組みが作られているのです。

同期処理の使用例　：　Webページの読み込み処理

Webページを開く際、ページの要素がある程度読み込まれるまでは何もすることができません。
基本的な機能が確実に全て読み込まれなければ、サービスが正常に動作しないからです。

まとめ

両者は一長一短なので、使いどころが重要です。

サーバーからの応答をじっと待っていたらもったいないですね。他の処理の実行に費やしましょう。
カレーを煮込んでいる間にサラダが作れます。

しかし、必要な処理が終わる前に次の処理をしてはいけません。
ジャガイモを洗わずに鍋に放り込むようなものです。