あまブログ

ドキドキ......ドキドキ2択クイ〜〜〜〜〜〜〜ズ!!

【ESM】ESモジュールのインポートとエクスポートの使い方

JavaScript Node.js

この記事では、ESモジュール(ECMAScriptモジュール, JavaScriptモジュール)のimportとexportの使い方を紹介します。

Node.jsでESモジュールを使う方法は以下を参照ください。

ama-tech.hatenablog.com

1. 名前付きエクスポート(Named exports)

export.mjs

// 1.名前付きエクスポート
// 宣言済みのオブジェクトを名前付きエクスポートする
const foo = "foo";
export { foo };
// 宣言と同時に名前付きエクスポートする
export const bar = "bar";
export function baz() { return "baz" }

// 2.名前付きエクスポートのエイリアス
// internalQux変数をquxとして名前付きエクスポートする
const internalQux = "qux";
export { internalQux as qux };

import.mjs

// 名前付きエクスポートされたfoo,bar,baz,quxをインポートする
import { foo, bar, baz, qux } from "./export.mjs";
console.log(foo); // => "foo"
console.log(bar); // => "bar"
console.log(baz()); // => "baz"
console.log(qux); // => "qux"

// fooとして名前付きエクスポートされた変数をmyFooとしてインポートする
import { foo as myFoo } from "./export.mjs";
console.log(myFoo); // => "foo"

2. デフォルトエクスポート(Default exports)

export.mjs

// 1.デフォルトエクスポート
const quux = { quux: "quux" }
export default quux; // export { quux as default };と同じ

import.mjs

// デフォルトエクスポートをmyModuleとしてインポートする
import myModule from "./export.mjs"; // import { default as myModule } from "./export.mjs";と同じ
console.log(myModule); // => { quux: "quux" }

3. モジュールの集約(Aggregating modules)

modules/foo.mjs

export const ONE = 1,
  TWO = 2,
  TEN = 10;

modules/bar.mjs

export const plus = (n, m) => n + m;
const times = (n, m) => n * m;

export default times;

modules/baz.mjs

export const EINS = 1,
  ZWEI = 2,
  DREI = 3,
  VIER = 4,
  FUNF = 5;

modules/index.mjs

export * from "./foo.mjs";
export { plus as add, default as multiply } from "./bar.mjs";
export * as German from "./baz.mjs";

main.mjs

import { add, multiply, TWO, TEN, German } from "./modules/index.mjs";

console.log(add(5, TWO)); // => 7
console.log(multiply(4, TEN)); // => 40
console.log(multiply(German.FUNF, German.DREI)); // => 15

【参考】