JavaScript | ES6+ 文法：モジュール – default export

JavaScript JavaScript
スポンサーリンク

default export とは何か（まずイメージから）

default export は、
「このモジュール（ファイル）の“看板商品”を 1 つだけ外に出す」ための仕組みです。

  • 名前付き export：export function add() {} など、いくつでも出せるメニュー一覧
  • default export：export default ... で 1 つだけ指定する“主役”

というイメージを持つと分かりやすいです。

// greet.js
export default function greet(name) {
  console.log(`Hello, ${name}`);
}
JavaScript

このファイルでは greet が「default export」＝看板商品です。
他のファイルからは「好きな名前を付けて」 import できます。

default export の基本構文

その場で export default を付けて宣言する

一番よく見る書き方です。

// User.js
export default class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`こんにちは、${this.name} です`);
  }
}
JavaScript

この場合、「User クラス」がモジュールの主役です。

関数でも同じです。

// sum.js
export default function sum(numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}
JavaScript

変数でも書けます。

// config.js
const config = {
  apiBaseUrl: "https://api.example.com",
  timeoutMs: 5000
};

export default config;
JavaScript

あとから export default を付ける書き方

先に定義しておいて、最後にまとめて default にすることもできます。

function greet(name) {
  console.log(`Hello, ${name}`);
}

export default greet;
JavaScript

クラスも同様です。

class User {
  constructor(name) {
    this.name = name;
  }
}

export default User;
JavaScript

default import の書き方（名前付き import との違い）

default export は {} なしで import する

default export されたものを import するときは、
{} を付けずに、その場で好きな名前を付けます。

// greet.js
export default function greet(name) {
  console.log(`Hello, ${name}`);
}
JavaScript
// main.js
import greet from "./greet.js";
//       ↑ 好きな名前で OK

greet("Alice");
JavaScript

別のファイルで別名にしても構いません。

import hello from "./greet.js";
hello("Bob");
JavaScript

ここが重要です。
default export は “名前を固定しない” 代わりに、モジュールにつき 1 つだけ。
import 側が、文脈に合う名前を自由に付けられます。

名前付き export と同時に使う

1 つのモジュールに、default export と名前付き export が共存しているケースもあります。

// user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

export function createGuest() {
  return new User("Guest");
}
JavaScript

このモジュールを使う側：

// main.js
import User, { createGuest } from "./user.js";
//    ↑ default         ↑ 名前付き

const u1 = new User("Alice");
const u2 = createGuest();
JavaScript

default export は先頭に書いて、
あとに { ... } で名前付き export を並べます。

名前付き export との import の書き方を比較する

名前付き export：

// math.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
JavaScript
// main.js
import { add, sub } from "./math.js";   // {} 必須、名前は一致
JavaScript

default export：

// math.js
export default function add(a, b) { return a + b; }
JavaScript
// main.js
import add from "./math.js";           // {} 不要、名前は自由
JavaScript

ここが重要です。

  • 名前付き export → import { 名前 } from "..."
  • default export → import 任意の名前 from "..."

この違いを体で覚えると、 import 関連のエラーがかなり減ります。

どんなときに default export を使うか（設計の視点）

「このモジュールは“これ”がメイン」と決めたいとき

例えば、1つのクラスが主役のモジュールは、default export との相性が良いです。

// Player.js
export default class Player {
  constructor(name, hp = 100) {
    this.name = name;
    this.hp = hp;
  }

  damage(amount) {
    this.hp = Math.max(0, this.hp - amount);
  }

  show() {
    console.log(`${this.name} HP: ${this.hp}`);
  }
}
JavaScript

使うとき：

import Player from "./Player.js";

const p = new Player("勇者");
p.damage(30);
p.show();
JavaScript

Player モジュールといえば「Player クラス」というのが一目瞭然です。

1つの関数がメイン機能のとき

例えば、配列をソートする独自関数だけを提供したいモジュール。

// sortNumbers.js
export default function sortNumbers(arr) {
  return [...arr].sort((a, b) => a - b);
}
JavaScript
// main.js
import sortNumbers from "./sortNumbers.js";

const nums = [5, 2, 9, 1];
console.log(sortNumbers(nums)); // [1, 2, 5, 9]
JavaScript

default export にしておくと、
「sortNumbers.js は sortNumbers 関数をメインで提供する」という意図がはっきりします。

「その他のオプション」的なものは名前付き export にする

