JavaScriptで一時停止を実現！3つの方法と10の応用例

はじめに
●JavaScriptにおける一時停止の方法
●一時停止の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

JavaScriptで一時停止を実装する方法を学ぶことで、ウェブ開発の幅が大きく広がります。

本記事では、初心者の方でも理解しやすいように、一時停止の実現方法と具体的な応用例を詳しく解説します。

サンプルコードも豊富に用意しておりますので、読み進めるうちに自然と実践力が身につくでしょう。

●JavaScriptにおける一時停止の方法

JavaScriptで一時停止を実現するには、主に3つの手法があります。

各手法の特徴と使い方を見ていきましょう。

○方法1：setTimeoutを使用する

setTimeout関数は、指定した時間が経過した後に、一度だけ関数を実行する機能です。

この関数を利用すれば、一定時間後に処理を実行することができます。

例えば、3秒後に「Hello!」と表示したい場合、次のようなコードを書きます。

function hello() {
  console.log('Hello!');
}

setTimeout(hello, 3000); // 3秒後に'Hello!'と表示される

このコードを実行すると、3秒後にコンソールに「Hello!」と表示されます。

setTimeoutは、第一引数に実行したい関数、第二引数に遅延時間（ミリ秒）を指定します。

○方法2：Promiseとasync/awaitを使用する

JavaScriptの非同期処理に用いられるPromiseと、それを更に扱いやすくするasync/awaitを組み合わせることで、一時停止のような動作を実現できます。

この方法は、コードの可読性が高く、複雑な非同期処理を書く際に便利です。

次のサンプルコードは、2秒間の一時停止を実現しています。

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

async function main() {
  console.log('Start');
  await sleep(2000);
  console.log('End');
}

main(); // "Start"と表示された後、2秒後に"End"と表示される

このコードでは、sleep関数でPromiseを返し、main関数内でawaitを使用してその解決を待っています。

結果として、「Start」と表示された後、2秒間の待機を経て「End」が表示されます。

○方法3：setIntervalとclearIntervalを使用する

setInterval関数は、指定した時間ごとに関数を繰り返し実行する機能です。

この関数を使えば、一定間隔で処理を行うことができます。

ただし、一時停止のような動作を実現するには、clearInterval関数を使って繰り返しを停止する必要があります。

次のサンプルコードは、1秒ごとにカウントアップし、5秒後にカウントを停止する例です。

let count = 0;

function countUp() {
  console.log(count++);
}

const intervalId = setInterval(countUp, 1000);

setTimeout(() => {
  clearInterval(intervalId);
}, 5000); // 5秒後にカウントが停止する

このコードでは、setIntervalで1秒ごとにcountUp関数を実行し、5秒後にclearIntervalでその実行を停止しています。

●一時停止の応用例

JavaScriptの一時停止機能を利用すると、様々な効果や機能を実現できます。

ここでは、10の応用例とそれぞれのサンプルコードを紹介します。

この例を参考に、自分のプロジェクトに適した一時停止機能を実装してみましょう。

○サンプルコード1：スライドショー

画像のスライドショーは、JavaScriptの一時停止機能を活用した典型的な例です。

