JavaScriptの非同期処理【プログラミング初心者向け教材】

プログラミング
スポンサーリンク

プログラムは基本的に上から下に順番に処理が行われていきます。

このような処理を同期処理と呼びますが、いつも同期処理で行うと待ち時間が長くなってしまったりするなど非効率な処理となってしまうことがあります。

JavaScriptではこれを解決するために、非同期処理を使う場面がたくさん出てきます。

本記事では、JavaScriptの同期処理と非同期処理の違いや非同期処理を行うasync/await方式について解説します。

プログラミング初心者の方の学習や、忘れてしまった方の復習として、参考にしていただければ幸いです。

記載しているプログラムは、Node.js14.14.0を使って動作確認をしています。

JavaScriptの非同期処理

JavaScriptの非同期処理について、以下の内容で解説します。

  • JavaScriptの同期処理
  • JavaScriptの非同期処理

JavaScriptの同期処理

JavaScriptは上から下に順番に処理が実行されていきます。

このような処理方式を同期方式と呼びます。

function count() {
    console.log("start.");
    for (num = 1; num <= 10; num++) {
        console.log(num);
    }
    console.log("end.");
}

count();

上記のプログラムを実行すると、当たり前ですが以下のようになります。

start.
1
2
3
4
5
6
7
8
9
10
end.

このプログラムに対して、ループの中でランダムなスリープ時間を行う関数を挟みます。

function sleepA(num) {
    setTimeout(()=>{
        console.log(num)
    }, Math.random() * 1000);
}

function count() {
    console.log("start.");
    for (num = 1; num <= 10; num++) {
        sleepA(num);
    }
    console.log("end.");
}

count();

すると、結果は先程と変わって、順番通りに実行されなくなりました。

start.
end.
1
9
10
3
8
4
6
2
5

これはスリープ処理を行うsetTimeout関数が非同期処理を行う関数であり、スリープしている時間に他の処理が実行されているためです。

スリープ処理以外にも、ファイルの読み込み処理や通信処理など比較的時間がかかる処理では非同期処理で行われるようになっている関数があります。

JavaScriptの非同期処理

上記で順番通りに実行されなくなったプログラムを、順番通りに実行するための方法が、asyncとawaitです。

asyncとawait以外にもコールバック方式やPromise方式がありますが、async/await方式が一番簡易で分かりやすいため、多くの人に好まれる方式になっています。

function sleepB(num) {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(num);
            resolve();
        }, Math.random() * 1000)
    })
}

async function asyncCount() {
    console.log("start.");
    for (num = 1; num <= 10; num++) {
        await sleepB(num)
    }
    console.log("end.");
}

asyncCount();

上記のプログラムを実行すると、スリープ処理を行いつつ、順番通りにカウント処理が行われていきます。

start.
1
2
3
4
5
6
7
8
9
10
end.

非同期処理を行う関数には async を付けて定義します。

awaitは、呼出した関数が返されるまで待機して、処理を一時停止します。

awaitはasync関数内でないと利用することができません。

asyncとawaitを利用することで、非同期処理で順番通りに処理をすることが可能となります。

時間のかかる処理は非同期処理で効率よく実行しよう

UI内での処理や連携するAPIでの処理は、待ち時間が長くなると、利用者に不便な印象を与えてしまいます。

時間がかかる処理は非同期で実施できないか検討し、効率よく処理を実行すると利用者の印象も良くなります。

 

今回はJavaScriptの非同期処理を解説しました。

以上、参考になれば幸いです。

コメント

タイトルとURLをコピーしました