export async function

export async function を分かりやすく

export async functionは、JavaScript および TypeScript の重要な概念で、モジュール化されたコードの中で非同期処理を行う関数を公開するために使用します。

export async function fetchInfo() {
  const response = await fetch('https://third-party-service.com/info', {
    headers: {
      Authorization: `Bearer ${process.env.SERVICE_API_KEY}`,
    },
  })

  return response.json()
}

具体的には、次の 2 つの主要な部分から成り立っています。

export: これは関数を他のファイルから利用できるようにします。つまり、あるファイルで定義した関数を別のファイルでも使いたいときには、その関数をexportします。

async function: 非同期処理を行うための関数です。非同期処理とは、処理が終わるのを待たずに次の処理に移ることを意味します。これにより、時間がかかる処理をバックグラウンドで実行し、その結果を待ちながらも他の処理を進めることができます。

分かりやすく説明すると「export」は、「エクスポート」や「出荷」を意味します。これは、あなたが自分の作った特別な物を他の人と共有したい時に使う魔法の言葉です。たとえば、あなたがおいしいケーキを作ったとします。でも、そのケーキはあなた一人だけで食べるのではなく、友達と一緒に食べたいと思いますよね？ その時に、「export」の魔法の言葉を使ってケーキを友達と共有します。

次に、「async function」は、「アシンク（非同期）関数」という特別な魔法の言葉です。これは、特別な作業をする時に使います。普通の関数（作業）は一つずつ順番にやるのですが、「async function」は特別で、他の作業が終わるのを待たずに次の作業を始めることができます。

たとえば、あなたが部屋の掃除をしながら、同時にママが作ってくれたクッキーを焼くオーブンの時間を計るとしましょう。ここで、「部屋の掃除」が一つの作業で、「クッキーの焼き時間を計る」がもう一つの作業です。普通の関数だと、部屋の掃除が終わるまでクッキーの焼き時間を計れません。でも、「async function」の魔法を使うと、部屋の掃除をしながら同時にクッキーの焼き時間も計ることができます。

だから、「export async function」は、自分が作った特別な作業（ケーキや掃除など）を他の人と共有し、その作業が他の作業が終わるのを待たずに次の作業を始めることができる、という魔法の言葉なのです。

export async function を使うメリット

非同期処理は、ユーザーエクスペリエンスの向上に大いに役立ちます。時間がかかる処理を行うとき、例えば API から大量のデータを取得するときなど、その処理が完了するまでユーザーが待たされてしまうと、アプリケーションのパフォーマンスが低下し、ユーザーはフラストレーションを感じるかもしれません。async functionを用いると、そのような処理をバックグラウンドで行いつつも、ユーザーには他の操作が可能な状態を維持することができます。

また、exportを使うことでコードの再利用性が向上します。一度作成した関数を、必要な場所で何度でも使い回すことができます。これにより、コードの重複を避け、保守性と可読性を向上させることができます。

export async function を実装

それでは、Next.js と TypeScript を使ってexport async functionを実装してみましょう。今回は、外部 API からデータを非同期に取得し、その結果を返す関数を作成します。この関数は他のモジュールからも利用可能とします。

まず、新しいファイルapiHandler.tsを作成し、以下のように記述します。

type Data = {
  id: string
  value: string
}

export async function fetchData(): Promise<Data> {
  const response = await fetch('https://some-api.com/data')
  const data: Data = await response.json()
  return data
}

上記のコードでは、まずデータを表現するためのData型を定義しています。次にfetchData関数をexportしていますので、この関数は他のファイルからも利用可能です。関数内部では、fetchを用いて外部 API からデータを非同期に取得し、その結果を JSON として解析しています。この非同期の処理はawaitキーワードによって行われます。

この関数を利用してデータを取得するコンポーネントは次のようになります。

import { useEffect, useState } from 'react'
import { fetchData, Data } from './apiHandler'

const Component = () => {
  const [data, setData] = useState<Data | null>(null)

  useEffect(() => {
    const getData = async () => {
      const result = await fetchData()
      setData(result)
    }

    getData()
  }, [])

  return <div>{data?.value}</div>
}

このコンポーネントでは、useStateとuseEffectフックを使ってデータの状態を管理し、データの取得を行っています。fetchData関数を呼び出す際には、async/awaitを使って非同期に実行しています。取得したデータは、状態として保存され、画面に表示されます。

以上のように、export async functionを使用すると、非同期処理を行う関数を他のモジュールからも利用可能にすることができます。これにより、時間がかかる処理を効率的に管理し、ユーザーエクスペリエンスを向上させることが可能になります。