Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8936

Module

$
0
0

ES6のモジュールシステム

1. 概要

あるファイルから別のファイルの関数や変数を参照したいときに、モジュールシステムを利用する。参照元では、importコマンドを使って外部のファイルを指定し、参照先では、exportコマンドを使って関数や変数を外部に公開する。

公開の方法として、大きく分けて、Named ExportsとDefault Exportsがある。両者はimport/exportコマンドの使い方が異なるので、章を分けて説明していく。

2. Named Exports

基本的には、以下のように、公開したいものの頭にexportを付ける。

// car.jsexportconstMAX_SPEED=200;exportfunctiongetSpeed(){retrunspeed;}exportfunctionsetSpeed(x){speed=x;}

あるいは、以下のように、ファイルの最後にまとめて書くこともできる。

// car.jsconstMAX_SPEED=200;functiongetSpeed(){retrunspeed;}functionsetSpeed(x){speed=x;}export{MAX_SPEED,getSpeed,setSpeed,};

外部に対して別名を見せたいときには、次のようにasを指定できる。

// car.jsconstMAX_SPEED=200;functiongetSpeed(){retrunspeed;}functionsetSpeed(x){speed=x;}export{MAX_SPEEDasCAR_MAX_SPEED,// 外部のファイルからはCAR_MAX_SPEEDという名前で見えるgetSpeed,setSpeed,};

上で作ったファイル「car.js」を参照するためには、importコマンドを用いる。

// main.jsimport{CAR_MAX_SPEED,getSpeed,setSpeed}from'car';setSpeed(100);

{ CAR_MAX_SPEED, getSpeed, setSpeed }のところは、必ずしもすべてを指定する必要はなく、必要なものだけを指定してよい。

指定が面倒な場合には、次のように* asを付けて、すべてを読み込むこともできる。

// main.jsimport*asCarfrom'car';Car.setSpeed(100);

3. Default Exports

上で説明したNamed Exportsでは、importの際に、読み込むものを列挙したり、* asを指定する必要があった。これに対して Default Exportsでは、よりシンプルに、次のように書くことができる。

// main.jsimportCarfrom'car';Car.setSpeed(100);

これに対応するには、以下のように、export defaultを指定する。

// car.jsconstMAX_SPEED=200;functiongetSpeed(){retrunspeed;}functionsetSpeed(x){speed=x;}// Objectにまとめて公開するexportdefault{MAX_SPEED:MAX_SPEED,getSpeed:getSpeed,setSpeed:setSpeed,};

この例ではObjectを公開しているが、変数でも関数でもクラスでも、何でもよい。ただし、export defaultは、ファイルの中で1箇所しか書くことはできない。

なお、ES6ではオブジェクトのキーを省略表記できるようになったので、上の例は、次のように簡潔に書ける。

exportdefault{MAX_SPEED,getSpeed,setSpeed,};

こう書くと、先のNamed Exportsの例にそっくりになるが、構文的にはまったく別モノであるから注意が必要である。例えば、Named Exportsのようなasを使うことはできず、次のコードはエラーとなる。

exportdefault{MAX_SPEEDasCAR_MAX_SPEED,// エラー!!getSpeed,setSpeed,};

4. いずれを使うべきか

「Exploring ES6」という書籍では、Named Exportsよりも、Default Exportsが推奨されている。これは、書式の簡潔さを根拠としている。

Exploring ES6より引用:

16.8.1 Default exports are favored

The module syntax suggesting that the default export "is" the module may
seem a bit strange, but it makes sense if you consider that one major design
goal was to make default exports as convenient as possible.
Quoting David Herman:

  ECMAScript 6 favors the single/default export style, and gives the sweetest
  syntax to importing the default. Importing named exports can and even should
  be slightly less concise.

一方、下記の記事のように、export defaultを使うメリットがないと指摘する意見もある。これは主に、Tree-Shakingという最適化との相性が悪いことを根拠にしている。例えば、多数のメソッドを持つオブジェクトをexport defaultしていて、そのうちの一部のメソッドしか使わない場合、minifyしてもサイズが小さくならないらしい。

参考: Why we have banned default exports in Javascript and you should do the same

これら双方の主張を考えると、おおよそ、以下のように使い分けをすると良さそうである。

  • ライブラリのように、使うかどうか分からないメソッドが多数ある場合には、Named Exports
  • そうでなければ、Default Exports


Viewing all articles
Browse latest Browse all 8936

Trending Articles