【JavaScript】同期処理と非同期処理【わかりやすく図解！】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

今回は同期処理と非同期処理について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

同期処理と非同期処理

JavaScriptの処理には同期処理と非同期処理の2種類があります。
今回はこの2種類の処理の違いについて大まかに解説します。

あらかじめ伝えておきますが、今回の内容は超鬼門です。

同期処理

同期処理というのは、それぞれの処理の完了を待って
上から順に処理を進めていくことです。

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

上記のような処理があると１，２，３，４，５と順番に処理されます。

みなさんがこれまで何気なく作っていたプログラムが
いわゆる同期処理です。

非同期処理

setTimeout関数

非同期処理を理解するには
非同期処理を行う関数を扱う必要があるので
今回はsetTimeoutという関数を使ってみましょう。

setTimeout関数とは？

■ 構文

setTimeout(実行したい関数名, 待機時間※ミリ秒);

■ 1秒間待ってから、myFunctionを呼び出し「こんにちは!」と出力する

const myFunction = () => {
  console.log("こんにちは!");
};

// 1000ミリ秒待機してから処理を実行
setTimeout(myFunction, 1000);

非同期処理の処理の流れを理解しよう！

例としてあげたsetTimeout関数をつかって
非同期処理がどのように動くか理解しましょう。

const myFunction = () => {
  console.log("こんにちは!");
};

console.log(1);
setTimeout(myFunction, 1000);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

この処理の出力結果ってどうなると思いますか？

おそらく以下のようになると想像した方が多いと思います。

1
こんにちは!
2
3
4
5

では、実行環境を使って動かしてみましょう。

【JavaScript】ログを出してみよう！【console.log】

この記事を読むとこのような事ができるようになります！ ・ログが出せるようになる ・実際のWebサイトでログが見れるようになる ・環境構築不要でJavaScriptが学べるようになる

samehack.com

【出力結果】

1
2
3
4
5
こんにちは!

と思った方が多いと思います。

このように、上から順に進まない処理のこと非同期処理といいます。

どうしてこのような順番になるか、次の章で詳しく解説していきます。

※ちなみに、非同期処理であるsetTimeoutを使わずに記述すると上から順に進みます

const myFunction = () => {
  console.log("こんにちは!");
};

console.log(1);
myFunction()
console.log(2);
console.log(3);
console.log(4);
console.log(5);

【出力結果】

1
こんにちは!
2
3
4
5

非同期処理があると処理の順が変わる理由

ここではなぜsetTimeoutを使うと
処理の順が変わってしまったのかを解説します。

これを解説するのに重要なキーワードはPromiseです。

Promiseとは

非同期処理は基本的に戻り値としてPromiseという値を返します。

Promiseとは何かを超簡単に言うと
「ちょっと時間かかるから先進めといて！終わったら合流するね！」という約束です。

つまり、先程の例でいうと

と約束を交わした結果処理の順番が変わりました。

ちょっとむずかしいので図解しますね。

こう見るとすごくシンプルなので理解しやすいと思います。

JavaScriptはシングルスレッドなのであくまでイメージですが
非同期処理は一時的にメインスレッドの処理から外れて処理を行います。

そして終わったタイミングで「ここ入れてね！」と
メインスレッドに戻ってきます。

ちなみにメインスレッドに戻ってくるのは
非同期関数の処理が終わったタイミングなので
処理の最後に戻ってくるわけではありません。

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram