【JavaScript】sleepとは？使い方を初心者向けにわかりやすく解説

プログラミング言語•2025/2/15

はじめに

JavaScriptでプログラムを組んでいると、処理を少しの間だけ止めたいと考える場面があります。他のプログラミング言語では、専用の関数を呼び出して「休止」させるようなイメージを持つ方もいるかもしれません。しかし、JavaScriptにはいわゆる「sleep」関数のように処理を止めるための標準関数が存在しません。そのため、異なるアプローチを用いて同等の効果を実現する必要があります。実務では、ユーザーインターフェースの操作感を調整したり、外部APIを呼び出す間隔を制限したりする目的で、一定時間待ってから次の処理を進めたい状況がたびたび発生します。こうした場面に役立つのが「待機」を実装するためのさまざまなテクニックです。本記事では、JavaScriptで処理を一時的に遅らせる方法を詳しく見ていきます。そして非同期処理の基本的な考え方や、待機を安全に行ううえで押さえておきたいポイントも解説していきます。初心者の方でも理解しやすいように、なるべく専門用語を噛み砕きながら具体的に紹介しますので、ぜひ最後まで読んでみてください。

この記事を読むとわかること

JavaScriptにおける「待機」の必要性
同期処理と非同期処理の違い
実務で役立つsleep相当の実装例 (setTimeout、Promise、async/awaitなど)
実装する際のメリット・デメリットとトラブルシューティング

JavaScriptで待機する方法を学ぶ意義

プログラミング初心者の方にとって、まずは「なぜ処理をわざわざ止める必要があるのか」を知ることが大切でしょう。多くのWebサイトやWebアプリケーションは、ユーザーからの操作を受け取るイベントドリブン型の動きをします。イベントが発生するたびにすぐ動作するのは便利ですが、場合によっては一時停止やタイミングをずらす必要が生まれます。たとえば、アニメーションをステップごとに表示したいときや、ユーザーが続けて操作を行う場合に落ち着いて次の動作を待ちたいときなどです。また、APIを連続して呼び出すときに、アクセス制限やサーバー負荷の観点から、一定の間隔を置いて呼び出したいことがあります。こうした「待ち時間の挿入」ができれば、サイトやアプリの使いやすさを高められます。さらに、処理順序を意図的に制御できるようになることで、トラブルを防ぎやすくなるという面もあります。実務では、処理を一括でまとめるよりも、あえて少しずつ実行したほうが安全なケースもあるのです。 JavaScriptはシングルスレッドで動作し、ブロッキング（後述）を起こすと画面操作全体が止まってしまいます。そのため、単に「止める」というよりは「非同期の流れをコントロールする」意識が重要になります。こうした考え方を理解し、うまく待機処理を実装できるようになると、アプリの安定性やユーザー体験を向上させることが可能になります。

同期処理と非同期処理の違い

JavaScriptを扱ううえで押さえておきたいのが、同期処理と非同期処理という概念です。同期処理とは、コードが上から順番に実行され、ひとつの処理が終わるまでは次の処理に進まない仕組みを指します。たとえば、以下は非常にシンプルな同期処理の考え方です。行Aが終われば行Bへ、行Bが終われば行Cへと、順番通りに処理が進むわけです。

一方、JavaScriptでは実際に行われている多くの操作は非同期処理です。非同期処理は、特定の時間のかかる処理を別のルートで行い、結果を受け取ったら続きを実行します。非同期を活用すれば、重い作業が発生してもアプリ全体がストップすることを防ぎながら、バックグラウンドで処理を進めることができます。ただし、非同期処理は書き方を誤ると、コードの読みやすさやデバッグのしやすさを損なう恐れがあるため注意が必要です。

JavaScriptはブラウザ環境でもNode.js環境でも、基本的に非同期を前提としたデザインになっています。ユーザー入力やネットワーク通信など、待ち時間が発生しやすい作業をスムーズに処理するための仕組みとして重宝されています。しかし、ちょっとだけ処理を遅らせたい場合でも、非同期のやり方を押さえておかないと「意図せずタイミングを逃す」「コールバックが複雑になってしまう」という状況に陥りがちです。そのため、まずは同期・非同期の考え方の違いを理解し、どの場面でどちらが求められるかを整理することが大切です。

setTimeoutで擬似的にsleepを実現

JavaScriptで「sleep」を再現する方法として、最もよく知られているのがsetTimeoutを使ったアプローチです。 setTimeoutは「指定した時間の後に指定した関数を実行する」機能を持っています。これは「処理を完全に止める」わけではないものの、結果的に一定時間後に処理が続行されるため、sleepと同じような効果を得ることができます。たとえば、あるボタンをクリックしてから2秒後にメッセージを表示したい場合などに使うと、タイミングを調整できます。

ただし、setTimeoutはその特性上、コードの流れが分断されやすいです。いわゆるコールバック関数を引数に渡すため、処理を連続して書きにくくなります。もしも複数の待機ステップを連続で組み合わせたいとき、何度もコールバックをネストさせる「コールバック地獄」に陥りやすいという課題があります。

また、実行タイミングは厳密ではなく、JavaScriptエンジンや環境の状況により多少の誤差が生じることがあります。たとえばsetTimeout(fn, 1000)と書いても、正確に1秒後に実行されることが保証されているわけではありません。処理が混み合っているとわずかに遅延が発生することがあります。アプリ全体の動きに深刻な影響が出るケースは多くありませんが、厳密にタイミングを合わせたい場面では注意が必要です。

setTimeoutのコード例


console.log("処理を開始します");

setTimeout(() => {
  console.log("2秒待ってから実行されます");
}, 2000);

console.log("setTimeoutの後のコードが先に実行されます");

このコードでは、最初のconsole.logで「処理を開始します」がすぐに表示されたあと、setTimeoutによる待機がスタートします。そして約2秒が経過したあとで、コールバック関数に含まれる「2秒待ってから実行されます」が実行されます。その間に最後の「setTimeoutの後のコードが先に実行されます」が先に表示されるため、結果として処理の順番が少し意図と違うと感じるかもしれません。しかし、これはJavaScriptが非同期で動く仕組みによるものです。

Promiseを活用したsleep

JavaScriptの非同期処理を整理して記述できる仕組みとして、Promiseというものがあります。 Promiseは一連の非同期処理を「成功（resolve）」と「失敗（reject）」のどちらかで終わらせる、という明確なルールを持っています。この仕組みにより、thenやcatchメソッドを使って、続く処理をチェーンのようにつなげやすくなります。

sleepのような一定時間待機の実装にもPromiseを利用することが可能です。 PromiseコンストラクタでsetTimeoutをラップし、resolveを呼び出すまで待つ形にすると、sleepを模擬できます。複数の待機処理をつなげる場合にも、コールバック地獄を少し緩和できるメリットがあります。

ただし、Promiseをそのまま使う場合、コードがthenの連鎖でやや読みづらくなることもあります。あくまで「コールバックよりは分かりやすいが、状況によってはasync/awaitのほうが読みやすい」という認識を持っておくとよいでしょう。

Promiseを使った待機処理のコード例


function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

console.log("処理を開始します");

sleep(2000)
  .then(() => {
    console.log("2秒待ちました");
    return sleep(1000);
  })
  .then(() => {
    console.log("さらに1秒待ちました");
  });

この例では、sleep という関数を定義し、内部でsetTimeoutを使って待機処理を行っています。 sleep(2000) で2秒待ってからメッセージを表示し、続いてもう1秒待って別のメッセージを表示するイメージです。 thenをつなぐことで、複数の非同期ステップを直感的に表現できるようになっています。コールバックを直接ネストするよりも整理しやすい点が特徴です。

async/awaitとsleep

