非同期関数

非同期関数について学んだ際のアウトプット用に記事を作成しました。かなり雑多にまとめてます。

非同期関数とは

例えば、同期処理ではデータ容量の大きい画像データを取得しなければその後のテキストデータを取得することはできないが、非同期処理によってこれらふたつのプロセスを同時に処理し、テキストデータを先に取得することができる、といったこと。

書き方の違い

通常の同期関数

通常の同期関数は、コードが上から下へと一直線に実行されるため、最も直感的で読みやすいとされます。非同期処理がないため、実行の流れを追いやすいです。

function syncFunction() {
  const result = doSomething();
  const newResult = doSomethingElse(result);
  const finalResult = doThirdThing(newResult);
  console.log('Final result:', finalResult);
}

この場合、doSomething、doSomethingElse、doThirdThingはすべて同期的に実行され、一つのタスクが完了すると次のタスクが開始されます。

async/awaitを使用した関数

async/awaitはPromiseの解決を待つことができる構文であり、非同期処理を含むコードでも、同期関数のように直感的で読みやすいコードを書くことが可能です。

async function asyncFunction() {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log('Final result:', finalResult);
  } catch (error) {
    console.error('Error:', error);
  }
}

async/awaitを使用することで、非同期関数でも同期関数のような直線的なフローで記述することができます。エラーハンドリングもtry/catchを使うことができるため、統一感のあるコードになります。

Promiseを直接使用した関数

Promiseを直接使用する方法は、非同期処理の管理に非常に強力ですが、多くのチェーンやネストが必要な場合、コードが複雑になりがちです。

function promiseFunction() {
  doSomething()
    .then(result => doSomethingElse(result))
    .then(newResult => doThirdThing(newResult))
    .then(finalResult => console.log('Final result:', finalResult))
    .catch(error => console.error('Error:', error));
}

このスタイルは、非同期処理の結果を扱う際にチェーンを形成しますが、多くの.then()と.catch()が必要になることがあり、これが読みにくさを増す原因となります。

読みやすさの比較

同期関数: 非同期処理が含まれていないため、最もシンプルで読みやすいですが、リアルタイムで反応が求められるアプリケーションには向いていません。
async/await関数: 非同期処理を含みながらも、ほぼ同期関数と同様の直線的な読みやすさを持っています。非同期処理が必要な場合の最適な選択です。
Promise関数: 非同期処理の柔軟性が高い反面、コードが複雑になることがあり、読みにくくなることがあります。しかし、複数の非同期処理を並列で扱う場合などに強力です。