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

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

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

デフォルトエクスポートと名前付きエクスポートの混在

　デフォルトエクスポートと名前付きエクスポート（とそれらのインポート）は混在可能だ。以下に例を示す。ここでは直前に見たmodule1.es6ファイルに以下のようなデフォルトエクスポートが追加されているものとしよう。

// module1.es6
export default function getAns2UltimateQ() {
  return 42;
}

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

…… 省略 ……

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

console.log(getAns());
Mod1.hello();

デフォルトエクスポートと名前付きエクスポートをインポート

　なお、「名前空間インポート」ではデフォルトエクスポートはインポートできないことには注意しよう。そのため、上のコードではデフォルトエクスポートのインポートと名前空間インポートを別個に指定している。

　と書いたが、デフォルトエクスポートのエクスポート名「default」を使うと、名前付きインポートに指定できる。

import { default as getAns, hello } from './module1';

console.log(getAns());

エクスポート名「default」を使用した名前付きインポート

　あるいは、名前付きインポートの特定の項目をデフォルトエクスポートにすることも可能だ。これにもasキーワードを使用する。defaultだけではなく、別名も指定エクスポートできる（defaultは特別扱いされる別名だと考えてもよいだろう）。

// module1.es6
function getAns2UltimateQ() {
  return 42;
}

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

…… 省略 ……

export { getAns2UltimateQ as default, hello as sayhello, ...};

// main.es6
import getAns , { sayhello } from './module1';

console.log(getAns());
sayhello();

名前付きエクスポートでデフォルトエクスポートを指定

その他のエクスポート

　この他にも、インポートした要素をエクスポートするための「export ... from ...」構文、副作用を期待してインポートを行う「import 'モジュール名'」構文などがあるが、ここでは紹介は割愛する。

デフォルトエクスポート vs 名前付きエクスポート

　デフォルトエクスポートは単一のオブジェクトだけをエクスポートできる。これに対して、名前付きエクスポートは公開したいものを個別に選択できる。「export { ... }」構文を使えば、これを簡便に行える。「名前空間インポート」を使えば、モジュールを名前空間的に使用することも可能だ。

　その違いは、デフォルトエクスポートはモジュールごとに一つだけであり、これがそのモジュールで最重要であることを意味することと、それ故にインポートが名前付きインポートよりも簡単に行えることだ。

import obj from '...';

デフォルトエクスポートのインポート

　これに対して、名前付きエクスポートをインポートするには、どれをインポートしたいのかを、明示的に指定する必要がある（名前空間インポートを除く）。

import { ... } from '...';

名前付きインポート

　構文だけを見ると、デフォルトエクスポートと名前付きエクスポートのインポートにはそれほどの労力差はなさそうにも見える。が、実際にアプリを開発する際に、名前付きインポートで必要なものを全て指定しなければならない状況になると、この差はここで見るよりも大きなものになることだろう（それを避けるための名前空間インポートなのだろう）。

　名前付きエクスポートでは、名前空間インポートを使うことでモジュールを名前空間的に使える。これは魅力的に思えるが、デフォルトエクスポートでも同様なことは可能だ。例えば、デフォルトエクスポートを使うように上で見たMathモジュールを書き換えると次のようになる。

// Math.es6
export default {
  square: function square(num) { ... },
  sqrt: function sqrt(num) { ... },
  fact: function fact(num) { ... }
}

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

Math.fact(10);

デフォルトエクスポートを名前空間的に使う

　デフォルトエクスポートと名前付きエクスポートは、そのモジュールにおいて個々のオブジェクトが持つ意味合いや、インポートする側での使い勝手を考えて使い分けることになるだろう。

　次回はECMAScript 2015でサポートされる非同期処理について見てみよう。Promiseオブジェクトを使った非同期プログラミングはJSでストアアプリを開発している方なら見慣れたものだろう。また、C#プログラマーにはおなじみのasync／awaitキーワード（ECMAScriptで将来サポート予定）についても触れる予定だ。

「特集：C#×JavaScript」