ES6でのimport/export

概要

React+ReduxをやってみてES6でのimportとexportについて(今のところ関数だけ)学んだことのメモ．

実行環境

ES6はブラウザやJSエンジンによってサポートされている機能がまちまちのため，この記事では以下の環境(Node.jsのv9.11.1)を想定する.

$ node --version
v9.11.1

この環境では，以下のオプション(--experimental-modules)を付けることによってES6の機能を試すことができる．なお，注意点として，実行するファイルの拡張子は**.mjs**とすること．

$node --experimental-modules main.mjs

基本

ES6では，ある関数が書いてあるファイルを別のファイルから利用する場合，その関数にexportをつけて公開することができる．

lib.mjs

export function hello() {
    console.log("Hello");
}

export function hello2() {
    console.log("Hello2");
}

そして，公開した関数をimportによってインポートすることができる．
importでは，

import {importする関数名1,importする関数名2...} from '相対パス/ファイル名(拡張子なし)'

とする．

main.mjs

import {hello, hello2} from './lib'
hello();
hello2();

実行結果

>node --experimental-modules main.mjs
(node:2761) ExperimentalWarning: The ESM module loader is experimental.
Hello
Hello2

export default

1つのファイルで1つのモジュール(関数)をexportする場合，defaultキーワードをつけることが推奨されているらしい．

lib2.mjs

export function hoge() {
    console.log("hoge");
}

export default function hello3() {
    console.log("Hello3");
}

これをインポートして使う

main.mjs

import {hello, hello2} from './lib'
import hello3, {hoge} from './lib2'  /* hello3は{}はつけない */

hello();
hello2();
hello3();
hoge();

defaultをつけてexportした関数は，{...}なしでimportする．

実行結果

>node --experimental-modules main.mjs
(node:2824) ExperimentalWarning: The ESM module loader is experimental.
Hello
Hello2
Hello3
hoge

anonymous関数のexport

ES6では，クロージャを定義してexportできる

lib3.mjs

export default () => {
    console.log("anonymous func");
}

これらはインポート側で名前をつけてインポートする

main.mjs

import {hello, hello2} from './lib'
import hello3, {hoge} from './lib2'
import {default as ano} from './lib3' /* lib2.mjsでexportした関数をanoとしてインポート */
hello();
hello2();
hello3();
hoge();
ano();

実行結果

>node --experimental-modules main.mjs
(node:2896) ExperimentalWarning: The ESM module loader is experimental.
Hello
Hello2
Hello3
hoge
anonymous func

exportされた関数をまとめる

公開する関数が複数のファイルに分かれて多くなってくると，importするのが煩わしくなってくる．そこで，exportしている関数をまとめて1つのモジュールにすることができる．

lib4.mjs

export default () => {
    console.log("anonymous func lib4");
}

lib5.mjs

export default () => {
    console.log("anonymous func lib5");
}

lib4.mjsとlib5.mjsで公開されたファイルをまとめる．

mmo.mjs

export {default as lib4} from './lib4';
export {default as lib5} from './lib5';

mmo.mjsというモジュールを作成しexportする．

これらをimportして使う．

main.mjs

import {hello, hello2} from './lib'
import hello3, {hoge} from './lib2'
import {default as ano} from './lib3'
import * as mmo from './mmo'   /* mmoという名前でインポートする */


hello();
hello2();
hello3();
hoge();
ano();
console.log(mmo);
mmo.lib4();  /* モジュール名.関数名()として利用する */
mmo.lib5();

>node --experimental-modules main.mjs
(node:2946) ExperimentalWarning: The ESM module loader is experimental.
Hello
Hello2
Hello3
hoge
anonymous func
{ lib4: [Function: default], lib5: [Function: default] }
anonymous func lib4
anonymous func lib5

この例では，まずmmo.mjsの中でlib4, lib5でexportしたdefaultの関数に名前をつけ，さらにmmo.mjsですべてインポートし，インポートした関数にはモジュール名.関数名としてアクセスする．

---

間違い等あればご指摘下さい．