同期・非同期処理の動きについて簡単に理解する

スタッフブログ

皆さん、お久しぶりです。今日も元気にハッピーオタクライフを満喫している谷口です。

最近推しコンテンツが増えてしまい、毎日が新情報の日々を送っています。それはとても嬉しいことですが、心臓に悪く、もう何度心が死んだか分かりません。オタクの一喜一憂は生死に関わることなので、出来るだけ小出しにしてほしいものです。小出しでもシンドイですが。

さて、いつものごとく雑談を挟んだところで本題に入りましょう。
今回は、同期・非同期処理とその仕組みについて説明しようと思います。この記事では、主にJavaScriptを使用して説明します。

とまあ前置きはこれくらいにして、早速どうぞっ!

同期・非同期処理とは

この記事では、わかりやすくするために便宜上、
 ・「実行」は、実際に実行すること
 ・「処理」は、動かしたいロジックのこと
 ・「処理する」は、処理を実行すること
という意味で使います。把握お願いします。

同期処理

何の説明もなく早速になりますが、下のコードを見て下さい。

function one() {
    console.log("1");
}

function two() {
    console.log("2");
}

function three() {
    console.log("3");
}

one();
two();
three();

コンソールには次のように出力されます。

    1
    2
    3

関数one, two, threeと実行し、実行した順番通りに処理されました。これが同期処理です。

つまり、同期処理とはコードを実行した順に処理することです。

さて、簡単ではありますが同期処理についての説明は以上です。それでは、非同期処理の説明に入ります。

非同期処理

非同期処理にするために、例としてsetTimeoutを使って説明します。下のコードを見て下さい。

function one() {
    console.log("1");
}

function two() {
    setTimeout(() => {
        console.log("2");
    }, 1000);
}

function three() {
    console.log("3");
}

one();
two();
three();

twoではsetTimeoutを使用して、1秒後に「2」を表示するようにしています。
このコードが実行されると、次のようになります。

    1
    3
    2

パッと見た感じでは、threeの後にtwoが実行されたように見えますよね。
しかし実際は、同期処理の時と同じく、関数one, two, threeの順で実行されています。
そして、setTimeoutに渡されている処理については、全てのコードが実行された後、処理されます。

このように、コードを実行した順に処理しないのが非同期処理です。

さて、簡単ではありますが、ここまでが同期・非同期処理についての説明です。ここからは、JavaScriptの同期・非同期処理の仕組みをもっと詳しく見ていこうと思います。

同期・非同期処理の仕組み

一旦、同期・非同期処理についてまとめます。

・同期処理は、コードを実行した順に処理すること
・非同期処理は、コードを実行した順に処理しないこと

それでは、同期・非同期処理の動きについて見ていきましょう。

同期処理の動き

同期処理の説明で、例として使ったコードで説明します。

function one() {
    console.log("1");
}

function two() {
    console.log("2");
}

function three() {
    console.log("3");
}

one();
two();
three();

まず、最初にoneが実行され、その後console.logが実行されます。
その後のtwo, threeも同じように実行されます。

まあ見たままの動きです。
では非同期処理の時はどうでしょう。

非同期処理の動き

こちらも、非同期処理の説明で使った例で説明します。

function one() {
    console.log("1");
}

function two() {
    setTimeout(() => {
        console.log("2");
    }, 1000);
}

function three() {
    console.log("3");
}

one();
two();
three();

まず、oneが実行され、そこでconsole.logが実行され、「1」が表示されます。

次にtwoが実行され、そこでsetTimeoutが実行されます。setTimeoutはこの場では何もしませんが、指定した時間が経過したら、指定した関数をイベントキューに追加します。
JavaScriptのイベントキューは、追加された順に1つずつ取り出され、前の処理が終わるまで次の処理はしません。

次に、oneと同じようにthreeも実行され、「3」が表示されます。

そして、twoのsetTimeoutの実行から1秒経ったら、setTimeoutに指定されていた関数がイベントキューに追加され、それが実行されたら「2」が表示されます。

終わりに、あとがき

日本語が下手くそすぎて真剣に日本語の勉強をせねば、と思った今日この頃です。
たくさん本を読んできたのに、ここまで日本語が壊滅的だと本当に本を読んでたのか謎ですね。

ともあれ、今回の記事はこれで終わりです。きっとまたすぐに記事をアップすることになると思いますが、その時に会いましょう。ではっ!