【JavaScript】非同期処理 (Promise + async/await) を使ったフェードインアニメーション

タグ :

JavaScriptの非同期処理（Promiseとasync/await）を使って、複数の要素を順番にフェードインさせる方法をご紹介します。

Webサイトでよく見かける「ひとつずつ現れるアニメーション」。
これはちょっとした演出ですが、たった数行のコードで直感的に作ることができます！

※同期とは、ひとつのことが終わるまで、次のことを始められないことです。
非同期とは、待ち時間があってもプログラムは止まらず、別の作業を先に進められることです。

以下はコード全体になります。



<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>順番にフェードイン</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    .item {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
      margin-bottom: 10px;
    }

    .visible {
      opacity: 1;
      transform: translateY(0);
    }

    button {
      margin-top: 20px;
      padding: 10px 20px;
    }
  </style>
</head>
<body>

  <h2>順番にフェードイン</h2>
  <div class="item">First</div>
  <div class="item">Second</div>
  <div class="item">Third</div>
  <div class="item">Fourth</div>

  <button id="startBtn">アニメーション開始</button>

  <script>
    // 一定時間待つ Promise
    function wait(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }

    // 順番にフェードイン
    async function fadeInItems() {
      const items = document.querySelectorAll('.item');

      for (const item of items) {
        item.classList.add('visible');
        await wait(500); // 0.5秒のタイムラグ
      }
    }

    // ボタンをクリックしたら開始
    document.getElementById('startBtn').addEventListener('click', fadeInItems);
  </script>

</body>
</html>

See the Pen
Untitled by ryotom (@ryotam-smoke)
on CodePen.

1 解説：Promise + async/await で「待つ」
2 まとめ
3 おわりに

解説：Promise + async/await で「待つ」

1. wait(ms) — 指定時間待つ関数



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

これは指定したミリ秒（ms）だけ待機するPromise関数です。
resolve() を setTimeout の中で呼ぶことで、時間の経過を非同期で制御します。

2. fadeInItems() — 順番にアニメーション



async function fadeInItems() {
  const items = document.querySelectorAll('.item');

  for (const item of items) {
    item.classList.add('visible'); // CSSのtransitionが発動
    await wait(500);               // 0.5秒ずつズラして表示
  }
}

• for…of で .item クラスの要素を順に処理
• .classList.add(‘visible’) により、CSSアニメーションがスタート
• await wait(500) によって、前の要素が動き終わってから次へ進む！

3. イベントリスナーで発火



document.getElementById('startBtn').addEventListener('click', fadeInItems);

ボタンが押されたらアニメーションがスタートします。

まとめ

今回のポイントは以下の通りです。

• Promise + async/await で時間の流れを「待てる」！
• フェードインのタイミングを制御して順番に表示できる
• transition + .classList.add() でCSSアニメーションを実現

応用アイデア

• スクロールしたタイミングで発動するようにする
• クリックだけでなくマウスオーバーなど他のイベントに応用
• 表示順をランダムにしたり、逆順にしたり…

おわりに

JavaScriptでアニメーションを扱うとき、async/await はとても直感的です。
「順番に実行する」「少しずつ遅らせる」といった動きを自然に書けるので、演出の幅が広がります。

ぜひあなたのサイトやWebアプリにも応用してみてください！

前ページに戻る