ECMAScript 2015 (ES6) まとめ (モジュール編)

ECMAScript2015 (ES6) で機能追加されたもののうち、今回は class に関連する部分をピックアップしてまとめていきます。 ついに JavaScript でも クラス が使えるようになった！ …のですが、不完全な部分もありますので、この記事を読んでそんなところもピックアップしてもらえればと思います。

ES2015 に関連する まとめ記事 は以下の通りです。

関連記事

• ECMAScript 2015 (ES6) まとめ (基本編)
• ECMAScript 2015 (ES6) まとめ (クラス編)
• ECMAScript 2015 (ES6) まとめ (モジュール編) ← この記事

---

目次

• ESモジュール概要
• 基本構文
  • import
  • export

---

ESモジュール概要

ESモジュールは ECMAScript で定義された 標準規格 です。 Node.js で定義されている モジュール とは少し異なるので注意です。 残念なのは現在（2016年6月時点）どのブラウザも実装してないような点。。

ブラウザで試せないですが、以下に簡単なサンプルコードを記載します。

module.js

export default function () {
  console.log('exported module method.');
};

main.js

import sample from './module.js';

sample();     // module.js の default function が実行される。

基本構文

import

外部定義されたモジュールファイルパスを指定してモジュールを読み込みます。 読み込まれたモジュールは指定された変数へ代入して読み込み または モジュールに定義された名称そのままで読み込み が行われます。

構文

import name from 'module';

import {member} from 'module';
import {member1 [as alias1] [, ... , menberN [as aliasN]]} from 'module';

name

デフォルトエクスポート設定されたオブジェクトを受け取る変数名

module

モジュールファイルへのパス

member1 ... memberN

モジュールファイル中に定義された名前付きエクスポートのうち、インポートしたいオブジェクト名

alias1 ... aliasN

インポートしたオブジェクトを受け取る変数名

利用例

モジュール内のすべてのコンテンツをインポート

import some from './some.js';

モジュール内のオブジェクト名を指定してインポート

import {some} from './some.js';

モジュール内のオブジェクト名を複数指定してインポート

import {hoge, foo, bar} from './some.js';

モジュール内のオブジェクト名を指定して別名にインポート

import {some as hoge} from './some.js';

export

export できるものは プリミティブ、オブジェクト、関数、クラス と何でも指定されたものをモジュールとしてエクスポートできます。

export する方法は default export と named export の2種類があります。 default export はその名の通り、デフォルトとして指定された単一オブジェクトをエクスポートできます。 named export は名前付けされたオブジェクトを複数同時にエクスポートできます。 実際のモジュールでは default export と named export を混在させることもできます。

構文

default export

export default function () {...};
export default class {...}

named export

export var name1 = ...;
export let name2 = ...;
export const name3 = ...;
export function name4 () {...}
export class name5 {...}

利用例

デフォルトで関数を出力するサンプルコード

export default function (msg) {
  console.log(msg);
}

デフォルトでクラスを出力するサンプルコード

export default class {
  id: '',
  name: '',
  say () {
    console.log('My name is ' + this.name + '.');
  }
}

名前付きでオブジェクトを出力するサンプルコード

export User = function () {
  this.id = '';
  this.name = '';
};

名前付きで定数を出力するサンプルコード

export const STATUS_X = 0x0001;
export const STATUS_Y = 0x0002;
export const STATUS_Z = 0x0004;

名前付きで複数のオブジェクトを出力するサンプルコード

const STATUS = {
  X: 0x001,
  Y: 0x002,
  Z: 0x004
};

var User = function () {
  this.Id = '';
  this.Name = '';
  this.Status = '';
};

export {STATUS, User};

---

ESモジュールについてまとめてみました。 ブラウザでは使えないので参考情報にしかならないですが…。。 そのうち使えるようになった時にそなえての準備になればと思います。

参考記事

• MDN - import
• MDN - export
• uehaj's blog - (Babel 5における)ES6のモジュールを解説してみた

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter