【JavaScript】非同期処理について

はじめに

こんにちは。
こちらの記事では、非同期処理についてアウトプットしていきます！
誤っている点がございましたらコメントいただけると幸いです。

同期処理とは

コードの記述のように上から順番に処理が実行されるのが同期処理。

非同期処理とは

ひとつの処理の完了を待たず、複数の処理を同時に実行することができるのが非同期処理。処理の完了を待たないので、処理の順番を制御する記述が必要となる。

非同期処理はなぜ必要なのか

同期処理の場合、全ての処理が完了するまで待たなければいけないので、サイトの表示速度が落ちてしまい、離脱率が上がってしまうことが考えられる。
そのため、非同期処理で実行することでユーザーの使いやすさを考慮した実装をすることができる。

ここでは非同期処理を制御する、コールバック関数 / Promise / async,awaitについて、1秒ごとに文字を表示する処理で記述の仕方を比較していきます!

コールバック関数

コールバック関数でも非同期処理は記述できるが、ネストが深くて見づらくなるという欠点があるため、現在はあまり使用されていない。

Vue.js

setTimeout(() => {
    console.log("たまご");
    setTimeout(() => {
        console.log("ひよこ");
        setTimeout(() => {
            console.log("にわとり");
        }, 1000);
    }, 1000);
}, 1000);

Promise

Promiseを訳すと「約束」という意味を持つ。.then()で処理を繋げることができ、コールバック地獄から解放されるきっかけとなった。

JavaScript

new Promise(resolve => {
  setTimeout(() => {
    console.log("たまご");
    resolve();
  }, 1000);
}).then(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("ひよこ");
      resolve();
    }, 1000);
  });
}).then(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("にわとり");
      resolve();
    }, 1000);
  });
});

async , await

asyncは、非同期関数を定義する関数宣言のこと。
awaitは、async関数内でPromiseの結果（resolve、reject）が返されるまで待機する（処理を一時停止する）演算子のこと。

JavaScript

func = async () => {
  await log("たまご");
  await log("ひよこ");
  await log("にわとり");
};

log = (test) => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(test);
      resolve();
    }, 1000);
  })
}

func();

Promiseで.then()メソッドの記述が多くなる場合、コードが見づらくなるがasync / awaitを用いることで、さらにシンプルに記述することができるようになった。

おわりに

ここまで非同期処理についてまとめました。
非同期処理を行う上で、個人開発でも現場でもよく使われるものだと思うので引き続き復習しながら、アプリ開発も進めていきます！

以上、最後まで読んでいただきありがとうございました！