JavaScript：モジュール（import / export）

add がエクスポートされ add(3,7) が 10

const の前に export を付けるだけ。export const add = (a, b) => a + b;

export const add = (a, b) => a + b;

export を付けるだけで外から使えるようになる。付けなければそのファイル専用の関数として隠される。

解答 == B

名前付きエクスポートには何が必要か。

B

名前付きは波カッコ、デフォルトは波カッコなし。Aはデフォルトエクスポート用の書き方で、この場合は undefined になる。

出力 == 10 / 6（2行）

import { add, sub } from "./utils.js"; のようにカンマで並べる。

import { add, sub } from "./utils.js";

console.log(add(3, 7));
console.log(sub(10, 4));

必要なものだけを名指しで取り込むのが名前付きインポート。何を使っているかがファイルの先頭を見れば分かる。

____ const TAX_RATE = 0.1;

TAX_RATE がエクスポートされ 0.1

「輸出する」という意味の英単語。

export

設定値も export できる。関数だけでなく、定数やオブジェクトも同じように公開できる。

解答 == B

モジュールであることをブラウザに伝える必要がある。

B

これを忘れると「Cannot use import statement outside a module」というエラーになる。モジュールを使い始めたら必ず付ける。

出力 == こんにちは、田中さん

export default で公開し、import hello from "./greet.js" と波カッコなしで受け取る。

// greet.js
export default function greet(name) {
  return `こんにちは、${name}さん`;
}

// main.js
import hello from "./greet.js";

console.log(hello("田中"));

デフォルトエクスポートは受け取り側が好きな名前を付けられる。1ファイルに1つだけ、そのファイルの「主役」を公開するときに使う。

import { withTax ____ tax } from "./utils.js";

console.log(tax(1000));

出力 == 1100

「〜として」を意味する2文字の英単語。

as

名前が長いときや、別のファイルの関数と名前が衝突したときに使う。エクスポート側で export { a as b } と書くこともできる。

解答 == B

export の有無が公開・非公開の境界になる。

B

これがモジュールの最大の利点。内部でしか使わない処理を隠せるので、外から誤って壊されることがなくなる。

出力 == ゼロカラ商店（税率10%）

税率のパーセント表示は TAX_RATE * 100 で計算する。

// config.js
export const SHOP_NAME = "ゼロカラ商店";
export const TAX_RATE = 0.1;

// main.js
import { SHOP_NAME, TAX_RATE } from "./config.js";

console.log(`${SHOP_NAME}（税率${TAX_RATE * 100}%）`);

変わりうる値をコードから追い出すのが設定分離の目的。税率が変わっても config.js の1行を直すだけで、全ファイルに反映される。

出力 == 10

import * as utils from "./utils.js"; と書くと名前空間としてまとめて取り込める。

import * as utils from "./utils.js";

console.log(utils.add(3, 7));

どのファイル由来かが呼び出し側で分かるのが利点。ただし使わないものまで読み込むので、通常は名前付きインポートのほうが好まれる。

出力2行が完全一致

両方とも名前付きエクスポートにする。main.js では for...of で回す。

// utils.js
export const withTax = (price, rate = 0.1) => Math.round(price * (1 + rate));
export const shippingFee = (price) => (price >= 5000 ? 0 : 600);

// main.js
import { withTax, shippingFee } from "./utils.js";

for (const p of [4800, 12000]) {
  console.log(`${p.toLocaleString()}円 → 税込${withTax(p).toLocaleString()}円 / 送料${shippingFee(p)}円`);
}

JS08で作った関数を別ファイルに移すだけでモジュールになる。こうしておけば他の画面からも同じ計算を呼べる。

出力 == 1100

price.js の先頭で import { TAX_RATE } from "./config.js"; と書く。モジュールは別のモジュールを取り込める。

// config.js
export const TAX_RATE = 0.1;

// price.js
import { TAX_RATE } from "./config.js";

export const calcTotal = (amount) => Math.round(amount * (1 + TAX_RATE));

// main.js
import { calcTotal } from "./price.js";

console.log(calcTotal(1000));

main.js は config.js の存在を知らなくてよい。税率の管理は price.js に任せきりにできるので、呼び出し側がシンプルになる。これが階層的な設計。

出力 == 現在値：3

count には export を付けない。increment と getCount だけをエクスポートする。

// counter.js
let count = 0;

export const increment = () => {
  count++;
  return count;
};

export const getCount = () => count;

// main.js
import { increment, getCount } from "./counter.js";

increment();
increment();
increment();

console.log(`現在値：${getCount()}`);

count を直接書き換えられないのが要点。外部から count = 999 とされる心配がなく、増やす手段は increment だけに限定できる。これをカプセル化と呼ぶ。

出力3行が完全一致

validateAll の中で早期リターンする。エラーメッセージは「名前が未入力です」「メール形式が不正です」。

// validator.js
export const validateName = (name) => name !== "";
export const validateEmail = (email) => email.includes("@");

export default function validateAll(name, email) {
  if (!validateName(name)) {
    return "名前が未入力です";
  }

  if (!validateEmail(email)) {
    return "メール形式が不正です";
  }

  return "OK";
}

// main.js
import validateAll from "./validator.js";

console.log(validateAll("", "a@b.com"));
console.log(validateAll("田中", "abc"));
console.log(validateAll("田中", "a@b.com"));

細かい検証は名前付き、まとめ役はデフォルトという使い分け。呼び出し側は validateAll だけ知っていればよく、個別の検証関数はテスト時などに必要なら取り込める。

出力 == 合計286 / 平均71.5 / 最高91

average は sum を内部で使える（同じファイル内なので import 不要）。小数1桁は toFixed(1)。

// stats.js
export const sum = (nums) => nums.reduce((s, n) => s + n, 0);
export const average = (nums) => (sum(nums) / nums.length).toFixed(1);
export const max = (nums) => Math.max(...nums);

// main.js
import { sum, average, max } from "./stats.js";

const scores = [82, 45, 91, 68];

console.log(`合計${sum(scores)} / 平均${average(scores)} / 最高${max(scores)}`);

同じファイル内なら import せずに呼べる。average が sum を使っているが、これは内部の実装詳細なので外からは意識しなくてよい。