開発Tips（2025-09-16）

今日の開発Tips：JavaScriptにおける非同期処理の効率化

このTipsでは、JavaScriptにおける非同期処理をPromiseとasync/awaitを使ってより読みやすく、保守しやすいコードにする方法を紹介します。複雑な非同期処理を簡潔に記述し、エラーハンドリングも容易にするテクニックを解説します。

JavaScript非同期処理のエレガントな書き方：Promiseとasync/awaitの活用

複雑な非同期処理は、コールバック地獄に陥りがちで、コードの可読性と保守性が低下します。Promiseとasync/awaitを使うことで、非同期処理を同期処理のように記述でき、コードがシンプルで分かりやすくなります。

// 従来のコールバック方式
function fetchData(url, callback) {
  fetch(url)
    .then(response => response.json())
    .then(data => callback(null, data))
    .catch(error => callback(error));
}

fetchData('https://api.example.com/data', (error, data) => {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Data:', data);
  }
});

// Promiseとasync/awaitを使った方法
async function fetchDataAsync(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error; // エラーを上位に伝播させる
  }
}

async function main() {
  try {
    const data = await fetchDataAsync('https://api.example.com/data');
    console.log('Data:', data);
  } catch (error) {
    // エラーハンドリング
  }
}

main();

注意点：async/awaitを使用する際には、asyncキーワードを関数定義の前に付ける必要があります。また、エラーハンドリングのためにtry...catchブロックを使用することをお勧めします。

おすすめポイント：Promiseとasync/awaitを使うことで、非同期処理のコードを大幅に改善できます。可読性と保守性が向上し、バグの発生率も低減できます。特に複雑な非同期処理において、その効果は顕著です。