jQuery Academy · レッスン

複数の非同期タスクの処理

Q: 「複数の非同期タスクの処理」で何を学びますか？

複数の独立または依存する非同期タスクを調整し、すべての処理で適切な実行順序とエラー処理を確保する方法を身につけます。 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

複数の独立または依存する非同期タスクを調整し、すべての処理で適切な実行順序とエラー処理を確保する方法を身につけます。

「複数の非同期タスクの処理」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン3/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

非同期タスクを調整する理由

Web開発では、多くの処理が非同期で行われます。つまり、処理がすぐに完了するとは限らず、厳密な順序で実行されるとも限りません。サーバーからのデータ取得、画像の読み込み、アニメーションの実行などを考えてみてください。

アプリケーションでこれらのタスクを複数同時に実行したり、特定の順序で実行したりする必要がある場合は、それらを効果的に調整する方法が必要です。このレッスンでその方法を学びます。

複数タスクの課題

ユーザーのプロフィールと最新の通知を読み込む必要があるとします。どちらも別々のサーバーリクエストです。

両方が完了したことをどのように確認しますか？
一方が失敗した場合はどうしますか？
一方が他方に依存している場合はどうしますか（たとえば、プロフィールに含まれる特定のユーザーIDを使って通知を取得する場合）？

適切に調整しないと、UIに不完全なデータが表示されたり、アプリケーション全体が動作しなくなったりする可能性があります。

並列処理のための`$.when()`

jQueryの$.when()は、複数の独立した非同期処理を調整する強力なツールです。1つ以上のDeferred/Promiseオブジェクトを引数として受け取ります。

$.when()はマスターPromiseを返します。このPromiseは、渡された個々のPromiseがすべて解決されると解決されます。いずれか1つでも拒否されると、マスターPromiseは直ちに拒否されます。

`$.when()`の例：並列でデータを取得する

2種類のデータセットを並列で取得する処理をシミュレートしてみましょう。説明のため、$.Deferred()を使ってAJAXリクエストを再現します。

次のコードを実行してみてください。

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

`$.when()`の結果を処理する

$.when()のPromiseが解決されると、その.done()コールバックは、元の各Promiseの解決値を個別の引数として受け取ります。

$.when()にN個のPromiseを渡すと、.done()コールバックはN個の引数を受け取ります。
引数の順序は、$.when()にPromiseを渡した順序と同じです。

これにより、すべての結果が準備できた時点で、結果全体を簡単に扱えます。

`$.when()`のエラー処理

並列処理の1つが失敗した場合はどうなるでしょうか。個々のPromiseのいずれかが拒否されると、$.when()のマスターPromiseは直ちに拒否されます。

その後、.fail()コールバックが呼び出され、最初に失敗したPromiseから拒否理由を受け取ります。残りの並列処理は引き続き完了しますが、$.when()はすでに失敗を通知しています。

例：失敗を含む`$.when()`

前の例を変更し、取得処理の1つが失敗するようにしてみましょう。出力を確認してください。

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

依存関係のあるタスクを調整する

タスクが独立していない場合もあります。次のような処理が必要になることがあります。

ユーザーIDを取得する。
そのIDを使ってユーザーの詳細情報を取得する。
その詳細情報を使って、ユーザー固有の投稿を取得する。

この場合、各ステップが前のステップの成功と結果に依存する、非同期処理の順次チェーンが必要です。これは.then()または.pipe()をチェーンして実現します。

例：依存関係のあるAJAXをチェーンする

2番目のAJAX呼び出しが1番目の結果に依存する、2つのシミュレーション済みAJAX呼び出しをチェーンする方法を見てみましょう。最初の.then()の戻り値が、次の.then()への入力になることに注目してください。

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

知識を確認しましょう

ユーザーのプロフィールと友達リストを読み込みたいとします。友達リストのリクエストには、プロフィールデータに含まれるユーザーIDが必要です。

この調整に最も適したjQueryのアプローチはどれですか？

振り返り：非同期処理の調整を極める

複数の非同期タスクを効果的に処理する方法を学びました。

$.when()：独立したタスクを並列で実行し、すべての完了またはいずれかの失敗を待つ場合に適しています。
.then()によるチェーン：ある処理の出力が次の処理に必要となる、依存関係のあるタスクに最適です。
エラー処理：$.when()とチェーンされたPromiseはどちらも、どの段階でも拒否を捕捉できる.fail()を提供するため、アプリケーションの堅牢性が向上します。

これらのパターンは、jQueryで動的で応答性の高いWebアプリケーションを構築するうえで重要です。

よくある質問

「複数の非同期タスクの処理」レッスンは無料ですか？

はい。「複数の非同期タスクの処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「複数の非同期タスクの処理」で何を学びますか？

複数の独立または依存する非同期タスクを調整し、すべての処理で適切な実行順序とエラー処理を確保する方法を身につけます。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/3です。

「複数の非同期タスクの処理」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る