JavaScript | ES6+ 文法：モジュール – 名前付き export

JavaScript JavaScript
スポンサーリンク

名前付き export とは何か（まずイメージから）

名前付き export は、
「このファイルから、名前を付けて外に公開するものを選ぶ仕組み」です。

// math.js
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}
export function sub(a, b) {
  return a - b;
}
JavaScript

このファイルでは、PI, add, sub の3つが「名前付き」で export されています。
つまり、「math.js モジュールは、PI と add と sub を外に提供します」と宣言している状態です。

ここが重要です。
名前付き export されたものだけが、他のファイルから import { PI, add } from "./math.js"; のようにして使える「公開API」になります。
それ以外は、そのファイルの中だけの「内緒」です。

基本の書き方と「何個でも出せる」という性質

その場で export を付けて宣言するパターン

よく使うのは、「宣言するときに export を付ける」書き方です。

// math.js
export const PI = 3.14;     // 定数を export
export let counter = 0;     // 変数も export できる

export function add(a, b) { // 関数を export
  return a + b;
}

export class Calculator {   // クラスを export
  add(a, b) {
    return a + b;
  }
}
JavaScript

このように、export は「その後ろにある宣言を外に公開する」という意味です。
1つのモジュールに、名前付き export はいくつでも追加できます。

あとからまとめて export するパターン

まず普通に定義しておいて、最後にまとめて export することもできます。

// math.js
const PI = 3.14;
function add(a, b) {
  return a + b;
}
function sub(a, b) {
  return a - b;
}

export { PI, add, sub };
JavaScript

途中で export を付けるか、最後に export { ... } で並べるかは好みとスタイルの問題です。
「何を公開しているか」が分かりやすいほうを選べばOKです。

名前付き import との関係（セットで理解する）

名前付き export を使うときの import の形

名前付き export を使っているモジュールからは、
{} を使って「どの名前を持ってくるか」を指定して import します。

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
JavaScript
// main.js
import { PI, add } from "./math.js";

console.log(PI);        // 3.14
console.log(add(2, 3)); // 5
JavaScript

{ PI, add } の部分は、「math.js から PI と add という名前の export を持ってくる」という意味です。

ここが重要です。
「名前付き export」→「名前付き import（{}）」 がワンセット。
export 側の名前と import 側の {} の中の名前が一致している必要があります。

名前を変えて import したいとき（as）

もし import する側で別の名前にしたい場合は、as を使えます。

// math.js
export function add(a, b) {
  return a + b;
}
JavaScript
// main.js
import { add as plus } from "./math.js";

console.log(plus(2, 3)); // 5
JavaScript

add という名前で export されているけれど、
このファイルでは plus という名前で使う、という指定です。

複数同時に変えることもできます。

import { add as plus, sub as minus } from "./math.js";
JavaScript

名前付き export と default export の違い

default export とは「そのモジュールの主役」を1つ

もう一つの export の形として、export default があります。

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

default export は、モジュールに1つだけ持てる「主役」「看板」です。
一方、名前付き export はいくつでも出せる「メニューの一覧」のようなものです。

import の書き方の違い

名前付き export の import：

import { add } from "./math.js"; // {} が必要
JavaScript

default export の import：

import greet from "./greet.js";  // {} なし、名前は自由
JavaScript

名前付きと default を同時に持っているモジュールもあります。

// user.js
export default class User { /* ... */ }
export function createGuest() { /* ... */ }
JavaScript
// main.js
import User, { createGuest } from "./user.js";
JavaScript

ここが重要です。
名前付き export は {} で名前を指定して持ってくる。
default export は {} なしで、import 側が好きな名前を付けられる。
両者を混ぜないように意識すると、エラーがぐっと減ります。

「何を export するか」を設計する発想

モジュールの「外向きの顔」を決める

名前付き export は、
そのファイル（モジュール）の「外向きの顔」を決める作業です。

例えば、日付ユーティリティを作るとします。

// dateUtils.js
function pad2(num) {
  return num.toString().padStart(2, "0");
}

export function formatDate(date) {
  const y = date.getFullYear();
  const m = pad2(date.getMonth() + 1);
  const d = pad2(date.getDate());
  return `${y}-${m}-${d}`;
}

