---
lang: ja-jp
breaks: true
---
# JavaScript で 重たい処理を非同期実行する方法 2024-03-21

## 重たい処理

function generatePrimes(quota) {
    const primes = [];
    // 重たい処理
    return primes;
}

## 重たい処理を非同期メソッドにする

function generatePrimesAsync(quota) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const primes = generatePrimes(quota);
            resolve(primes);
            }, 0);
    });
}

## 正常な実行結果

const ret1 = generatePrimesAsync(quota); // すぐに抜ける。
const ret2 = await generatePrimesAsync(quota); // 結果が取得されるまで待機する。

:::warning
JavaScript自体がシングルスレッドで動作する為、本当の意味での非同期実行が行われていない。
よって、`await`中はUIスレッドがフリーズした状態となる。
:::

## ダメな例１

async function generatePrimesAsync(quota) {
    let promise = new Promise((resolve, reject) => {
        const primes = generatePrimes(quota);
        resolve(primes);
    });
    return promise;
}

const ret1 = generatePrimesAsync(quota); // 結果が取得されるまで待たされる。
const ret2 = await generatePrimesAsync(quota); // 結果が取得されるまで待機する。

## ダメな例２

async function generatePrimesAsync(quota) {
    let promise = generatePrimes(quota);
    return promise;
}

const ret1 = generatePrimesAsync(quota); // 結果が取得されるまで待たされる。
const ret2 = await generatePrimesAsync(quota); // 結果が取得されるまで待機する。

###### tags: `JavaScript` `重たい処理` `非同期実行` `Promise` `setTimeout` `async` `await`