C#開発者のための最新JavaScript事情（モジュール編）：特集：C#×JavaScript（2/3 ページ）

ECMAScript 2015で導入されたモジュール機構、エクスポート／インポートの方法をBabelで試しながら調べていこう。

[かわさきしんじ，Insider.NET編集部]

名前付きエクスポート／インポート

　名前付きエクスポートは、モジュール内で使用している各種オブジェクトを個別にエクスポートするときに使用する。最初の例でも見たように、その基本型は次のようになる。

export 変数宣言／関数宣言／クラス宣言など;

名前付きエクスポートの構文（その1）

　以下に例を示す。

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

export class Foo {
  constructor() {
    this.someprop = "Insider.NET";
  }
}

export const PI = 3.14;  // constはES2015で導入された機能で定数を表す

// nameにはexportキーワードが付加されていない
const name = "Insider.NET";

名前付きエクスポートの例（その1）

　上の例では「const name = "Insider.NET";」行には「export」がない。この場合には、文字列nameはエクスポートされない。

　個々のオブジェクトにいちいち「export」を付加するのが面倒なときには、以下のようにしてもよい。

export { エクスポートするもののリスト };

名前付きエクスポートの構文（その2）

　これは外部に公開したいものをエクスポート節（{}）で指定するというものだ。上の例なら次のように書き換えられる。

function hello() {
  console.log("hello from module1");
}

class Foo {
  constructor() {
    this.someprop = "Insider.NET";
  }
}

const PI = 3.14;

const name = "Insider.NET";

export { hello, Foo, PI };

名前付きエクスポートの例（その2）

　こちらの構文では、コードを記述する際に何をエクスポートするかどうかを気にせずに、どこかの時点で選択的にどれをエクスポートするかを指定できる。

　これらをインポートする最も基本的な構文は次のようになる。

import { インポートするもののリスト } from 'モジュール';

インポートの構文（名前付きインポート）

　以下に例を示す。

import { hello, Foo } from './module1';

hello();

var f = new Foo();
console.log(f.someprop);

module1モジュールからhelloとFooをインポート

　インポートするものには別名を付けられる。これには次のようにasキーワードを使用する。

import { hello, Foo as Bar } from './module1';

var f = new Bar();

FooクラスをBarクラスとして使用する

　この場合には、Fooクラスに「Bar」という別名を付けている。このとき、「Foo」という識別子ではこのクラスにはアクセスできないことには注意が必要かもしれない。別名は、アプリの規模が大きくなり、名前が衝突する場合にこれを回避するのに有用になるだろう。

　asキーワードは、モジュールを「名前空間」的に使用するためにも使用できる。これを「名前空間インポート」と呼び、「import * as 名前空間名 from ...」のように指定する。例えば、Mathモジュールがあったとすると、次のように使用する。

// Math.es6
function square(num) { ... };
function sqrt(num) { ... };
function fact(num) { ... };
  …… 省略 ……

export { square, sqrt, fact, ... };

// main.es6
import * as Math from './Math'; 

Math.fact(10);

名前空間インポート

　これはMathモジュールから全てをインポートし、それらがMath名前空間に含まれるものとして利用するというものだ。このときには次のような名前付きインポートは行えない。

import { fact, square } as Math from './Math';  // エラー！

名前空間インポートでは個別にインポートするものは選べない

　また、エクスポート側のモジュールで「export」キーワードを付加していないものにはアクセスできない。名前付きエクスポートの最初の例では、以下のように文字列nameには「export」キーワードを付加していなかった。上の名前空間インポートを使って、module1モジュールからインポートをしてみるとどうなるだろう。

// module1.es6
export function hello() {
  console.log("hello from module1");
}

…… 省略 ……

const name = "Insider.NET";

// main.es6
import * as Mod1 from './module1';

console.log(Mod1.name);

> babel-node --presets es2015 main.es6
undefined  …… エクスポートされていないものはインポートされない

エクスポートされていないものはインポートされない