開発者ドキュメント

ES6モジュールとJavaScriptでのインポートとエクスポートの使用方法

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';
モバイルバージョンを終了