次のコードでは、3秒ごとに画像が切り替わるスライドショーを実現しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slideshow</title>
  <style>
    .slideshow {
      position: relative;
      width: 300px;
      height: 200px;
      overflow: hidden;
    }

    .slideshow img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s;
    }

    .slideshow img.active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slideshow">
    <img src="image1.jpg" alt="image 1" class="active">
    <img src="image2.jpg" alt="image 2">
    <img src="image3.jpg" alt="image 3">
  </div>
  <script>
    const images = document.querySelectorAll('.slideshow img');
    let currentIndex = 0;

    function changeImage() {
      images[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % images.length;
      images[currentIndex].classList.add('active');
    }

    setInterval(changeImage, 3000);
  </script>
</body>
</html>

このコードでは、setInterval関数を使用して3秒ごとにchangeImage関数を呼び出し、画像を切り替えています。

CSSのtransitionプロパティを使用することで、滑らかな切り替え効果も実現しています。

○サンプルコード2：アニメーション

一時停止機能を利用して、簡単なアニメーション効果を作成することができます。

次のサンプルコードでは、1秒ごとに要素の位置が変わるアニメーションを実現しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animation</title>
  <style>
    .box {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');
    let position = 0;

    function animate() {
      position += 10;
      box.style.left = position + 'px';
    }

    setInterval(animate, 1000);
  </script>
</body>
</html>

このコードでは、setInterval関数を使用して1秒ごとにanimate関数を呼び出し、青い四角形を右に移動させています。

positionの値を増加させることで、徐々に要素が右に移動していく様子が表現されています。

○サンプルコード3：ローディング画面

ウェブアプリケーションでよく見かけるのが、一定時間経過後にローディング画面が非表示になる機能です。

次のサンプルコードでは、3秒後にローディング画面が非表示になる例を表しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Screen</title>
  <style>
    .loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .loading h1 {
      color: white;
    }
  </style>
</head>
<body>
  <div class="loading">
    <h1>Loading...</h1>
  </div>
  <script>
    const loading = document.querySelector('.loading');

    function hideLoading() {
      loading.style.display = 'none';
    }

    setTimeout(hideLoading, 3000);
  </script>
</body>
</html>

このコードでは、setTimeout関数を使用して3秒後にhideLoading関数を呼び出し、ローディング画面を非表示にしています。

実際のアプリケーションでは、データの読み込みが完了したタイミングでローディング画面を非表示にすることが一般的です。

○サンプルコード4：テキストタイピングアニメーション

一時停止機能を利用して、テキストが入力されているかのようなアニメーションを作成することができます。

次のサンプルコードでは、文字が1文字ずつ表示されるテキストタイピングアニメーションを実現しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing Animation</title>
</head>
<body>
  <h1 id="text"></h1>
  <script>
    const textElement = document.getElementById('text');
    const text = 'Hello, World!';
    let index = 0;

    function type() {
      if (index < text.length) {
        textElement.textContent += text[index];
        index++;
        setTimeout(type, 100);
      }
    }

    type();
  </script>
</body>
</html>

このコードでは、setTimeout関数を再帰的に呼び出すことで、100ミリ秒ごとに1文字ずつテキストを表示しています。

これで、タイピングしているかのような動的な効果が得られます。

○サンプルコード5：テキストの自動スクロール

次のサンプルコードでは、テキストが自動で左から右へスクロールするアニメーションを実現しています。

CSSアニメーションを使用することで、スムーズなスクロール効果を簡単に実装できます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Scroll Text</title>
  <style>
    .scroll-text {
      font-size: 24px;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
    }
    .scroll-text span {
      display: inline-block;
      padding-left: 100%;
      animation: scroll 8s linear infinite;
    }
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  </style>
</head>
<body>
  <div class="scroll-text">
    <span>This is an example of auto-scrolling text. Enjoy!</span>
  </div>
  <script>
  </script>
</body>
</html>

このコードでは、CSSのanimationプロパティを使用して、テキストを左から右へ自動的にスクロールさせています。

JavaScriptを使用せずにアニメーションを実現できるのがこの方法の利点です。

○サンプルコード6：マウスオーバー時の一時停止

ユーザーの操作に応じてアニメーションを制御する例として、マウスオーバー時にアニメーションが一時停止する機能を実装してみましょう。

次のサンプルコードでは、CSSアニメーションを使用して、マウスオーバー時にアニメーションが一時停止する例を示しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pause on Mouseover</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
      animation: move 4s linear infinite;
    }
    .box:hover {
      animation-play-state: paused;
    }
    @keyframes move {
      0% {
        left: 0;
      }
      100% {
        left: calc(100% - 100px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
  </script>
</body>
</html>

このコードでは、CSSのanimationプロパティを使用して青い四角形を左右に動かし、animation-play-state: paused;プロパティを使用してマウスオーバー時にアニメーションを一時停止させています。

JavaScriptを使用せずに簡単に実装できる点が特徴です。

○サンプルコード7：APIリクエスト間隔調整

WebアプリケーションでAPIを使用する際、連続して多数のリクエストを送信すると、サーバーに負荷がかかったり、APIの利用制限に抵触したりする可能性があります。

そこで、APIリクエストの間隔を調整して、一定の間隔を空けてリクエストを送信する方法を紹介します。

async function fetchApiData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

async function requestDataWithInterval(urls, interval) {
  for (const url of urls) {
    const data = await fetchApiData(url);
    console.log(data);
    await new Promise(resolve => setTimeout(resolve, interval));
  }
}

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3',
];
requestDataWithInterval(urls, 2000);

このコードでは、requestDataWithInterval関数を使用して、指定されたURL配列に対して順番にAPIリクエストを送信しています。

各リクエストの間に2秒の間隔を設けることで、連続的なリクエスト送信を避けています。

これで、APIの利用制限に引っかかるリスクを軽減し、サーバーへの負荷を分散させることができます。

○サンプルコード8：ゲームの一時停止機能

ゲーム開発において、プレイヤーがゲームを一時停止できる機能は重要です。

次のサンプルコードでは、シンプルなゲームの一時停止機能を実装しています。

Pキーを押すことでゲームが一時停止し、もう一度押すと再開します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game Pause Function</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    let isPaused = false;

    function gameLoop() {
      if (!isPaused) {
        update();
        draw();
      }
      requestAnimationFrame(gameLoop);
    }

    function update() {
      // ゲームオブジェクトの更新処理をここに記述
    }

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // ゲームオブジェクトの描画処理をここに記述
    }

    document.addEventListener('keydown', (event) => {
      if (event.key === 'p' || event.key === 'P') {
        isPaused = !isPaused;
      }
    });

    gameLoop();
  </script>
</body>
</html>

このコードでは、requestAnimationFrameを使用してゲームループを実装し、isPaused変数を用いてゲームの一時停止状態を管理しています。

Pキーを押すとisPausedの値が切り替わり、ゲームの更新と描画が停止または再開されます。

○サンプルコード9：デバッグ時の一時停止

プログラムのデバッグ時に、特定の箇所で実行を一時停止させたい場合があります。

JavaScriptにはdebuggerステートメントが用意されており、これを使用することでブラウザの開発者ツールが開いている場合に、コードの実行を一時停止させることができます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Debug Pause Example</title>
</head>
<body>
  <button id="debugButton">Debug</button>
  <script>
    document.getElementById('debugButton').addEventListener('click', () => {
      debugger;
      console.log('This line will only run after resuming from the debugger.');
    });
  </script>
</body>
</html>

このコードでは、ボタンをクリックするとdebuggerステートメントが実行され、ブラウザの開発者ツールが開いている場合、その箇所でコードの実行が一時停止します。

開発者はこの状態で変数の値を確認したり、ステップ実行したりすることができます。

○サンプルコード10：ユーザーの操作待ち

ユーザーの操作を待って処理を進める場合、Promiseとasync/awaitを組み合わせることで、簡潔かつ読みやすいコードを書くことができます。

次のサンプルコードでは、ユーザーがボタンをクリックするまで処理を一時停止させています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Action Wait</title>
</head>
<body>
  <button id="waitButton">Click me to continue</button>
  <script>
    const waitButton = document.getElementById('waitButton');

    function waitForButtonClick() {
      return new Promise((resolve) => {
        waitButton.addEventListener('click', () => {
          console.log('Button clicked');
          resolve();
        }, { once: true });
      });
    }

    async function main() {
      console.log('Waiting for button click...');
      await waitForButtonClick();
      console.log('Button clicked, resuming execution');
    }

    main();
  </script>
</body>
</html>

このコードでは、waitForButtonClick関数がPromiseを返し、ボタンがクリックされるまで処理を一時停止させています。

main関数内でawaitを使用することで、ボタンがクリックされるまで後続の処理を待機させることができます。