【JavaScript】 Promiseと非同期処理を理解する

image

Version

  • Node.js v16.16.0

はじめに

非同期処理がなかなか理解できなかったので、コードと一緒に理解できるようにする。

同期処理と非同期処理の処理の順番

以下のコードを走らせるとどのような結果になるか。nodeで実行してみる。

setTimeout(() => {console.log(1)},1000)
console.log(2);
setTimeout(() => {console.log(3)},0)
console.log(4);
setTimeout(() => {console.log(5)},1000)
console.log(6);
setTimeout(() => {
    console.log(7);
    setTimeout(() => {
        console.log(8);       
    },1000)
},2000)

結果

2
4
6
3
1
5
7
8

表示順は2,4,6,3がすぐに表示され、その1秒後に1,5が表示され、その1秒後に7が表示され、その1秒後に8が表示されます。
同期処理と非同期処理は、まず同期処理が優先して処理されます。その処理が終わった後に非同期処理が実行されます。console.log(1)console.log(5)は同時に動きます。このあたり自分は1秒ずつずれて動くと勘違いしてました。
これをずらして動かすためには、 setTimeout()関数の中にsetTime()関数を入れ込む(callbackする)必要があります。7,8でcallbackをさせています。
*top画面のイメージを参考にしてください。

callbackを使って、カウントダウンをする

上のcallbackを使って、カウントダウンするコードを書くと以下のようになります。

setTimeout(() => {
  console.log(3);
  setTimeout(() => {
    console.log(2);
    setTimeout(() => {
      console.log(1);
    }, 1000);
  }, 1000);
}, 1000);

結果

3
2
1

これは、可読性が悪くコードの管理も難しいということでコールバック地獄とかよく呼ばれています。 こうしたコールバック地獄を避けるためにPromiseがあります。

Promiseを使って、カウントダウンをする

まずはコードを書きます。結果は同じです。

new Promise((resolve) => {
  setTimeout(() => {
    console.log(3);
    resolve();
  }, 1000);
})
  .then(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(2);
        resolve();
      }, 1000);
    });
  })
  .then(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log(1);
        resolve();
      }, 1000);
    });
  });
 

Promiseオブジェクトは第1引数にresolve、第2引数にrejectを指定でき、resolve()させるとthen以下の関数が実行され、reject()させるとcatch以下の関数を実行させることができます。これにより非同期処理の可読性が高まり、またthencatchにより複雑な処理も可能になりました。
上記のコードの場合、resolve()により、then以下で独立してPromiseが動いています。
前のコードより複雑化したように思うかもしれませんが、メインテナンスはやりやすくなったのではと思います。

async/await を使って、カウントダウンをする

最後にasync/awaitを使って書き直します。

func = async () => {
  // 関数に対してasyncと宣言する => この関数は非同期関数
  await log(3);
  await log(2);
  await log(1); // 関数の呼び出しの前にawait => Promiseの結果がくるまで待つ
};

log = (num) => {
  // Promiseを返す関数
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(num);
      resolve();
    }, 1000);
  });
};

func();

functionの前にasyncをつけると、非同期処理を実行できる関数を定義できる。
awaitasyncで定義された関数の中で使う。 log関数は、setTime()を使った待機処理関数をPromiseでラップしたもので、resolve()で結果を返す。 これをawaitの後で、実行するとPromiseでthenを使って実行させたことをthenなしで実行させることができるようになりました。

最後に

async/awaitは、コードはシンプルになるが、裏でPromiseが動いているので、そこを理解しないといけないなと思いました。
いろいろなコードを書きながら非同期処理の理解を深めていきたい。

参考

https://qiita.com/cheez921/items/41b744e4e002b966391a
https://knowledge.sakura.ad.jp/24890/
https://rightcode.co.jp/blog/information-technology/javascript-async-await
小学生でもわかるasync/await/Promise入門【JavaScript講座】

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More