モダンなJSの話──importとexport

こんにちは。イノベーター・ジャパン（以下、IJ）のエンジニアのbmfです。

今回はECMAScript6から追加されたimportとexportについて書きます。

前回の記事と関連がありますので、こちらもあわせてお読みください。 tech.innovator.jp.net

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

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

export.js

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

function createFoo() {
  return new foo();
}

export default createFoo;

import.js

import createFoo from 'export';

console.log(createFoo.fooFunction()); // foo

まとめ

Vue.jsやReactといった最近のフレームワークでは当たり前のように使われているので今一度仕様をしっかりと理解しておくと良いでしょう。

参考

• MDN - Export
• MDN - Import