ES6モジュールとJavaScriptでのインポートとエクスポートの使用方法
提供:Dev Guides
ES2015(ES6)では、JavaScriptのモジュールのサポートが組み込まれています。 CommonJSと同様に、各ファイルは独自のモジュールです。 オブジェクト、関数、クラス、または変数を外部で利用できるようにするには、それらをエクスポートしてから、必要に応じて他のファイルにインポートするだけです。 Angular 2はES6モジュールを多用しているため、構文はAngularで作業したことがある人には非常に馴染み深いものになります。 構文は非常に単純です。
エクスポート
メンバーを1つずつエクスポートできます。 エクスポートされなかったものは、モジュールの外部では直接利用できません。
export const myNumbers = [1, 2, 3, 4]; const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module export function myLogger() { console.log(myNumbers, animals); } export class Alligator { constructor() { // ... } }
または、モジュールの最後にある1つのステートメントで目的のメンバーをエクスポートできます。
export { myNumbers, myLogger, Alligator };
エイリアスを使用したエクスポート
as キーワードを使用して、エクスポートされたメンバーにエイリアスを指定することもできます。
export { myNumbers, myLogger as Logger, Alligator }
デフォルトのエクスポート
default キーワードを使用して、デフォルトのエクスポートを定義できます。
export const myNumbers = [1, 2, 3, 4]; const animals = ['Panda', 'Bear', 'Eagle']; export default function myLogger() { console.log(myNumbers, pets); } export class Alligator { constructor() { // ... } }
インポート
import キーワードを使用すると、インポートも非常に簡単です。メンバーは中かっこで囲まれ、現在のファイルに対するモジュールの位置が次のようになります。
import { myLogger, Alligator } from 'app.js';
エイリアスを使用したインポート
インポート時にメンバーにエイリアスを設定することもできます。
import myLogger as Logger from 'app.js';
エクスポートされたすべてのメンバーをインポートする
次のようなモジュールによってインポートされたすべてのものをインポートできます。
import * as Utils from 'app.js';
これにより、ドット表記のメンバーにアクセスできます。
Utils.myLogger();
デフォルトのメンバーを持つモジュールのインポート
デフォルトのメンバーに任意の名前を付けてインポートします。 次の例では、 Logger は、インポートされたデフォルトメンバーに付けられた名前です。
import Logger from 'app.js';
そして、デフォルトのメンバーの上にデフォルト以外のメンバーをインポートする方法は次のとおりです。
import Logger, { Alligator, myNumbers } from 'app.js';