📚

async/awaitブロックの使い方

2024/01/15に公開

JavaScriptの非同期コードを扱うためのasync/await構文は非常に有用ですが、それを適用すべき場所とそうでない場所について明確な理解が必要です。

ある処理を待つ必要がある場合のみasync/awaitを使用する

ある操作が完了するのを待つため、つまり非同期の操作結果を利用した何かをするためにはawaitを使用します。

しかし、適用する場所が適切でないと、無駄なパフォーマンスの損失を招いてしまうことがあります。

不適切な使い方の一例として、多く見られるのがreturn awaitというパターンです。

const fetchUserPosts = async (
  userId: bigint,
): Promise<UserPost[] | undefined> => {
  return await database.posts.findMany({
    select: { content: true },
    where: {
      userId,
    },
  });
};

このコードは動作しますが、async関数から直接Promiseを返す際にはawaitは不要です。

そのため、次のように改善できます。

const fetchUserPosts = (
  userId: bigint,
): Promise<UserPost[] | undefined> => {
  return database.posts.findMany({
    select: { content: true },
    where: {
      userId,
    },
  });
};

非同期の操作結果を使用しない場合はasync/awaitを使用しない

特にサーバーアクションやイベントリスナーのようなユースケースでは、非同期処理の結果を直接使用せず、次のアクションに進むことが一般的です。

これらの場合、awaitを利用して処理をブロックする必要はありません。

これは、パフォーマンスを向上するだけでなく、コードの可読性も高めます。

Discussion