JavaScript
モジュール

構文

• 'module'からdefaultMemberをインポートします。
• モジュール{moduleA}から{memberA、memberB、...}をインポートします。
• モジュールを 'module'からimport *します。
• import {memberA as a、memberB、...}を 'module'からインポートします。
• モジュールからdefaultMember、*を 'module'からインポートします。
• import defaultMember、{moduleA、...}を 'module'からインポートします。
• インポート 'モジュール';

備考

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

名前付きインポートに加えて、デフォルトのエクスポートを提供できます。

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

単純な構文を使用して、デフォルトのエクスポートをインポートすることができます。

import circleArea from './circle';
console.log(circleArea(4));

デフォルトのエクスポートは、名前と名前の輸出に暗黙的に同等であることに注意してくださいdefault 、およびインポートした結合（ circleArea上記）は、単に別名です。前のモジュールは次のように書くことができます。

import { default as circleArea } from './circle';
console.log(circleArea(4));

モジュールごとに1つのデフォルトエクスポートしか持てません。デフォルトのエクスポートの名前は省略できます。

// named export: must have a name
export const PI = 3.14;

// default export: name is not required
export default function (radius) {  
    return PI * radius * radius;
}

副作用によるインポート

場合によっては、モジュールをインポートしてトップレベルのコードが実行されるようにしたい場合があります。これは、モジュールのインポート時に一度しか実行されないポリフィルやその他のグローバル、またはコンフィグレーションに便利です。

test.jsという名前のファイルがあるとします。

console.log('Initializing...')

次のように使用できます：

import './test'

この例では、 Initializing...がコンソールに出力されます。

モジュールの定義

ECMAScript 6では、モジュール構文（ import / export ）を使用すると、各ファイルは専用の名前空間を持つ独自のモジュールになります。トップレベルの関数と変数は、グローバル名前空間を汚染しません。関数、クラス、および他のモジュールの変数をインポートするために、 exportキーワードを使用できます。

// not exported
function somethingPrivate() {
    console.log('TOP SECRET')
}


export const PI = 3.14;

export function doSomething() {
    console.log('Hello from a module!')
}

function doSomethingElse(){ 
    console.log("Something else")
}

export {doSomethingElse}

export class MyClass {
    test() {}
}

注意： <script>タグを使用してロードされたES5 JavaScriptファイルは、 import / exportを使用しない場合でも同じままです。

明示的にエクスポートされた値だけがモジュールの外部で使用可能になります。他のすべては私的であるか、またはアクセス不能であると考えることができる。

このモジュールをインポートすると、前のコードブロックがmy-module.jsと仮定します。

import * as myModule from './my-module.js';

myModule.PI;                 // 3.14
myModule.doSomething();      // 'Hello from a module!'
myModule.doSomethingElse();  // 'Something else'
new myModule.MyClass();      // an instance of MyClass
myModule.somethingPrivate(); // This would fail since somethingPrivate was not exported

別のモジュールから名前付きメンバーをインポートする

「モジュールの定義」セクションのモジュールがtest.jsファイルに存在する場合、そのモジュールからインポートしてエクスポートされたメンバーを使用できます。

import {doSomething, MyClass, PI} from './test'

doSomething()

const mine = new MyClass()
mine.test()

console.log(PI)

somethingPrivate()メソッドがtestモジュールからエクスポートされなかったので、インポートしようとすると失敗します：

import {somethingPrivate} from './test'

somethingPrivate()

モジュール全体のインポート

モジュールまたはモジュールのデフォルトのエクスポートから名前付きメンバをインポートすることに加えて、すべてのメンバを名前空間バインディングにインポートすることもできます。

import * as test from './test'

test.doSomething()

エクスポートされたすべてのメンバーは、 test変数で使用できるようになりました。エクスポートされていないメンバーは、指定されたメンバーのインポートでは利用できないのと同じように利用できません。

注意：モジュール'./test'へのパスはローダーによって解決され、ECMAScript仕様ではカバーされません。これは、任意のリソースへの文字列（パス相対またはファイルシステム上の絶対パス、URLへのURLネットワークリソース、またはその他の文字列識別子）。

エイリアスを持つ名前付きメンバーのインポート

場合によっては、 thisIsWayTooLongOfAName()ように実際にメンバー名が長いメンバーに出会うことがあります。この場合、メンバーをインポートして、現在のモジュールで使用する短縮名を付けることができます。

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

次のように複数の長いメンバー名をインポートすることができます：

import {thisIsWayTooLongOfAName as shortName, thisIsAnotherLongNameThatShouldNotBeUsed as otherName} from 'module'

shortName()
console.log(otherName)

最後に、インポートエイリアスと通常のメンバーインポートを混在させることができます：

import {thisIsWayTooLongOfAName as shortName, PI} from 'module'

shortName()
console.log(PI)

複数の名前付きメンバーのエクスポート

const namedMember1 = ...
const namedMember2 = ...
const namedMember3 = ...

export { namedMember1, namedMember2, namedMember3 }