ウェブサイト検索

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

ES2015（ES6）では、JavaScriptにモジュールの組み込みサポートがあります。CommonJSと同様に、各ファイルはそれ自体がモジュールです。オブジェクト、関数、クラス、または変数を外部に公開するには、それらをエクスポートし、必要な他のファイルでインポートするのが非常に簡単です。Angular 2はES6モジュールを多く使用しているため、文法はAngularで作業してきた人には非常に馴染みのあるものになるでしょう。文法は非常にわかりやすいです。

輸出

メンバーは一つずつエクスポートできます。エクスポートされていないものは、モジュールの外では直接利用できません:

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() {
     // ...
   }
}

または、モジュールの最後に単一のステートメントで必要なメンバーをエクスポートすることもできます。

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';

関連記事: