ES6（モジュール） - 駆け足エンジニアの記録

はじめに

近年ではjavascriptのコードは肥大化して行っています。（javascriptでできることが増えたという嬉しさ）そのためモジュールという仕組みを用いて、コードを整理、分割することは現代のjavascriptでは必須です。
module・・・ソースコードを機能毎に分割し、メンテナンスしやすくする仕組み
ではモジュールの使い方、また注意点を見ていきましょう。

import,export

import(輸入する)、export(輸出する)からも推測できると思いますが、
import・・・モジュールの読み込み
export・・・モジュールの読み取り

以下コードで確認しましょう　　　　
2つのファイルmoduleA.js(import)、moduleB.js(export)があったと想定してください。

//moduleB.js
export let publicVal = 0;
export function publicFn() {
  console.log("publucFn called");
}

//moduleA.js
import { publicVal, publicFn } from "./moduleB.js";
console.log(publicVal); //0
publicFn(); //publicFn called

ここでhtmlの設定に気をつけなければなりません。importしているファイルがmoduleA.jsなので、htmlに読み込むものはjavascriptファイルはmoduleA.jsです。またtypeをmoduleにする必要があります。以下のとおりです。

 <script type="module" src="moduleA.js"></script>

以上が基本的なimport、exportの使い方になります。
以下ユースケースを見ていきましょう。

importの際、名前を変更したい

//moduleB.js
export let publicVal = 0;
export function publicFn() {
  console.log("publucFn called");
}

//moduleA.js
import { publicVal as val, publicFn as fn } from "./moduleB.js";
console.log(val); //0
fn(); //publicFn called

このようにasを利用することで、モジュール配下の個々のメンバーに別名を付与することが可能です。モジュール間で名前の衝突があった場合などに利用します。

export defaultについて

//moduleB.js
export default 1; //変数名がない

//moduleA.js
import defaultVal from "./moduleB.js";
console.log(defaultVal);//1

モジュールに含まれる要素が一つであれば、デフォルトのエクスポートを宣言することができます。
export時、変数名がないためexport時は(波括弧なしで)変数名を好きなようにつけられます。

exportするファイルから全てをimportする

export default 1;
export let publicVal = 0;
export function publicFn() {
  console.log("publucFn called");
}

import * as moduleB from "./moduleB.js"; //アスタリスクでmoduleBから全ての変数をimport
console.log(moduleB.default); //export defaultで定義された変数はdefaultでアクセス
console.log(moduleB.publicVal);
moduleB.publicFn();

*でモジュールは以下の全てのメンバーをインポートできます。その場合、asによってモジュールの別名を指定しなければなりません。あとはオブジェクトのようにmoduleBをドットつなぎで変数や関数にアクセスできます。

終わりに

ここまでがモジュール(import,export)になります。本番環境やreactなどを触っているとimport,exportは必ず使うことになるので、モジュールで気になることがあったらこの記事を見直してもらえると嬉しいです。（随時この記事も更新していきます！）