export default function ()を理解する

1. export default function Page() の分解解説

この一行には、JavaScriptとReactの重要な概念が複数含まれています。

各部分の意味

export default function Page() {
  return <p>Dashboard Page</p>;
}

• function Page(): Reactコンポーネントを作成する関数
• export: この関数を他のファイルから使えるようにする
• default: このファイルの「メイン機能」として指定
• 全体の意味: 「このファイルのメイン機能として、Pageという名前のReactコンポーネント関数を定義し、他のファイルから使えるようにする」

2. Next.jsでの特別な役割

Next.jsが内部で行っていること

私たちが書いたページコンポーネントを、実際にはNext.js自体が「使用」しています。

// 私たちが書くファイル：/app/dashboard/page.tsx
export default function Page() {
  return <p>Dashboard Page</p>;
}

Next.jsの内部処理（イメージ）

// Next.jsが内部で行っている処理
import DashboardPage from '/app/dashboard/page.tsx';  // 私たちのページを読み込む

function NextJSRouter() {
  if (url === '/dashboard') {
    return <DashboardPage />;  // 私たちのページコンポーネントを使用
  }
}

つまり

• 私たちは「ページの内容」をコンポーネントとして作成
• Next.jsが「どのURLでそのコンポーネントを表示するか」を管理
• Next.jsが私たちのページコンポーネントを「使用」している

3. exportが必要なものと不要なもの

❌ 間違った理解

「すべてexportって書く必要がある」

✅ 正しい理解

function helper() {           // exportなし → このファイル内でのみ使用
  return "ヘルプ";
}

export function utility() {   // exportあり → 他のファイルからも使用可能
  return "ユーティリティ";
}

export default function Page() {  // default export → メイン機能
  return <p>{helper()}</p>;   // 同じファイル内なので使用可能
}

ルール:

• 他のファイルから使いたいものだけexportを付ける
• そのファイル内でのみ使うものはexport不要
• メイン機能にはexport defaultを付ける

4. 「メイン機能」とdefaultの使い分け

1つのファイルに複数の機能がある例

// /app/dashboard/page.tsx

// ヘルパー関数（メインではない、ファイル内のみで使用）
function formatDate(date) {
  return date.toLocaleDateString();
}

// ユーティリティ関数（メインではない、他のファイルからも使用可能）
export function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// サブコンポーネント（メインではない、他のファイルからも使用可能）
export function DashboardHeader() {
  return <h1>ダッシュボード</h1>;
}

// メイン機能：このページの本体
export default function DashboardPage() {
  const today = new Date();
  
  return (
    <div>
      <DashboardHeader />
      <p>今日の日付: {formatDate(today)}</p>
      <p>Dashboard Page</p>
    </div>
  );
}

役割分担表

機能	種類	役割
formatDate	内部関数	ファイル内でのみ使用
calculateTotal	名前付きexport	他のファイルから import { calculateTotal } で使用可能
DashboardHeader	名前付きexport	他のファイルから import { DashboardHeader } で使用可能
DashboardPage	default export	このファイルのメイン。Next.jsがページとして認識

使い分けの原則

// 部品（サブ機能）→ 名前付きexport
export function Button() { ... }
export function Header() { ... }
export function calculatePrice() { ... }

// ページ全体（メイン機能）→ default export
export default function DashboardPage() {
  return (
    <div>
      <Header />
      <Button />
      <p>価格: {calculatePrice()}</p>
    </div>
  );
}

5. メイン機能の判断基準

どれがメインかの決め方

1. そのファイルの主目的は何か？

   • ページファイル → ページコンポーネントがメイン
   • ユーティリティファイル → 主要な関数がメイン

2. 外部から使う時、最初に思い浮かぶのはどれか？

   • 「dashboardページが欲しい」→ ページコンポーネントがメイン

3. 1つしかない場合はそれがメイン

Next.jsの特殊なルール

Next.jsでは、page.tsxファイルのdefault exportが必ずページの内容として扱われます。

// ✅ これは動く
export default function Page() {
  return <p>ページ内容</p>;
}

// ❌ これは動かない（Next.jsがページとして認識できない）
export function Page() {
  return <p>ページ内容</p>;
}
// default exportがないので、Next.jsは「このページに何を表示すればいいかわからない」

6. ヘルパー関数とは

定義

メインの処理を助ける小さな関数のことです。

具体例：学生の成績表示

// ✅ ヘルパー関数を使った場合（わかりやすい）
export default function StudentProfile() {
  const student = {
    name: "田中花子", 
    scores: [85, 92, 78, 96, 88]
  };

  return (
    <div>
      <h1>{student.name}</h1>
      <p>平均点: {calculateAverage(student.scores)}</p>      {/* ヘルパー使用 */}
      <p>最高点: {getMaxScore(student.scores)}</p>           {/* ヘルパー使用 */}
      <p>評価: {getGrade(student.scores)}</p>                {/* ヘルパー使用 */}
    </div>
  );
}

// ヘルパー関数たち（メインの処理を「手伝う」小さな関数）
function calculateAverage(scores) {
  return scores.reduce((sum, score) => sum + score, 0) / scores.length;
}

function getMaxScore(scores) {
  return Math.max(...scores);
}

function getGrade(scores) {
  const average = calculateAverage(scores);  // 他のヘルパーも使える
  if (average >= 90) return "優秀";
  if (average >= 80) return "良好";
  if (average >= 70) return "普通";
  return "要努力";
}

ヘルパー関数の特徴

特徴	説明	例
小さい	1つの具体的な処理だけを行う	calculateAverage() - 平均を計算するだけ
名前が分かりやすい	何をする関数か名前を見ればわかる	getMaxScore() - 最高点を取得
メインを助ける	メインの処理から呼ばれて使われる	ページコンポーネントから呼ばれる
再利用可能	何度でも呼び出せる	同じ計算を複数箇所で使用

つまり、ヘルパー関数 = メインの仕事を手伝ってくれる小さな専門家たち

7. まとめ：使い分け一覧表

種類	export	用途	例
ヘルパー関数	なし	ファイル内の処理を助ける	formatDate(), calculateAge()
ユーティリティ関数	export	他のファイルからも使いたい共通処理	export function formatCurrency()
部品コンポーネント	export	他のファイルからも使いたい部品	export function Button()
ページ/メインコンポーネント	export default	そのファイルの主目的	export default function Page()

8. 重要なポイント

1. ページも技術的にはReactコンポーネントなので、他のファイルから使用可能
2. 実際にはNext.jsが私たちのページを「使用」している
3. メイン機能 = そのファイルの主目的となる機能
4. メインかどうかは、そのファイルが何のために作られたかで決まる
5. page.tsxでは、default exportが必ずページ内容
6. 他のファイルから使いたいものだけexportを付ける

この理解があれば、Next.jsでのコンポーネント作成とファイル構成の基本が身につきます。