export function formatTime(date) {
  const h = pad2(date.getHours());
  const m = pad2(date.getMinutes());
  const s = pad2(date.getSeconds());
  return `${h}:${m}:${s}`;
}
JavaScript

pad2 は内部だけで使う補助関数なので export しません。
外に見せたいのは formatDate と formatTime だけです。

ここが重要です。
「他のファイルから使わせたいもの」だけに export を付け、「内部専用」は何も付けない。
これだけで、モジュールの中と外の境界線がはっきりします。

名前付き export を「セット」で設計する

例えば、ユーザー関連の処理をまとめるモジュールの場合：

// userService.js
export function createUser(name) {
  return { id: Date.now(), name };
}

export function renameUser(user, newName) {
  return { ...user, name: newName };
}

export function deactivateUser(user) {
  return { ...user, active: false };
}
JavaScript

この3つをセットで export することで、
「ユーザーを扱うときはこの関数群を使ってね」という意図を示せます。

別ファイルからはこう使います。

// main.js
import { createUser, renameUser, deactivateUser } from "./userService.js";

let user = createUser("Alice");
user = renameUser(user, "Bob");
user = deactivateUser(user);
JavaScript

名前付き export を見るだけで、
「このモジュールは何をしてくれるのか」が一覧できます。

名前付き export の応用パターン

index.js で再エクスポートして入口をまとめる

大きくなってきたプロジェクトでは、
複数のモジュールを「まとめて export する窓口」として index.js を使うことがあります。

// math/add.js
export function add(a, b) { return a + b; }

// math/sub.js
export function sub(a, b) { return a - b; }
JavaScript
// math/index.js
export { add } from "./add.js";
export { sub } from "./sub.js";
JavaScript

これで、他のファイルからは：

import { add, sub } from "./math/index.js";
JavaScript

のように、math/index.js だけを意識すればよくなります。

まとめて名前空間として import する（参考）

少しだけ進んだ書き方として、
名前付き export されたものを「まとめて1つのオブジェクトとして」import できます。

// math.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
JavaScript
// main.js
import * as math from "./math.js";

console.log(math.add(2, 3));
console.log(math.sub(5, 1));
JavaScript

math.add, math.sub のように、「名前空間付き」で使えます。
初心者のうちはまず基本の { add, sub } 形に慣れてから、
「全部まとめたい」と思ったときにこの形を覚えれば十分です。

例題で名前付き export に慣れる

例1：簡単なユーティリティモジュール

// utils.js
export function isEven(n) {
  return n % 2 === 0;
}

export function isOdd(n) {
  return !isEven(n);
}
JavaScript
// main.js
import { isEven, isOdd } from "./utils.js";

console.log(isEven(4)); // true
console.log(isOdd(5));  // true
JavaScript

例2：クラスを複数 export する

// shapes.js
export class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

export class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius * this.radius;
  }
}
JavaScript
// main.js
import { Rectangle, Circle } from "./shapes.js";

const r = new Rectangle(10, 5);
const c = new Circle(3);

console.log(r.area());
console.log(c.area());
JavaScript

例3：設定値を名前付き export する

// config.js
export const API_BASE_URL = "https://api.example.com";
export const DEFAULT_LANG = "ja";
export const TIMEOUT_MS = 5000;
JavaScript
// main.js
import { API_BASE_URL, DEFAULT_LANG } from "./config.js";

console.log(API_BASE_URL, DEFAULT_LANG);
JavaScript

まとめ

名前付き export の核心は、
「このモジュールから、名前を付けて複数の値・関数・クラスを公開する」 ことです。

押さえておきたいポイントを整理すると：

名前付き export は export const ..., export function ..., export class ... または export { A, B } の形で書く
名前付き export されたものは、import { A, B } from "./x.js"; のように {} を使って名前指定で import する
as を使えば import 側で別名にできる
export されていないものは、そのモジュールの「内部専用」になる
モジュールの「外向きの顔」（インターフェース）を名前付き export で設計する、という意識が大事

まずは、小さなファイルを作って、
「このファイルから何を外に出したいか？」を考えながら export を付けていってみてください。
それだけで、モジュール設計の感覚が少しずつつかめてきます。

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