※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。

exportとは

exportは、指定のファイルから関数、変数、オブジェクト、クラス（クラスはプロトタイプベース継承の糖衣構文であり、関数の一種。詳しくはモダンなJSの話──クラス）などを受け取り、任意のファイルでそれらを使えるようにするための文です。

exportには主に2種類の使い方があります。

Named exports

exportしたい要素の名前を付けてexportする方法です。

export { fooFunction };

export { fooFunction, barFunction, ... }; 

export const foo = 'bar'; 

export let foo, bar, ...;

export class foo{...};

こんな感じで要素をexportすることができます。
変数のexportはvar、letも使うことができます。

Default exports

exportしたいデフォルトの要素を決めておきたいときにdefaultキーワードを使ってexportする方法です。

export default fooFunction() {}

export default class {}

var、let、constはexport defaultで使うことができないので注意です。

importとは

importは、別ファイルからexportされた関数や変数、オブジェクトを読み込み、それらを使えるようにするための文です。

import { foo } from "Foo";
import { foo, bar } from "FooBar";
import { foo as bar } "Foo";  // エイリアスを指定することができる
import { foo as bar, bar as foo, ... } "FooBar";
import "FooBar"; // 全てインポート

importされた要素のスコープについてですが、原則的には現在のスコープ（ローカルスコープ）になります。

export defaultで定義されたdefaultの要素をimportする方法

シンプルにdefaultを呼び出す場合はこんな感じです。

import fooDefault from "Bar";

名前付きの要素を一緒にimportしたい場合は、default importの後に定義します。

import fooDefault, { foo, bar } "FooBar";

classをexport/importする例

クラスをexportする場合はimport先またはexport先でnew呼び出しをするのを忘れないようにしましょう。

import先でnew呼び出しする例はこんな感じです。

export.js

export class foo {
  fooFunction() {
     return 'foo'; 
  }
}


export default class bar {
  barFunction() {
     return 'bar';
  }
}

import.js

import { foo } from 'export'; // {}がないとdefaultのbarが呼ばれてしまう
import bar from 'export';

const objFoo = new foo;
const objBar = new bar;

console.log(objFoo.fooFunction()); // foo
console.log(objBar.barFunction()); // bar

<br/>

呼び出し元でnew呼び出ししておく場合はこんな感じです。