JavaScriptでsleep機能を実装する方法は？async/awaitやPromiseを使って非同期処理をワンライナーで制御しよう

ペン子

JavaScriptのsleep機能ってどんな機能なんだろう。

非同期処理での制御もできるのかな。

こんな悩みをもっている初心者の方が多いかと思います。
今回はそんな悩みを解消するためにJavaScriptのsleep機能についてまとめました。
JavaScriptのsleep機能を使いこなし、同期・非同期処理での動かし方をできるようになりましょう。

一般的なsleep機能とは

一般的なsleep機能とは、プログラムの実行を一定時間停止する機能です。

一定時間後に処理を継続することができ、主に繰り返し処理やスレッド処理などで使われます。
時間をおいて処理を実行したい場合や高負荷の処理抑えたい場合に便利な機能です。

#include <stdio.h>
#include <unistd.h>
int main(void) { printf("START"); sleep(3); printf("FINAL"); return 0;
}

例えば、C言語でsleep機能を記述すると上記のようになります。
sleepメソッドの引数に一時停止したい秒数を指定することでその時間プログラムの実行を停止してくれます。
上記の例では3秒間の停止をコンピュータに命令しています。

JavaScriptのsleep機能を実現させる方法

JavaScriptには他の言語で使用できるようなsleep機能は実装されていません。
しかし、他の方法を利用して一時停止処理を実現することができます。
ここでは、sleep機能の代わりになるような一般的な方法を紹介します。

setTimeout関数

setTimeout(function() { console.log("sleep機能の代替");
}, 4000);

JavaScriptでsleep機能と同じように一時停止させる一般的な方法としては、setTimeout関数を使用します。
setTimeout関数は、第２引数で指定した時間（ミリ秒単位）が経過した後に、第１引数で指定した関数を実行するようにスケジューリングしています。
例として、上記の例では4000ミリ秒後に「sleep機能の代替」をコンソールに出力しています。

JavaScriptのsleep機能を非同期処理で実現させる方法

一時停止処理を非同期処理で扱うこともできます。
この章では、非同期処理で記述する方法を２つ紹介します。

Promiseオブジェクト

function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms));
}
async function main() { console.log("START"); await sleep(1000); console.log("sleep機能の代替"); console.log("FINAL");
}
main();

Promiseオブジェクトを使用することで非同期処理を扱うことができます。
Promiseオブジェクトを使うことによって、非同期処理が完了した後に処理を継続することができます。
例として、上記のコードでは1000ミリ秒後に「sleep機能の代替」というメッセージをコンソールに出力します。

async/await

async function sleep() { await new Promise(resolve => setTimeout(resolve, 3000)); console.log("sleep機能の代替");
}
sleep();

async/awaitを使用して、一定時間待機させることができます。
上記の例では、async functio内で、await演算子をPromiseオブジェクトに使うことによって3000ミリ秒後に「sleep機能の代替」というメッセージをコンソールに出力します。

sleep機能をワンライナー（一行）で簡潔に書ける方法

(async () => { console.log('START'); await new Promise(resolve => setTimeout(resolve, 1000)); console.log('Final');
})();

JavaScriptのsleep機能をワンライナーで処理する方法は、asynv/awaitとPromiseオブジェクトをアロー関数で組み合わせることによって実現できます。
アロー関数は様々な処理をワンライナーで記述することができるので覚えておきましょう。

まとめ

今回はJavaScriptのsleep機能についてまとめました。
async/awaitやPromiseを使って非同期処理を行う方法が実務では多く出てくると思うので覚えておきましょう。
ついでに、ワンライナーで処理できるとコードの可読性が上がるので意識してみてください。