memolu

いろいろメモってます

ES6 - modules(import/export)を解説してみる

本連載について

本連載では少しづつES6について記載していこうと思います。 第八回はmodules(import/export)を学びます。 発表されてから久しいですが、まだ習得されていない方は今からでも勉強してみてはいかがでしょうか。

modules(import/export)

今までjavascriptでは、機能を各jsファイルに分けて開発するような機能が言語仕様としてありませんでした。
webページでは単純にページ内で各jsファイルを読み込むことで実現できましたが、この手法はそれぞれの依存関係がコード量に比例して見通しが悪くなっていきました。
時が経ってサーバーサイドjsが生まれ、jsでの大規模開発を行うにあたり、ファイルを分けて管理できないのは致命的でした。
common.jsやnode.jsではrequire関数が定められ、import/exportに似た機能は他のライブラリなどでは先行して実装されており、node.jsに関して言えば、爆発的な普及の礎になっていたことは言うまでもありません。
そして、今回javascriptでこれらをサポートする機能が言語仕様として実装されました。今まで複数ファイルでの開発できなかった問題を解決され、他のツールに頼ることなく解決策が提示されたのは大きな進歩と言えるでしょう。

ブラウザサポート

ブラウザサポートについては以下をご確認ください。

http://kangax.github.io/compat-table/es6/

modules(import/export)の使い方

modulesの概念では、別ファイルに渡す変数や関数などを「モジュール」と呼びます。
複数のモジュールを別のjsファイルに渡す場合、exportを使って別ファイルで使えるようにします。 受け取る側のjsファイルではimportを使って同ファイル内で有効化します。

複数モジュールを受け渡しする

下のコードはlib.jsで作成した関数をmain.jsで使用しています。
外部ファイルに"輸出"したいモジュールに対してexportを先頭につけるだけで外部ファイルからアクセスできるようになります。

// ----- lib.js -----
export const sqrt = Math.sqrt;

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

export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

モジュールを使用したい側のコードでは以下のようにimportを使用します。
import import先の名前 from 'import元のjsファイル';のように記載します。

// ----- main.js -----
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

ちなみに*をつけることで一つのオブジェクトのプロパティとしてモジュールを一気に受け取ることが可能です。
import * as オブジェクト名 from 'import元のjsファイル'のように記載します。

// ----- main.js -----
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

一つのモジュールを受け渡しする

jsファイル内でモジュールを一つだけ渡す場合、export defaultを使用します。
export defaultは一つのファイル内で1度しか使用できません。
また、受け取り側の記述が鮮明になるため、通常の使用時はなるたけexport defaultで渡すことをおすすめします。

// ----- myFunc.js -----
export default function () { ··· } // no semicolon!
// ----- main.js -----
import myFunc from 'myFunc';
myFunc();

クラスを渡すこともできます。

// ----- MyClass.js -----
export default class { ··· } // no semicolon!
// ----- main2.js -----
import MyClass from 'MyClass';
const inst = new MyClass();

まとめ

ちょっと短いですが、今回はこれで終わりです。
というのも基本的な機能としてはこれで全てになるからです。細かい仕様や背景などは以下のリンクで詳しくまとまっていますのでぜひご参考にしてみてください。
個人的にブラウザサポートがまだ追いついていないためトランスパイラを使わざるを得ないかなと思われますが、強力な機能になりますので機会を設けて実践していただければと思います。

Modules
http://exploringjs.com/es6/ch_modules.html