jQuery DeferredsとPromisesの解説

jQueryのDeferredsとPromises: .then() vs .done()

jQueryのDeferredオブジェクトは、非同期操作の完了や失敗を管理するための仕組みです。このオブジェクトには、"promise"という概念が関連しています。Promiseは、Deferredオブジェクトの現在の状態（未解決、解決、失敗）を表すものです。

.then()メソッド

• 戻り値
  新しいPromiseオブジェクトを返します。
• 引数
  2つの関数を受け取ります。
  • 第1引数: 非同期操作が成功した場合に実行される関数。
• 目的
  複数の非同期操作を連鎖的に実行する。

例

$.ajax('data.json')
  .then(function(data) {
    // 非同期操作が成功した場合の処理
    console.log(data);
  })
  .then(function() {
    // 2つ目の非同期操作が成功した場合の処理
  })
  .catch(function(error) {
    // 非同期操作が失敗した場合の処理
    console.error(error);
  });

.done()メソッド

• 戻り値
  自分自身（Deferredオブジェクト）を返します。
• 引数
  複数の関数を受け取ることができます。

$.ajax('data.json')
  .done(function(data) {
    // 非同期操作が成功した場合の処理
    console.log(data);
  })
  .fail(function(error) {
    // 非同期操作が失敗した場合の処理
    console.error(error);
  });

.then()と.done()の比較

• 失敗処理
  .then()メソッドは.catch()メソッドを使用して失敗時の処理を指定します。.done()メソッドは.fail()メソッドを使用します。
• 連鎖
  .then()メソッドは新しいPromiseオブジェクトを返し、複数の非同期操作を連鎖させることができます。.done()メソッドはDeferredオブジェクトを返し、連鎖はできません。
• 機能
  両メソッドとも非同期操作の成功時の処理を指定します。

• **.done()**は、単一の非同期操作の成功時の処理を指定したい場合に使用します。
• **.then()**は、複数の非同期操作を連鎖して実行したい場合に使用します。

jQueryのDeferredsとPromisesの解説: 実践的な例

.then()メソッドの例: 連鎖的な非同期操作

$.ajax('data.json')
  .then(function(data) {
    // 非同期操作が成功した場合の処理
    console.log('データを取得しました:', data);
    return $.ajax('another_data.json');
  })
  .then(function(data) {
    // 2つ目の非同期操作が成功した場合の処理
    console.log('2つ目のデータを取得しました:', data);
  })
  .catch(function(error) {
    // 非同期操作が失敗した場合の処理
    console.error('エラーが発生しました:', error);
  });

この例では、まずdata.jsonを取得し、その成功後にanother_data.jsonを取得しています。これにより、複数の非同期操作を連鎖的に実行することができます。

.done()メソッドの例: 単一の非同期操作

$.ajax('data.json')
  .done(function(data) {
    // 非同期操作が成功した場合の処理
    console.log('データを取得しました:', data);
  })
  .fail(function(error) {
    // 非同期操作が失敗した場合の処理
    console.error('エラーが発生しました:', error);
  });

この例では、単一の非同期操作であるdata.jsonの取得に対して、成功時の処理と失敗時の処理を指定しています。

Deferredオブジェクトの直接使用

var deferred = $.Deferred();

// 非同期操作をトリガーする
setTimeout(function() {
  deferred.resolve('成功しました');
}, 1000);

// 非同期操作が完了した時の処理
deferred.done(function(result) {
  console.log(result);
});

この例では、直接Deferredオブジェクトを作成し、非同期操作が完了したときにresolve()メソッドを呼び出して成功を通知しています。その後、done()メソッドで成功時の処理を指定しています。

Promises/A+

• 例
  

  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('成功');
    }, 1000);
  });
  
  promise.then(result => {
    console.log(result);
  }).catch(error => {
    console.error(error);
  });
  

• 利点
  さまざまなライブラリやフレームワークで共通のPromise APIを使用できるため、コードの可読性と移植性が向上します。

async/await

• 例
  

  async function fetchData() {
    const response = await fetch('data.json');
    const data = await response.json();
    console.log(data);
  }
  
  fetchData();
  

• 利点
  非同期コードをより読みやすく、理解しやすいコードにできます。

Observable

• 例
  

  import { fromEvent } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  const click$ = fromEvent(document, 'click');
  
  click$.pipe(
    map(event => event.target.tagName)
  ).subscribe(tagName => {
    console.log(tagName);
  });
  

• 利点
  非同期操作だけでなく、リアルタイムデータやイベントの処理にも適しています。

コールバック関数

• 例
  

  function fetchData(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        callback(null, JSON.parse(xhr.responseText));
      } else {
        callback(new Error('エラーが発生しました'));
      }
    };
    xhr.send();
  }
  
  fetchData('data.json', (error, data) => {
    if (error) {
      console.error(error);
    } else {
      console.log(data);
    }
  });
  

• 利点
  シンプルで理解しやすいですが、コールバック地獄と呼ばれる問題が生じることがあります。