Promiseの次に登場した書き方として、async/awaitがあります。これはPromiseを前提にしつつ、非同期コードを同期処理のような見た目で書ける構文です。コードの読みやすさやメンテナンス性が向上するケースが多く、現在では広く使われています。

async/awaitを使えば、「ここで一度待ちたい」という箇所を同期的な処理っぽく表現できるので、sleep関数が自然な形で組み込まれます。たとえば「2秒待つ→特定の処理を実行→さらに1秒待つ」といった手順を、縦に読み下せるので、コードの流れを追いやすいです。ただし、async/awaitはPromiseが返すオブジェクトを対象にawaitを用いる必要があるため、sleepの関数自体はPromiseベースである必要があります。

async/awaitを使った待機処理のコード例


function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function main() {
  console.log("処理を開始します");

  await sleep(2000);
  console.log("2秒待ちました");

  await sleep(1000);
  console.log("さらに1秒待ちました");
}

main();

await は、その行でPromiseが完了するまで待機します。したがって、同期的なイメージでコードが書けるようになり、読み手にとって負担が少なくなるのがメリットです。また、try/catchを使ってエラーハンドリングをまとめて書くこともできるため、複数の非同期処理を扱う際には非常に便利といえます。

実務でよくある利用シーン

待機処理をうまく活用できると、実務でも多彩なメリットがあります。以下では、いくつかの具体的なシーンを挙げながら、どのようにsleep相当のコードが役立つかを見ていきましょう。

ユーザーインターフェースの調整

UI（ユーザーインターフェース）において、あまりにも処理が瞬時に切り替わると、ユーザーが状況を理解しづらくなることがあります。たとえば、連続した画面遷移やアニメーションを行う際、ほんの少し間をおいて段階的に表示させると、ユーザーが内容を認識しやすくなります。このような場合にsleepを活用すると、余計な負荷をかけずに、表示タイミングをコントロールできます。

バッチ処理などでの一時停止

大量のデータを一気に処理すると、ネットワークやサーバーへの負荷が高まるリスクがあります。そのため、一定件数ごとに休憩を挟んで処理を進めることで、安定性を保ちながらバッチ処理を行えます。 JavaScriptでサーバーとやりとりしながらデータ更新する際にも、sleepを実装すると適度にペース配分ができるでしょう。

APIコールの間隔調整

外部APIを呼び出す場合、リクエスト数や時間当たりの呼び出し回数に上限を設定しているサービスが多々あります。これを超過するとエラーになったり、アカウントが制限されたりする可能性があります。そこで、APIを複数回呼ぶときに意図的に待ち時間を挟むと、制限に抵触しにくくなります。 sleepを使って数秒間隔でリクエストを投げるように調整すれば、安全にAPIを利用できます。

メリットとデメリット

sleep相当の機能をJavaScriptで実装できるのは便利ですが、メリットだけでなくデメリットも把握しておくことが大事です。まずメリットとしては、処理のタイミングを細かくコントロールできることが挙げられます。ユーザー操作やサーバー負荷などに応じて、適切に一時停止や遅延を入れられるのは大きな利点です。また、複数の非同期処理を組み合わせる際にも、見通しのよいコードを書きやすくなります。

一方のデメリットとしては、JavaScriptの実行がシングルスレッドである点が影響する可能性があります。たとえば、ブロッキングする形でsleepを実装してしまうと、画面全体が固まってしまう恐れがあります。また、sleepを使いすぎると処理全体が遅延し、ユーザー体験を損ねる結果になるかもしれません。タイミングのコントロールは有益ですが、過度に遅延を入れると、逆にパフォーマンスが落ちるリスクもあります。

JavaScriptは基本的にイベントループを活用して非同期処理を管理します。 sleepもあくまでその仕組みを利用した一形態であることを意識しましょう。

