JavaScript 逆引き集 | export の基本

export の基本 — export function f(){} / export default ...

JavaScript の モジュール では、ファイル内の関数や変数を外部に公開するために export を使います。
公開されたものは他のファイルから import で読み込めます。初心者がまず覚えるべきは「名前付きエクスポート」と「デフォルトエクスポート」の2種類です。

基本の使い方

1. 名前付きエクスポート

// utils.js
export function hello(name) {
  console.log("こんにちは " + name);
}

export const PI = 3.14159;

// utils.js
export function hello(name) {
  console.log("こんにちは " + name);
}

export const PI = 3.14159;

// main.js
import { hello, PI } from './utils.js';

hello("Aki"); // → "こんにちは Aki"
console.log(PI); // → 3.14159

// main.js
import { hello, PI } from './utils.js';

hello("Aki"); // → "こんにちは Aki"
console.log(PI); // → 3.14159

• 特徴: 複数の関数や変数をまとめて公開できる。
• インポート時: {} で名前を指定して読み込む。

2. デフォルトエクスポート

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

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

// main.js
import add from './math.js';

console.log(add(2, 3)); // → 5

// main.js
import add from './math.js';

console.log(add(2, 3)); // → 5

• 特徴: ファイルから1つだけ「メインのもの」を公開。
• インポート時: {} は不要で、好きな名前で受け取れる。

よく使うテンプレート集

複数の関数を名前付きで公開

// calc.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
export function mul(a, b) { return a * b; }

// calc.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
export function mul(a, b) { return a * b; }

// main.js
import { add, sub } from './calc.js';
console.log(add(5, 2), sub(5, 2));

// main.js
import { add, sub } from './calc.js';
console.log(add(5, 2), sub(5, 2));

全部まとめてインポート

import * as calc from './calc.js';
console.log(calc.add(1, 2), calc.mul(3, 4));

import * as calc from './calc.js';
console.log(calc.add(1, 2), calc.mul(3, 4));

デフォルトと名前付きを併用

// logger.js
export default function log(msg) {
  console.log("LOG:", msg);
}
export const version = "1.0";

// logger.js
export default function log(msg) {
  console.log("LOG:", msg);
}
export const version = "1.0";

// main.js
import log, { version } from './logger.js';
log("テスト"); // LOG: テスト
console.log(version); // 1.0

// main.js
import log, { version } from './logger.js';
log("テスト"); // LOG: テスト
console.log(version); // 1.0

例題: モジュール分割で整理

greet.js

export function greet(name) {
  return `こんにちは ${name}`;
}

export function greet(name) {
  return `こんにちは ${name}`;
}

math.js

export default function square(x) {
  return x * x;
}

export default function square(x) {
  return x * x;
}

main.js

import { greet } from './greet.js';
import square from './math.js';

console.log(greet("Aki"));   // → "こんにちは Aki"
console.log(square(5));      // → 25

import { greet } from './greet.js';
import square from './math.js';

console.log(greet("Aki"));   // → "こんにちは Aki"
console.log(square(5));      // → 25

• 効果: ファイルを分けて整理し、必要なものだけインポートできる。

実務でのコツ

• 名前付き vs デフォルト:
  • 複数公開 → 名前付き
  • 1つだけメイン → デフォルト
• インポート名: デフォルトは好きな名前で受け取れる。名前付きは一致させる必要がある。
• 構造化: 大きなプロジェクトでは機能ごとにファイルを分けて export する。
• ブラウザ: <script type="module"> を使うと ESM が動く。
• Node.js: "type": "module" を package.json に書くと ESM が使える。

ありがちなハマりポイントと対策

• 拡張子忘れ:
  • import './utils' ではなく import './utils.js' が必要な場合がある。
• 名前の不一致:
  • 名前付きは一致しないとエラー。export function greet → import { greet }。
• デフォルトを複数書けない:
  • 1ファイルに export default は1つだけ。

練習問題（モジュール練習）

1. math.js に add と sub を名前付きで export。
2. square をデフォルトで export。
3. main.js で両方インポートして計算結果を表示。

• 効果: 名前付きとデフォルトの違いを体験できる。

直感的な指針

• export = 外に公開する。
• 名前付き export → 複数公開、インポート時に {}。
• デフォルト export → 1つだけ公開、インポート時は自由な名前。
• まずは小さな関数を分けて export/import してみると理解が深まる。