1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptの非同期処理について①

Last updated at Posted at 2021-01-24

業務でTypeScript(JavaScript)を使うようになり、なんとなくで実装していた非同期処理について学習した結果をアウトプットしたいと思い、初投稿することにしました。
文章構成等、下手くそな部分もあるかも知れませんが、温かく見守ってやってください。
##そもそも非同期処理って?

非同期処理は、あるタスクが実行をしている際に、他のタスクが別の処理を実行できる方式である。同期処理では、あるタスクが実行している間、他のタスクの処理は中断される方式である。
【参考サイト】(http://ossforum.jp/node/753)

上記にも記載ある通り、非同期処理は、あるタスクが実行中に他のタスクも実行できるような実行方式です。
何の話?となるかもしれませんが、まずは非同期処理を学ぶ前に「同期処理」とはなにかから振り返ってみましょう。


###・同期処理
同期処理は、__プログラムを1つ1つ上から順番に実行__していく方式です。

function func1(){
  return "Function1!!!";
}
function func2(){
  return "Function2!!!";
}
console.log(func1());
console.log(func2());

上記のコードですと、単純に上から順番に実行され、
1.「Function1!!!」
2.「Function2!!!」
の順番でコンソールにメッセージが出力されます。順番に処理が実行される、これが同期処理です。プログラムが上から順番に1つずつ実行され、処理の完了を待ってから次の処理が実行されていきます。
上から順番に処理が実行されていくので、例えばfunc1の処理時間が10分かかるとすると、func2が実行されるのはfunc1の処理が完了した後(10分後)となります。
同期処理は、時間のかかる処理があると、その処理が完了するまで他の処理の実行ができません。その間ユーザも操作できない、トータルの実行時間もかかってしまう・・・それならば__時間のかかる処理は別の場所に投げてしまい、その間に軽い処理を行ってしまおう!__という考えから作られたのが非同期処理です。


###・非同期処理
非同期処理は、先ほどお伝えした通り、あるタスクが実行中に他のタスクも実行できるような処理方式です。
参考に以下コードを考えてみましょう。

console.log('First');
setTimeout(() => console.log('Second'), 2000);
console.log('third');

同期処理の考えですと、以下順番でコンソールにメッセージが表示されるはずです。
1.「First」
2. 2000ミリ秒後に「Second」
3.「third」

ですが、実際には
1.「First」
2.「third」
3. 2000ミリ秒以降に「Second」
という順番でメッセージが表示されます。なぜでしょう・・・??

###・setTimeout
setTimeoutは__コールバック関数__と、実行遅延時間を引数に取るメソッドです。
実行遅延時間が経過したらコールバック関数の処理を開始するようなイメージです。

setTimeout('コールバック関数', '実行遅延時間');

setTimeout自身は非同期処理を行うメソッドで、処理が呼ばれた時点で別の場所に処理を投げて、時間が経過した後にコールバック関数を実行する形になっています。
このように、非同期処理は、外部に処理を投げてその間に他の処理を実行し、外部に投げた処理が完了した段階でまた処理を再実行するような仕組みとなっています。

##まとめ
同期処理、非同期処理について解説いたしました。かなり簡単な内容なため、特に参考にする方はいないかもしれませんが。次は、同期処理・非同期処理がどのように実行されているか(コールスタックの説明など)を書いていけたらと思います。拙い文章ですが、ご覧いただきありがとうございました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?