こんにちは。イノベーター・ジャパン(以下、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といった最近のフレームワークでは当たり前のように使われているので今一度仕様をしっかりと理解しておくと良いでしょう。
参考