##非同期処理とは
非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。
よくわからん。
##その前に同期処理とは
プログラムの記述順序通りに実行され結果が返る。
add関数が実行され計算結果がリターンされてからhogeに代入している。
let add = (a, b) => {
return a + b;
}
let hoge = 0;
hoge = add(10, 100);
console.log(hoge); // 表示は「110」
##JavaScriptはシングルスレッド
JavaScriptは「UIスレッド」と呼ばれるメインスレッド上で処理を１つ１つ順番に実行していくことしかできない。
##処理のブロック
時間のかかる処理を行うとJavaScriptはその処理にUIスレッドを占有してしまう。
処理完了まで一切なにもできなくなる。クリックもローダーやプログレスバーの表示もできない。
##時間のかかる同期処理を実行してみる。
下の処理は10秒間UIスレッドを独占する。その間はクリックなどができなくなる。
// 指定ミリ秒ループを継続
function sleep(msec) {
var start = new Date();
while (new Date() - start < msec);
alert("処理完了");
}
sleep(10000);
##重い処理を同期処理で行うとフリーズしているように見える
重い処理がUIスレッドを占有してしまい入力を受け付けない状態は、パソコンが一切操作を受け付けずフリーズしているように見えてしまう。
##非同期処理の復習
非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。
つまり、UIスレッド上でブロックせずに複数の処理を実行することができるようになる。
// 指定ミリ秒ループを継続
function sleep(msec) {
var start = new Date();
while (new Date() - start < msec);
alert("処理完了");
}
sleep(10000);
alert("処理完了"); // sleepによってブロックされている。
##非同期処理の具体的なサイト
非同期で実装しているWebページは無数にあるが、例として有名サービスを２つ見て動きを見ていく。
##例１ Google Map
非同期処理の例でよく紹介されるGoogleの超有名サービス。
地図をつかんでマップ外に移動すると、移動先のマップ情報を非同期で取得して地図情報をスムーズに更新する。
####もしGoogle Mapが非同期で実装されていなかったら？
地図情報の更新があらゆる処理をブロックする。
更新中はマップ移動ができないし、ランドマークをクリックできない。
先ほどの10秒UIスレッドを専有する処理を実行するとわかりやすい。
##例2 Amazon
超大手のショッピングサイト。Google Mapのようなユニークなサービスだけでなくショッピングサイトにも当然に非同期処理が活用されている。
２ページ目以降を非同期で取得しているので、商品の情報を取りに行っている状態でも、他のカテゴリの２ページを見に行ったりすることができる。
またスクロールが最下部に来た時に非同期で追加のページを取得しに行っている。
####もしAmazonが非同期で実装されていなかったら？
２ページ目の商品情報を取得して画面に反映するまで、他のカテゴリの２ページ目を取得することができない。
最下部にスクロールすると追加ページの読み込みでいきなり止まってしまう。
##非同期処理の何が嬉しいの？
ユーザ体験が上がる！
２つの例で見てきたようにサクサク動きながらデータを取ってこようと思ったら非同期処理を活用しないと著しくユーザ体験が低くなってしまう。
XMLHttpRequestは同期で使用すると警告がユーザ体験に影響が出ると警告が出る。
// 第3引数がfalseで同期
new XMLHttpRequest().open("GET", "https://zip-cloud.appspot.com/api/search?zipcode=7830060",false);
// Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
##非同期処理の復習
非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。
##共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。