JavaScriptでの非同期操作のデザインパターン – JavaScriptで始めるプログラミング

JavaScriptでの非同期操作のデザインパターン – JavaScriptで始めるプログラミング

JavaScriptで非同期操作を扱うための様々なデザインパターンについて学びます。これが理解できれば、コードの読みやすさや保守性が向上します。

1. コールバック

最も基本的な非同期操作の方法はコールバックパターンです。しかし、この方法はネストが深くなりやすく、俗に「コールバック地獄」と呼ばれます。

function doSomething(callback) {
  setTimeout(() => {
    callback('結果');
  }, 1000);
}

doSomething((result) => {
  console.log(result);
});

2. プロミス

プロミスは、コールバックよりも読みやすく、エラーハンドリングも容易です。さらに、チェイニングも可能です。

function doSomething() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('結果');
    }, 1000);
  });
}

doSomething()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

3. async/await

async/awaitは、プロミスをさらに簡略化した方法で、同期的なコードのように書くことができます。

async function doSomething() {
  return '結果';
}

async function main() {
  try {
    const result = await doSomething();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

4. RxJS

RxJSはリアクティブプログラミングをJavaScriptで実現するためのライブラリです。ストリームベースの非同期操作が可能です。

import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

of('結果')
  .pipe(delay(1000))
  .subscribe(result => console.log(result));

まとめ

以上、JavaScriptでの非同期操作のデザインパターンを紹介しました。各パターンにはそれぞれの用途と利点があるため、状況に応じて適切に使い分けることが重要です。

コメントを残す