JavaScriptの非同期処理をマスターする方法

COLUMN コラム

2024年08月07日
JavaScriptの非同期処理をマスターする方法
- プログラマー
- システムエンジニア
- javascript

こんにちは。

Web開発において、Javascriptの非同期処理を使用する場面が多く出てくると思います。
今回の開発案件で非同期処理を実装したため、備忘録のため今回の記事を作成しました。

概要

Javascriptでは、長時間かかるタスクがメインスレッドをブロックせずに実行されるよう、非同期処理を用いてユーザーにスムーズな体験を提供できることができます。

非同期処理の基本

Javascriptでは、非同期処理を実現するために、コールバック、Promise、そしてasync/awaitという3つの方法があります。

１．コールバック：
コールバックは、非同期関数の結果を処理するために関数を渡す方法です。しかし、コールバックが多重にネストすると「コールバック地獄」と呼ばれる状況になります。
※「コールバック地獄」とは、非同期プログラミングにおいてコールバック関数が深くネストすることで、コードが読みにくく、保守が困難になる現象を指します。

２．Promise：
Promiseは、非同期処理の成功（resolve）や失敗（reject）を扱うオブジェクトです。Promiseを使うことで、チェーン構造を作り、コールバック地獄を避けることができます。
例えば：

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

３．async/await：
async/awaitは、Promiseをさらに使いやすくする方法です。asyncを関数の前につけると、その関数はPromiseを返します。awaitを使用すると、Promiseが解決するまで待機し、その結果を返します。これにより、非同期コードをまるで同期コードのように書けるため、読みやすくなります。例えば：


async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('エラーが発生しました:', error);
    }
}
fetchData();

実際の活用例

非同期処理は、APIリクエスト、ファイルの読み書き、DBへのアクセスなど、様々な場面で役立ちます。これを活用することで、アプリのパフォーマンスが向上し、読込によるストレスを軽減することができます。

非同期処理の基礎をしっかりと理解し、適切な場面で実装してみてください。