export default function

export default function を分かりやすく

Next.js の公式ドキュメントを読むと次のようなソースコードが頻繁に登場します。

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

この export default function とは一体何なのでしょうか？

export default functionは、JavaScript モジュールシステムの一部であり、特定のモジュールからデフォルトでエクスポートされる関数を定義するための構文です。モジュールは、関数や変数などを一つのファイルにまとめ、他のファイルから利用できるようにするもので、JavaScript におけるコードの再利用性を高めます。

export default functionは通常、モジュールからエクスポートされる唯一の関数または値であり、他のファイルからこの関数をインポートする際には、任意の名前をつけることができます。これは、名前付きエクスポート（named exports）とは対照的で、名前付きエクスポートではエクスポートされる名前とインポートする名前が一致している必要があります。

例えば、以下のようにexport default functionを使用して、デフォルトエクスポートを行うことができます。

// components/Hello.tsx
export default function Hello() {
  return <h1>Hello, world!</h1>
}

この関数は、別のファイルから次のようにインポートして使用することができます。

// pages/index.tsx
import WelcomeMessage from '../components/Hello'

const HomePage = () => {
  return <WelcomeMessage />
}

export default HomePage

ファイル名と関数名は一致させる必要はあるのか？

Next.js においては、ファイル名と関数名は一致させる必要はありません。ただし、一致させることでコードの可読性が向上するとともに、開発者間での混乱を避けることができます。

例えば、次のようなコードでも問題ありません。

// pages/AboutPage.tsx
export default function About() {
  return <h1>About Us</h1>
}

この場合、URL パスはファイル名に基づいて /AboutPage となりますが、コンポーネントの名前は About となります。ファイル名とコンポーネント名が一致していないと、開発者がファイルと関連するコンポーネントを認識するのが難しくなることがあります。

したがって、一般的には、ファイル名とその中の主要なエクスポート（特に、デフォルトエクスポート）は一致することが推奨されます。これは強制的なルールではありませんが、良い開発習慣と言えます。

デフォルトエクスポートと名前付きエクスポートの違い

JavaScript モジュールシステムでは、export default function（デフォルトエクスポート）とexport（名前付きエクスポート、named export）の 2 つのエクスポート方法があります。

デフォルトエクスポート（export default function） は、各モジュールが一つだけ持つことができます。デフォルトエクスポートは、モジュールからインポートする際に任意の名前を付けることが可能です。

// components/MyComponent.tsx
export default function MyComponent() {
  return <div>Hello, world!</div>
}

// pages/index.tsx
import Component from '../components/MyComponent'

一方、名前付きエクスポート（export） では、モジュールごとに複数のエクスポートが可能ですが、エクスポートした関数や変数はその名前でインポートする必要があります。これは、エクスポート時とインポート時の名前が一致している必要があるということです。

// utils/helpers.ts
export function helperOne() {
  //...
}

export function helperTwo() {
  //...
}

// otherFile.ts
import { helperOne, helperTwo } from './utils/helpers'

それぞれのエクスポート方法には利点と欠点があります。デフォルトエクスポートはインポート時に名前を自由に選べる一方で、名前付きエクスポートはコードの可読性と追跡性を向上させます。どちらの方法を使用するかは、プロジェクトの要件やチームのコーディング規約によります。

export default function を使うメリット

export default functionを使用する主なメリットは、その簡易さと柔軟性です。デフォルトエクスポートは、モジュールからエクスポートされる唯一の値であるため、他のファイルからインポートする際には、エクスポートされた関数の名前を覚えておく必要がありません。また、インポートする際に任意の名前を付けることができるため、コードの可読性を向上させることができます。

また、Next.js では、デフォルトエクスポートは特別な意味を持ちます。Next.js では、pagesディレクトリ内の.js、.jsx、.ts、.tsxファイルは自動的にルートとなり、そのファイルのデフォルトエクスポートされる関数がそのページのコンポーネントとして扱われます。そのため、Next.js の環境下では、ページコンポーネントを作成する際にはexport default functionが頻繁に用いられます。

// pages/about.tsx
export default function About() {
  return <h1>About Us</h1>
}

このようにすると、/aboutという URL でAbout関数の返り値が表示されます。export default functionは、これらのページコンポーネントを簡単に作成し、管理するための手段となります。

export default function を実装

それでは、具体的な実装を見てみましょう。ここでは、ユーザーの名前を表示するUserコンポーネントを作成します。このコンポーネントは、ユーザーの名前を props として受け取ります。

まず、Userコンポーネントを定義しましょう。

// components/User.tsx
type UserProps = {
  name: string
}

export default function User({ name }: UserProps) {
  return <h1>Hello, {name}!</h1>
}

次に、このUserコンポーネントを使用するページを作成します。

// pages/index.tsx
import User from '../components/User'

export default function HomePage() {
  return <User name="John Doe" />
}

ここでは、Userコンポーネントをインポートし、name属性に任意の名前を設定しています。これにより、ホームページを開くと「Hello, John Doe!」と表示されます。

このように、export default functionは、Next.js と TypeScript を使用した開発において、モジュールのエクスポートとインポートを管理し、コードの再利用性と可読性を向上させる重要なツールとなります。特に Next.js では、ページコンポーネントを作成する際に頻繁に使用されるため、その使い方を理解しておくことは大切です。