JavaScript の import / export の基本を確認してみる

JavaScript にいつからか追加されたモジュール機能を今さらながら確認してみます。

モジュールのエクスポートには、名前付きエクスポートとデフォルトエクスポートがあります。

export default

デフォルトエクスポートは、

modules/sqare.js

export default randomSquare

の形式でエクスポートします。

modules/sqare.js

function randomSquare() {
  console.log('random square')
}

export default randomSquare;

または

modules/sqare.js

export default randomSquare() {
  console.log('random square')
}

モジュールをエクスポートしたら次の形式でインポートします。

main.js

import randomSquare from './modules/square.js';
randomSquare() // random square

import randomSquareは次の簡略表現です。

import { default as randomSquare } from './modules/square.js';

名前付きエクスポート

名前付きエクスポートをすると、インポートするときにモジュール名を指定することができます。

modules/sqare.js

const name = 'square'
function draw() {
  console.log('draw in square.js')
}
export { name, draw }

export function reportPerimeter() {
  console.log('report perimeter in square.js')
}

モジュールのインポートはこちら。

main.js

import { name, draw, reportPerimeter } from './modules/square.js';

console.log(name) // square
draw() // draw in square.js
reportPerimeter() // report perimeter in square.js

モジュールオブジェクト

モジュール内でエクスポートされた機能をモジュールオブジェクトの中にインポートすることで、エクスポートされた機能をモジュールオブジェクトのメンバーとして扱えるようになります。

main.js

import * as Module from './modules/square.js';

console.log(Module.name) // square
Module.draw() // draw in square.js
Module.reportPerimeter() // report perimeter in square.js