さらに、複数の非同期処理をうまく連携させたい場合、Promiseやasync/awaitの書き方を理解していないと保守が難しくなります。特に初心者の方は、一見シンプルに見えるsleepのコードが、実際には大きなアプリの一部でどう作用するかを想像するのが難しいかもしれません。小さな例から始めて、だんだんと規模を大きくしていくのがおすすめです。

パフォーマンスへの配慮

JavaScriptでsleepを実装する際、パフォーマンスを意識することはとても重要です。ユーザーがアプリを触っている最中に処理が無駄に止まってしまうと、操作感が悪くなります。とくにブラウザで動くアプリでは、メインスレッドを塞がず、非同期の形で待機を取り入れるのが鉄則です。 Promiseやasync/awaitは、その点で比較的安全に扱える方法といえます。

ただし、どの方法を使っても、過度に待機時間を設定するとアプリの応答性が低下してしまいます。たとえば1秒ごとにリクエストを送るために毎回長めのsleepを挟んでいると、その間はユーザーが結果を待ち続けることになります。本当に必要なタイミングでのみ、適切な秒数だけ遅延を入れるという運用が望ましいでしょう。

また、メモリ使用量やCPU負荷にも注意が必要です。 sleepを明示的に使わなくても、非同期処理が大量に同時進行していると、イベントループが混雑して思わぬ遅延が発生することがあります。パフォーマンスの問題は、sleepの有無だけではなく、コード全体の設計やデータの扱い方とも密接に関連しています。

トラブルシューティング

sleepを導入したあとに「思ったより処理が遅い」「順番がおかしい」などのトラブルに直面するケースがあります。こうしたときは、以下の点をチェックしてみるとよいでしょう。

1. コールスタックの流れを確認する

非同期処理が連なっていると、どのタイミングで何が実行されるか見失いがちです。 console.logなどで処理の順番を確認すると、原因がわかる場合があります。

2. ネットワーク通信との組み合わせ

APIコール後にsleepを入れると、ネットワーク通信の遅延とsleepの遅延が重なります。実際には通信が早く終わる場合もあるので、無駄な待機が発生していないか見直しましょう。

3. イベントループのブロッキング

もしブロッキングを起こす書き方をしている場合、ユーザー操作が全く受け付けられない状態になるかもしれません。なるべく非同期の仕組みを利用し、画面が固まるのを防ぐように設計することが重要です。

4. 実装目的が明確か

「なんとなく処理を遅らせたい」という理由だけでsleepを使うと、かえって混乱を招きやすいです。なぜ待機が必要なのかを改めて考え、その上で最適な方法を選ぶようにすると、問題を絞り込みやすくなります。

sleepの時間を適切に設定しないと、結果的にユーザー体験が悪化するリスクがあります。トラブルシューティングの際は、まず不要な待機が混ざっていないかを確かめることが大切です。

まとめ

JavaScriptでは、他の言語によくあるような「sleep」関数がない代わりに、setTimeoutやPromise、async/awaitなどの仕組みを使って、実質的に同じ効果を得ることができます。初心者の方にとっては、最初は「なぜ処理を簡単に止められないのか」が疑問に思えるかもしれません。しかし、JavaScriptがシングルスレッドで動き、非同期処理を前提とした設計になっているため、使い方を正しく理解することが必要です。

実務では、UIの演出からサーバーサイドのバッチ処理、APIコール間隔の調整まで、さまざまな場面で「数秒待ってから次へ進む」という操作が役に立ちます。ただし、sleepを取り入れるときは、パフォーマンスへの影響やコールバックの複雑さにも注意しましょう。 Promiseやasync/awaitを上手に利用すれば、非同期処理を見通しよく整理しつつ、必要な箇所だけ意図的に時間を置くことができます。

最終的には、sleep相当の実装はあくまで道具のひとつです。目的を明確にし、不要な待機を作りすぎないように設計することがポイントになります。ぜひ、コード例を参考にしながら、実際の開発で「ここで少し待ちたい」というシーンに応じて最適な方法を選んでみてください。