JavaScriptの非同期処理、こう書けば爆速！forEach + async/await 実践テクニック

// 同期処理の例
function cookSynchronously() {
    cookHamburg();  // 15秒待つ
    makeSalad();    // 5秒待つ
    heatSoup();     // 5秒待つ
}

// 非同期処理の例
async function cookAsynchronously() {
    const hamburgPromise = cookHamburg(); // 調理開始
    makeSalad();  // その間にサラダを作る
    heatSoup();   // スープも温める
    await hamburgPromise; // ハンバーグの完成を待つ
}

// コールバック地獄の例
getData(function(a) {
    getMoreData(a, function(b) {
        getMoreData(b, function(c) {
            getMoreData(c, function(d) {
                // 深いネストに...😱
            });
        });
    });
});

// Promiseを使用した場合
getData()
    .then(a => getMoreData(a))
    .then(b => getMoreData(b))
    .then(c => getMoreData(c))
    .then(d => {
        // スッキリ！😊
    })
    .catch(error => {
        // エラーハンドリングも簡単
    });

// async/awaitを使用した場合
async function processData() {
    try {
        const a = await getData();
        const b = await getMoreData(a);
        const c = await getMoreData(b);
        const d = await getMoreData(c);
        // 同期処理のように書ける！🎉
    } catch (error) {
        // エラーハンドリング
    }
}

// ❌ よくある間違った実装
async function processItems() {
    const items = [1, 2, 3, 4, 5];
    
    items.forEach(async (item) => {
        const result = await processItem(item);
        console.log(result);
    });
    
    console.log('完了！');  // 🚨 実際には処理が完了していない！
}

// ✅ 推奨される実装
async function processItems() {
    const items = [1, 2, 3, 4, 5];
    
    // <<方法1>>for...ofを使用
    for (const item of items) {
        const result = await processItem(item);
        console.log(result);
    }
    
    // <<方法2>>Promise.allを使用（並列処理）
    await Promise.all(
        items.map(async (item) => {
            const result = await processItem(item);
            console.log(result);
        })
    );
    
    console.log('本当に完了！'); // ✨ 全ての処理完了後に実行
}

// 逐次実行：10秒かかる
for (const id of ids) {
    await fetchData(id); // 1回2秒
}

// 並列実行：2秒で完了！
await Promise.all(ids.map(id => fetchData(id)));

try {
    await Promise.all(tasks.map(async task => {
        await processTask(task);
    }));
} catch (error) {
    // 全てのエラーをここで捕捉
    console.error('エラー発生:', error);
}

const results = await Promise.allSettled(tasks.map(task => processTask(task)));

// 成功・失敗の結果を個別に確認
results.forEach(result => {
    if (result.status === 'fulfilled') {
        console.log('成功:', result.value);
    } else {
        console.log('失敗:', result.reason);
    }
});

// パフォーマンステスト用のコード
async function measurePerformance() {
    const items = Array.from({ length: 1000 }, (_, i) => i);
    
    console.time('forEach');
    await Promise.all(items.forEach(async item => {
        await someAsyncOperation(item);
    }));
    console.timeEnd('forEach');
    
    console.time('for-of');
    for (const item of items) {
        await someAsyncOperation(item);
    }
    console.timeEnd('for-of');
}

// for-ofを使用
for (const item of items) {
    await processItem(item);
}

// Promise.allを使用
await Promise.all(items.map(item => processItem(item)));

// Promise.allSettledを使用
const results = await Promise.allSettled(items.map(item => processItem(item)));