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

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

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

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

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

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

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

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

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();

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