C#開発者のための最新JavaScript事情（モジュール編）：特集：C#×JavaScript（3/3 ページ）
デフォルトエクスポートと名前付きエクスポートの混在
デフォルトエクスポートと名前付きエクスポート（とそれらのインポート）は混在可能だ。以下に例を示す。ここでは直前に見た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());
あるいは、名前付きインポートの特定の項目をデフォルトエクスポートにすることも可能だ。これにも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で将来サポート予定）についても触れる予定だ。
Copyright© Digital Advantage Corp. All Rights Reserved.
ITmediaはアイティメディア株式会社の登録商標です。