Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@yunity29

非同期処理とは何か、何が嬉しいの?

More than 1 year has passed since last update.

非同期処理とは何か、何が嬉しいの?

by yunity29
1 / 15

非同期処理とは

非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。


よくわからん。
kaisya_komaru_man.png


その前に同期処理とは

プログラムの記述順序通りに実行され結果が返る。
add関数が実行され計算結果がリターンされてからhogeに代入している。

sample.js

let add = (a, b) => {
    return a + b; 
}

let hoge = 0;
hoge = add(10, 100);

console.log(hoge); // 表示は「110」


JavaScriptはシングルスレッド

JavaScriptは「UIスレッド」と呼ばれるメインスレッド上で処理を1つ1つ順番に実行していくことしかできない。
スクリーンショット 2020-01-29 21.49.41.png


処理のブロック

時間のかかる処理を行うとJavaScriptはその処理にUIスレッドを占有してしまう。
処理完了まで一切なにもできなくなる。クリックもローダーやプログレスバーの表示もできない。
スクリーンショット 2020-01-29 23.43.05.png


時間のかかる同期処理を実行してみる。

下の処理は10秒間UIスレッドを独占する。その間はクリックなどができなくなる。

heavyFunc.js
// 指定ミリ秒ループを継続
function sleep(msec) {
  var start = new Date();
  while (new Date() - start < msec);
  alert("処理完了");
}

sleep(10000);

重い処理を同期処理で行うとフリーズしているように見える

重い処理がUIスレッドを占有してしまい入力を受け付けない状態は、パソコンが一切操作を受け付けずフリーズしているように見えてしまう。
スクリーンショット 2020-01-29 23.38.47.png


非同期処理の復習

非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。
つまり、UIスレッド上でブロックせずに複数の処理を実行することができるようになる。

heavyFunc.js
// 指定ミリ秒ループを継続
function sleep(msec) {
  var start = new Date();
  while (new Date() - start < msec);
  alert("処理完了");
}

sleep(10000);
alert("処理完了"); // sleepによってブロックされている。

非同期処理の具体的なサイト

非同期で実装しているWebページは無数にあるが、例として有名サービスを2つ見て動きを見ていく。


例1 Google Map

非同期処理の例でよく紹介されるGoogleの超有名サービス。
地図をつかんでマップ外に移動すると、移動先のマップ情報を非同期で取得して地図情報をスムーズに更新する。

もしGoogle Mapが非同期で実装されていなかったら?

地図情報の更新があらゆる処理をブロックする。
更新中はマップ移動ができないし、ランドマークをクリックできない。
先ほどの10秒UIスレッドを専有する処理を実行するとわかりやすい。


例2 Amazon

超大手のショッピングサイト。Google Mapのようなユニークなサービスだけでなくショッピングサイトにも当然に非同期処理が活用されている。
2ページ目以降を非同期で取得しているので、商品の情報を取りに行っている状態でも、他のカテゴリの2ページを見に行ったりすることができる。
またスクロールが最下部に来た時に非同期で追加のページを取得しに行っている。

もしAmazonが非同期で実装されていなかったら?

2ページ目の商品情報を取得して画面に反映するまで、他のカテゴリの2ページ目を取得することができない。
最下部にスクロールすると追加ページの読み込みでいきなり止まってしまう。


非同期処理の何が嬉しいの?

ユーザ体験が上がる!
2つの例で見てきたようにサクサク動きながらデータを取ってこようと思ったら非同期処理を活用しないと著しくユーザ体験が低くなってしまう。

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/.

非同期処理の復習

非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。
スクリーンショット 2020-01-31 0.59.15.png


共に働くWebエンジニアを募集しています!

不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yunity29
nakajitsu
普通じゃない革新と挑戦を続ける会社ナカジツ。不動産業界の既存モデルにとらわれず、本当にお客様に喜ばれるサービスを目指す会社です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?