JavaScript 非同期処理の待機：Promise、async/awaitを超えた多様なアプローチ

2024-07-27

JavaScript における同期処理とは？

同期処理 とは、コードを上から順番に処理していく方式です。つまり、前の処理が終わるまで次の処理は実行されない ということを意味します。

一方、非同期処理 は、前の処理が終わるのを待たずに次の処理を開始し、処理が完了したタイミングで結果を処理するという方式です。

JavaScript の同期処理の例

console.log('1'); // 最初にコンソールに '1' を出力
console.log('2'); // 次にコンソールに '2' を出力
console.log('3'); // 最後にコンソールに '3' を出力

このコードでは、 console.log('1') が実行され、コンソールに '1' が出力されます。次に console.log('2') が実行され、コンソールに '2' が出力されます。そして最後に console.log('3') が実行され、コンソールに '3' が出力されます。このように、コードは上から順番に処理されていきます。

jQuery での同期処理の実現方法

jQuery で同期処理を実現するには、$.ajax() メソッド の async オプションを false に設定します。

$.ajax({
  url: '/data.json',
  async: false,
  success: function(data) {
    // データ処理
  },
  error: function(error) {
    console.error(error);
  }
});

このコードでは、/data.json という URL に非同期リクエストを送信します。しかし、async オプションを false に設定しているため、リクエストが完了するまで次の処理は実行されません。

同期処理の注意点

JavaScript における同期処理は、プログラムを分かりやすく記述できるという利点があります。しかし、以下のような注意点もあります。

パフォーマンスへの影響: 同期処理は、非同期処理よりもパフォーマンスに影響を与えやすいです。これは、前の処理が終わるまで次の処理を実行できないためです。
UI のブロック: 同期処理が長い場合、UI がブロックされてしまう可能性があります。これは、ユーザーが操作を受け付けなくなるため、問題となる可能性があります。

JavaScript における同期処理は、コードを分かりやすく記述できるという利点がありますが、パフォーマンスへの影響や UI のブロックなどの注意点もあります。

非同期処理と同期処理の違い

function nonAsync() {
  console.log('非同期処理開始');
  // 非同期処理をシミュレートするために、setTimeout() を使用する
  setTimeout(function() {
    console.log('非同期処理完了');
  }, 1000);
  console.log('非同期処理完了（実際には完了していない）');
}

function async() {
  console.log('同期処理開始');
  console.log('同期処理完了');
}

nonAsync();
async();

このコードを実行すると、以下の出力が得られます。

同期処理開始
同期処理完了
非同期処理開始
非同期処理完了（実際には完了していない）

nonAsync() 関数は、非同期処理をシミュレートするために setTimeout() を使用しています。
async() 関数は、同期処理を実行します。

上記のコードでは、nonAsync() 関数は console.log('非同期処理開始') を出力してから setTimeout() を呼び出し、1 秒後に console.log('非同期処理完了') を出力するように指示します。

しかし、setTimeout() は非同期処理であるため、console.log('非同期処理完了（実際には完了していない）') はすぐに実行され、実際には非同期処理が完了していないにもかかわらず、完了したように表示されます。

一方、async() 関数は同期処理であるため、console.log('同期処理開始') と console.log('同期処理完了') は順番に実行されます。

jQuery による同期処理の実現

以下のコードは、jQuery を使用して同期処理を実現する例です。

$.ajax({
  url: '/data.json',
  async: false,
  success: function(data) {
    console.log('データ取得完了:', data);
  },
  error: function(error) {
    console.error(error);
  }
});

console.log('次の処理');

このコードでは、/data.json という URL に非同期リクエストを送信します。

非同期処理完了時に実行される関数を事前に定義しておき、非同期処理を実行する際にその関数を引数として渡す方法です。

最も基本的な方法ですが、コードが煩雑になりやすく、ネストが深くなると読みづらくなるという欠点があります。

function getData(url, callback) {
  // 非同期処理を行う
  setTimeout(() => {
    const data = { message: '非同期処理完了' };
    callback(data);
  }, 1000);
}

getData('/data.json', function(data) {
  console.log(data); // { message: '非同期処理完了' }
});

イベントリスナー:

非同期処理が完了時に発生するイベントを待ち、イベントリスナーで処理を実行する方法です。

const emitter = new EventEmitter();

emitter.on('data', function(data) {
  console.log(data); // { message: '非同期処理完了' }
});

getData('/data.json', function(data) {
  emitter.emit('data', data);
});

RxJS:

Reactive Extensions for JavaScript の略称で、非同期処理を扱うためのライブラリです。

Observable と呼ばれるデータストリームを用いて、非同期処理を流れるデータを購読し、処理を実行することができます。

記法が複雑で習得コストが高いという欠点がありますが、コードが直感的になり、メンテナンスしやすいという利点があります。

import { Observable } from 'rxjs';

const dataObservable = Observable.create(observer => {
  // 非同期処理を行う
  setTimeout(() => {
    observer.next({ message: '非同期処理完了' });
    observer.complete();
  }, 1000);
});

dataObservable.subscribe(data => console.log(data));

Redux:

単方向データフローアーキテクチャに基づいた、アプリケーションの状態管理ライブラリです。

非同期処理の結果を Action として発行し、Reducer で処理することで、アプリケーションの状態を更新することができます。

複雑な状態管理に適していますが、学習コストが高く、シンプルな非同期処理にはオーバースペックという欠点があります。

const store = createStore(reducer);

store.dispatch({ type: 'FETCH_DATA' });

store.subscribe(() => {
  const data = store.getState().data;
  if (data) {
    console.log(data); // { message: '非同期処理完了' }
  }
});

function fetchData() {
  // 非同期処理を行う
  setTimeout(() => {
    store.dispatch({ type: 'FETCH_DATA_SUCCESS', data: { message: '非同期処理完了' } });
  }, 1000);
}

fetchData();