jQuery キュー：アニメーションや処理を順番に実行する方法

2024-04-12

jQueryにおけるキューとは？

キューの基本的な仕組み

キューは、FIFO（First-In-First-Out）の順序で処理されます。つまり、最初にキューに追加された処理が最初に実行され、最後に追加された処理が最後に実行されます。

キューを使用するには、以下の2つの方法があります。

queue() メソッド

queue() メソッドを使用して、キューに処理を追加することができます。このメソッドには、以下の2つの引数があります。

処理: キューに追加する処理
オプション: キューの動作を制御するオプション

キューの例

以下は、キューを使用してアニメーションを順番に実行する例です。

$(function() {
  // アニメーション1をキューに追加
  $("#div1").queue(function() {
    $(this).animate({
      width: "200px",
    }, 1000);
  });

  // アニメーション2をキューに追加
  $("#div2").queue(function() {
    $(this).animate({
      height: "200px",
    }, 1000);
  });

  // キューを開始
  $("#div1").dequeue();
});

この例では、#div1 と #div2 という2つの要素に対して、それぞれアニメーションを実行します。アニメーションは、キューに追加された順序で実行されます。

キューを使用する利点は、以下のとおりです。

処理の順番を制御できる
複数の処理を同時に実行させたくない場合に役立つ
アニメーションなどの処理をスムーズに実行できる

処理の順番を間違えると、意図した動作にならない
複雑な処理になると、キューの管理が難しくなる

jQuery キューサンプルコード

例1：アニメーションを順番に実行する

$(function() {
  // アニメーション1をキューに追加
  $("#div1").queue(function() {
    $(this).animate({
      width: "200px",
    }, 1000);
  });

  // アニメーション2をキューに追加
  $("#div2").queue(function() {
    $(this).animate({
      height: "200px",
    }, 1000);
  });

  // キューを開始
  $("#div1").dequeue();
});

例2：ボタンクリック時に処理をキューに追加する

$(function() {
  $("#button").click(function() {
    // 処理をキューに追加
    $("#div").queue(function() {
      // 処理の内容
    });

    // キューを開始
    $("#div").dequeue();
  });
});

この例では、ボタンをクリックすると、処理がキューに追加されます。処理は、キューに追加された順序で実行されます。

例3：処理をキューから削除する

$(function() {
  // 処理をキューに追加
  $("#div").queue(function() {
    // 処理の内容
  });

  // キューから処理を削除
  $("#div").dequeue("clear");
});

この例では、処理をキューに追加してから、すぐにキューから削除します。

jQuery キューの代替方法

コールバックを使用する

アニメーションなどの処理を順番に実行したい場合は、コールバックを使用することができます。

$(function() {
  // アニメーション1を実行
  $("#div1").animate({
    width: "200px",
  }, 1000, function() {
    // アニメーション2を実行
    $("#div2").animate({
      height: "200px",
    }, 1000);
  });
});

この例では、#div1 のアニメーションが完了した後に、#div2 のアニメーションを実行します。

Promise を使用して、処理の完了を待つこともできます。

$(function() {
  // アニメーション1を実行
  $("#div1").animate({
    width: "200px",
  }, 1000).then(function() {
    // アニメーション2を実行
    $("#div2").animate({
      height: "200px",
    }, 1000);
  });
});

$(async function() {
  // アニメーション1を実行
  await $("#div1").animate({
    width: "200px",
  }, 1000);

  // アニメーション2を実行
  await $("#div2").animate({
    height: "200px",
  }, 1000);
});