【JavaScript】非同期処理と処理の順番について【初心者・入門】

スポンサーリンク
アイキャッチ 猫HTML/CSS
スポンサーリンク

JavaScriptは同期的でシングルスレッドの処理で実行されていますが、非同期処理が可能な言語です。
ここでは、非同期処理と同期処理・スレッドについてまず説明し、その後処理の順番について説明していきます。

スポンサーリンク

同期処理と非同期処理

同期処理

同期処理はプログラムの記述順に1つずつ実行されます。
そのため、次の処理は前の処理が終わらないと実行することができません。

非同期処理

非同期処理は同期処理と異なり処理が実行する準備をしている空き時間の間に、別の処理を実行することができます。

この説明だけだと、非同期処理は並列で色んな処理ができるってこと?と思うかもしれません。

答えは 「No」 です。

あくまで、準備している空き時間を活用しているだけなので、並列で複数の処理ができるわけではありません。
並列処理を行うためにはマルチスレッドで処理を実行する必要がありますが、JavaScriptはシングルスレッドで動きますので、並列処理ではなく、並行処理と言えます。

並列処理と並行処理の違いはこちらです。

  • 並列処理
    物理的に複数の処理を同時に実行することができる
  • 並行処理
    常に1つの処理のみ実行しているが、タイミングを見計らって処理を切り替えて処理を効率よく実行する
    同時に実行しているように見せかけている
スポンサーリンク

スレッドについて

先ほどシングルスレッドマルチスレッドについて話が出てきましたが、スレッドとは何でしょうか。

スレッドとは、1つ1つ実行する処理を表します。

シングルスレッドはその名の通り1つの処理を実行することができます。

対し、マルチスレッドは複数の処理を実行することができます。

これを先ほどの並列処理と並行処理に当てはめると、このようになります。

  • 並列処理・・・マルチスレッドで実行
  • 並行処理・・・シングルスレッドで実行

JavaScriptはシングルスレッドのため、並行処理をしていることになりますね。

スポンサーリンク

処理の順番

さて先述のようにJavaScriptはシングルスレッドであることが理解できましたが、並行処理をしているということは、処理の順番が入れ替わってしまうことがあります。

JavaScriptは上から順番でキューに関数を登録し、処理しています。
しかし、処理が同期的なものと非同期的なものによって、順番が入れ替わることがあります。

<上から順番に処理する>

console.log("one");
console.log("two");
console.log("three");

実行結果

one
two
three

<順番が入れ替わっている>

console.log("one");
setTimeout(function(){console.log("two")}, 0);
console.log("three");

実行結果

one
three
two

順番が入れ替わっているパターンでは「setTimeout」関数のタイマーを0ミリ秒で設定しています。
ここで不思議なのは、タイマーは0ミリ秒…つまり待ち時間なしで実行するように記述されていますが、実際の実行結果はone→three→two2行目と3行目の順番が入れ替わっています。

キューに登録されているのは、
 1. ログ表示 ”one”
 2. タイマー登録 0ミリ秒
 3. ログ表示 ”three”
この3つの処理になります。
つまり、この時点では、「ログ表示 ”two”」はキューにまだ登録されていないのです。

では、いつ「ログ表示 ”two”」はキューに登録されるのか?

それは、同期処理が全て終わってからです。

なので、キューの登録の順番は、
同期処理
 1. ログ表示 ”one”
 2. タイマー登録 0ミリ秒
 3. ログ表示 ”three”
同期処理の登録完了後、非同期処理
 4.ログ表示 ”two”
となります。

だから先ほどの実行結果のように、順番が入れ替わります。

スポンサーリンク

まとめ

今回はJavaScriptの非同期処理と同期処理、処理の順番について、説明していきました。
JavaScriptで開発するためには、このあたりをまず始めに理解しておきたいところですね!

非同期処理を同期的に処理する方法については、
別の記事にしたいと思います。
ご覧いただき、ありがとうございました。

本ブログで一押しのオンラインスクールのご紹介♪




本ブログで一押しのオンラインスクール「Udemy」
筆者も利用しているスクールで、日頃の隙間時間に好きな講座が学べるので大活躍です♪

ジャンルが豊富で学びたい講座がきっとみつかる

AI・データサイエンスなど最先端のIT技術からプレゼンなどビジネススキルに関する講座まで15.5万以上(※海外講座含む)あるため、自分が学びたい講座をみつけることができます

お手頃な価格帯

1講座あたり数千~数万円程度で実践的なスキルアップが可能です。
講座は一度購入すれば視聴期限なく受講でき、30日返金保証もついているので安心して始めることができます。

学びやすい多彩な機能

0.5~2倍の変速機能で自分のペースで受講が可能、専用アプリを使えばスマホからオフライン環境でも視聴が可能です!
また、講師に直接掲示板から質問ができるので疑問を解決し自学自習をサポートしてくれます。

購入前に視聴できますので、是非興味のある方は↓をクリックしてみてください。




HTML/CSSJavaScriptプログラミング
スポンサーリンク
nyanblog
タイトルとURLをコピーしました