はじめに

前回の記事で、モジュール化するこによって名前空間を狭くすることができ衝突を防ぐという話をしました。
今回は、そのモジュールをファイル分割によって読み込むimport/exportについて考えていきます。

import/exportの種類

import/exportの方法にはいくつか種類があります。
大きく、default import/exportとnamed import/exportの2種類です。
今回はdefault import/exportについて見ていきます。

default import / export

まず、事前準備としてscriptタグにtype="module"を設定して、モジュールとして扱えるように設定します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>app</title>
  </head>
  <body>
    <script src="index.js" type="module"></script>
  </body>
</html>

次に同じ階層にindex.jsとdefault.jsを作成します。default.jsにまずexportできるようにコードを書いていきます。

greet変数を定義して、それを別ファイルで使えるようにexport(出力/書き出し)をしています。

default.js

// default export
const greet = "hello";
export default greet;

そして、index.jsでdafault.jsでexportされた変数をimport(輸入する/取り込む)します。
そうするとdefault.jsで定義されたgreet変数を使うことができます。

index.js

// default import
import greet from './default.js';
console.log(greet);

変数以外にも関数も渡すことができます。

default.js

// default export
const greet = () => {
  return "これは関数です";
}
export default greet;

index.js

// default import
import greet from './default.js';
console.log(greet());

これが基本的な使い方です。

default import / export の特徴

基本的な使い方を理解できたところで特徴について見ていきます。

1モジュールにつき1度しか定義できない。

1モジュール(ファイル)につき一度しか定義できません。 そのため、この使い方はA module cannot have multiple default exports.エラーが出てしまいます。

default.js

// default export
const greet = () => {
  return "これは関数です";
}
export default greet;

const hoge = "hoge";

export default hoge;

importの方法

importする際には、{}ではなくそのまま指定する必要があります。

index.js

import greet from "./default.js";

default import / exportの内部的な仕組み

実際には変数や関数が渡されているのではなく、評価された値が入っています。
そのため、直接値を渡していることと同じ動きになっています。

default.js

// default export
const greet = "hello";
export default greet;

default.js

// default export
export default "hello";

index.js

// default import
import greet from './default.js';
console.log(greet);