主役が default、補助が名前付き、という分け方もよく使います。

// api.js
export default function request(url, options = {}) {
  // メインの HTTP リクエスト関数
}

export const DEFAULT_TIMEOUT = 5000;
export function buildUrl(path) {
  return "https://api.example.com" + path;
}
JavaScript

使う側：

import request, { DEFAULT_TIMEOUT, buildUrl } from "./api.js";

const url = buildUrl("/users");
request(url, { timeout: DEFAULT_TIMEOUT });
JavaScript

ここが重要です。
default export を「メインの1つ」、名前付き export を「補助機能たち」、
と設計すると、モジュールの役割がとても読みやすくなります。

default export のよくあるパターンと注意点

1 モジュールに default export は 1 つだけ

次のように複数書くことはできません。

// NG
export default function a() {}
export default function b() {} // エラー
JavaScript

必ず 1 つだけにします。
一方、名前付き export は何個でも OK です。

// OK
export function a() {}
export function b() {}
export function c() {}
JavaScript

「default だけ」のモジュールにするか、「名前付きも混ぜる」か

小さいプロジェクトでは、
「そのファイルの中にあるもの全部を default でまとめてしまう」
という乱暴な設計をしがちですが、あまりおすすめしません。

// app.js（微妙な例）
export default {
  init() {},
  destroy() {},
  config: {},
};
JavaScript

こうすると、使う側からは「何が入っているのか」が直感的に分かりにくくなります。

import app from "./app.js";

app.init();
app.destroy();
app.config;
JavaScript

より細かく分けると：

// app.js（良い例より）
export function init() {}
export function destroy() {}
export const config = {};
JavaScript

もしくは：

// app.js（主役がはっきりしている場合）
export default function init() {}
export function destroy() {}
export const config = {};
JavaScript

「何を default にして、何を名前付きにするか」は、
そのモジュールの「主役は何か？」を考えて決めるとよいです。

default + 名前付き export を、分かりやすく並べる

書き方は自由ですが、読みやすさのためにある程度のルールを決めるのがおすすめです。例えば：

  • 一番上で default export（主役）を定義
  • その下に名前付き export（補助）を並べる
// user.js
export default class User {
  /* ... */
}

export function createGuest() { /* ... */ }
export function isAdmin(user) { /* ... */ }
JavaScript

こうしておくと、このモジュールを開いた瞬間に、
「User クラスが主役で、createGuest / isAdmin は補助だな」と一目で分かります。

例題で default export に慣れる

例1：クラスを default export する

// Counter.js
export default class Counter {
  constructor(initial = 0) {
    this.value = initial;
  }

  increment() {
    this.value++;
  }

  show() {
    console.log(this.value);
  }
}
JavaScript
// main.js
import Counter from "./Counter.js";

const c = new Counter(10);
c.increment();
c.show(); // 11
JavaScript

例2：関数を default export する

// formatCurrency.js
export default function formatCurrency(amount, currency = "JPY") {
  return new Intl.NumberFormat("ja-JP", {
    style: "currency",
    currency
  }).format(amount);
}
JavaScript
// main.js
import formatCurrency from "./formatCurrency.js";

console.log(formatCurrency(12345));       // ¥12,345
console.log(formatCurrency(12345, "USD")); // $12,345.00 など
JavaScript

例3：設定オブジェクトを default export する

// appConfig.js
const appConfig = {
  appName: "MyApp",
  version: "1.0.0",
  debug: true
};

export default appConfig;
JavaScript
// main.js
import config from "./appConfig.js";

console.log(config.appName, config.version);
JavaScript

まとめ

default export の核心は、
「モジュール（ファイル）ごとに、“主役”を 1 つだけ外に出すための仕組み」 であることです。

押さえておきたいポイントは次の通りです。

  • export default ... で宣言し、そのモジュールには 1 つだけ持てる
  • default import は {} を使わず、import 任意の名前 from "..." と書く
  • 名前付き export と組み合わせて、「主役（default）」と「補助（名前付き）」を設計できる
  • クラスや 1 つの関数が主役のモジュールと相性が良い
  • 何を default にするかは、「このモジュールは一言で何をする？」という問いから決める

まずは、自分のコードの中で
「これはこのファイルの主役だな」と思うクラスや関数に export default を付けてみてください。
そこから少しずつ、「モジュールごとに看板を決める」感覚が育っていきます。

スポンサーリンク
タイトルとURLをコピーしました