「非同期処理」の考え方
こんにちは！
技術満足室の伊藤です！
今回はJavaScriptを勉強していくと目にする
「非同期処理の考え方」について初学者向けに解説していきたいと思います！
（具体的な記述まで書いてしまうと大変長くなってしまうので、
あくまで「考え方」に絞って解説していきます。）
この記事が「非同期処理」を学びたい人の手助けになればと思います！！
■同期処理と非同期処理について
まずは、通常の処理である「同期処理」と「非同期処理」を比べてみましょう。
【 同期処理 】（通常行われる処理）
通常プログラムは、上から順番に処理を行っていくのですが、
この仕様のせいで、時としてユーザー体験を損なってしまうケースがあります。
⇩
例えば、処理A（動画）→処理B（テキスト）→処理C（画像）…とあったとします。
処理Aで動画データの取得に時間がかかってしまったら、ユーザーは
処理Bのテキスト表示までの間、画面が真っ白なまま待たなければなりません。
⇩
そんな感じだったらみんなブラウザバックしちゃいますよね。。。
そこで登場するのが
【 非同期処理 】
非同期処理とは、ある処理の終了を待たずに主となるタスクを継続して行うことを
言います。
先ほど出した例に当てはめると
⇩
非同期処理を活用することで、
処理Aの終了を待たずに処理Bのテキスト表示ができるため、
ユーザーもページ内容を先行して閲覧でき、同期処理と比べて
サイトやページから離脱しにくくなる！ということですね！
■代表例
Google Map
Google Mapは、非同期処理を活用したサービスの代表例としてよくとりあげられます。
実際の動作としては、
地図を縮小すると建物や地形がアバウトになり、県名などのエリア情報が表示されます。
反対に拡大すると、県名などのエリア情報から、建物や店名細かく表示されます。
これは非同期処理によってリアルタイムでデータを読み込み、画面の更新なく情報を
反映させることで実現されています。
～もし非同期で実装されていなかったら…～
拡大、縮小、移動など、地図情報の更新を行った場合あらゆる処理を阻み、
更新中はマップ移動もクリックもできなくなってしまいます。
（古いカーナビなんかだと、画面内の矢印を押して隣のエリア情報を
表示させたりしてましたね）
同期処理と非同期処理について書いてみましたが、
まだ少しわかりにくいと思うので牛丼でも例えてみます。
一言で表すと、
「牛丼を作るとき、
ご飯を炊いている間に牛丼のアタマをつくってしまおう！」
ということです。
（何を当たり前のことを、、、と思う方もいらっしゃるかもしれませんが、
プログラムにとっては当たり前ではないのです。。。。）
これをプログラムの普通の処理（同期処理）と同様に作った場合、
「ご飯が炊きあがるのを待ってから、牛丼のアタマを作り始める」
ということなのです。
そんなことをしてしまっては食べるまでにすごく時間がかかるので、
すぐさま近くの吉野家に駆け込んでしまいますね。涙
■非同期処理の注意点
今までの話だけきくと、非同期処理で超いいじゃん！となりそうですが、
ひとつの処理の終了を待たずに次の処理を始めてしまう仕様上、
処理の「実行順」が重要な場面では注意が必要となります。
例えば、処理Aでデータベースから情報を取得し、処理Ｂで
その情報を使いたい！みたいな場面がありします。
この場合、そのまま非同期処理で実行されてしまうと、
処理Aでの準備が整う前に処理Ｂが実行されてしまうため、
「データ未存在」としてエラーになってしまう。
【対策方法】
対策方法としては、
処理Aが完了するのを待ってから、処理Bを始めるということをします。
牛丼の場合、
「どんぶりにご飯を盛り付けるのを待ってから牛丼のアタマをかける」ような
感じでしょうか。
処理の完了を待たない場合は
「ご飯を炊いている間に牛丼のアタマができた！どんぶりに盛り付けだ！！」
⇩
「よし！やっとご飯が炊きあがった！！盛り付けるぞ！！」
となります。
これではアタマとご飯の盛り付け順が逆転してしまってますね、、、
■まとめ
・同期処理と非同期処理について
同期処理 ：処理はひとつひとつ順番に行われる。
非同期処理：ある処理の終了を待たずに主となるタスクを継続して行うこと。
・非同期処理の注意点
処理の順番が重要な場面では、意図的に次の処理まで待ち、
処理順を正しく操作する。
信頼と実績のサポート力で、収益化までしっかり伴走します！
