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での非同期操作のデザインパターンを紹介しました。各パターンにはそれぞれの用途と利点があるため、状況に応じて適切に使い分けることが重要です。
リファレンス: MDNのプロミスガイド(外部リンク)