今回は、import / exportを利用してモジュールを作成・読み込む方法について学習をしていきましょう！
「そもそもimport / exportって何？」
「import / exportの基本的な使い方を知りたい」
「requireと何が違うの？」
このような内容も含めて、本記事では以下のような構成で解説していきます！
【基礎】「import / export」の使い方
【実践】requireとの違い
この記事で、import / exportをしっかり学習してスキルアップを目指していきましょう！
「import/export」とは？
Node.jsには以前から「module.exports」を使ってプログラムをモジュール化して「require」で読み込むという手法が備わっています。
これをもっと効率よく簡単に記述できるのがimport / exportの醍醐味と言えるでしょう。
ただし、2019年2月現在においてはまだ実験的な機能なので実行する際には少しコツが必要となります。
（一般的にはトランスパイルさせて使う方が多いでしょう）
本記事では、このあたりも含めて基本的な使い方から詳しく見ていきましょう！
「import/export」の使い方
この章では、「import / export」の基本的な使い方を見ていきましょう！
主に、import / exportによるプログラムの作り方と実行方法について学んでいきます。
exportによるモジュールの作り方
それでは、まず最初にexportを使ってモジュールを作成していきましょう！
使い方は簡単で、モジュール化をして他のプログラムから使いたい変数や関数・オブジェクトなどをexportを使って記述するだけです。
次のサンプル例を見てください！
export const myname = 'taro';
export const items = [3,2,5,6,8,4];
export const user = {name: '太郎', age: 30};
export function myfunc() { console.log('exportから出力') };
この例では、文字列・配列・オブジェクト・関数など複数の値に対してexportを使って記述したモジュールになります。
このモジュールを他のプログラムから読み込むだけで、これらの配列や関数などを利用することができるわけです。
また、exportには「default」を付与してモジュール化する方法もあります。
こちらは1つのモジュールに対して1つだけしか作成できません。
export default function() { console.log('export defaultから出力') }
この例では、関数をモジュール化していますが関数名を付けていない点に注目してください。
「default」のexportでは名前を付けない関数や配列・オブジェクトなどをモジュール化することになります。
//配列の場合 export default [3,6,7,9,4]; //オブジェクトの場合 export default [3,6,7,9,4];
ちなみに、これらの作成したファイルは拡張子を「.js」ではなく「.mjs」にしておきましょう。
importによるモジュールの読み込み方
次に、作成したモジュールをimportで読み込む方法について見ていきましょう！
前章で名前を付けて変数や関数などをexportした場合は次のように記述します。
import {変数名・関数名} from モジュールファイルのパス
importに続けて{ }の中にexportを付けて定義した変数名や関数名を記述して、モジュール化したファイルのパスを指定します。
例えば、「myname」「items」「myfunc」という変数・関数を読み込む場合は次のようになります。
import {myname, items, myfunc} from './mymodule.mjs';
myfunc();
console.log(myname, items);
また、例えば「myname」という名前を任意の名称に変更して読み込むことも可能です。
import {myname as myuser} from './mymodule.mjs';
console.log(myuser);
「as」に続けて任意の名称を設定することで、以降はその名前を利用できるようになるわけです。
次に、「default」を付与したモジュールを読み込む場合は次のように記述します。
import name from './mymodule.mjs'; name();
基本的にはこれまでと同じですが、{ }は付けずに任意の名称をimportに続けて設定します。
上記の例は無名関数に「default」を付与してexportしているので、「name」という名称で読み込んだら以降は「name()」と記述することで実行できます。
ちなみに、importを使ったファイルも拡張子は「.js」ではなく「.mjs」にしておくのを忘れないようにしましょう。
nodeコマンドで実行する方法
import / exportの基本を学んだところで、実際の実行方法についても合わせて見ていきましょう！
一般的なNode.jsの実行方法だと次のように記述しますよね？
$ node myimport.mjs
しかし、このままだとエラーになります。
冒頭でも少し解説しましたが、import / exportはまだ試験的な段階なので専用のオプションを付与する必要があるのです。
正しくは、「–experimental-modules」のオプションを付与して実行します。
$ node --experimental-modules myimport.mjs
これで正常に実行されます
注意点としてオプションはファイル名よりも先に設定しなければ機能しないという点を覚えておきましょう！
「require」との違い
この章では、従来から利用できる「require」との違いについて見ていきましょう！
主に、import / exportとの書き方の違いについて学んでいきます。
「require」と「import/export」を比較してみる
これまで、「export」を使って作成したモジュールを「import」で読み込んできました。
これに対して、「module.exports」または「exports」を使って作成したモジュールを「require」で読み込むのが従来の方法になります。
どちらも基本的には同じことが可能です。
例えば、オブジェクトをモジュール化する場合は次のようになります。
//従来の場合
module.exports = {name: '太郎', age: 30}
//今回の場合
export const obj = {name: '太郎', age: 30}
これらのモジュールに対して読み込む場合は次のとおりです！
//従来の場合
const obj = require('./mymodule.js');
//今回の場合
import {obj} from './mymodule.mjs';
あとはファイル名の拡張子や実行する時のオプション付与などに気を付けておく必要があるでしょう。
ちなみに、従来のmodule.exportsやrequireの基本的な使い方や活用方法については次の記事で詳しく解説しているので参考にしてみてください！
まとめ
今回は、Node.jsでモジュールの作成・読み込みを効率化するimport / exportについて学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・exportでは名前を付与する方法とdefaultで付与しない方法がある
・import / exportを使う場合はファイルの拡張子を「.mjs」にする
・nodeコマンドで実行する際はオプションを付与する
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
