はじめに
前回の記事で、モジュール化するこによって名前空間を狭くすることができ衝突を防ぐという話をしました。
今回は、そのモジュールをファイル分割によって読み込むimport/exportについて考えていきます。
import/exportの種類
import/exportの方法にはいくつか種類があります。
大きく、default import/exportとnamed import/exportの2種類です。
今回はnamed import/exportについて見ていきます。
named 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
// named export
const greet = "hello";
export { greet };
そして、index.jsでdafault.jsでexportされた変数をimport(輸入する/取り込む)します。
そうするとdefault.jsで定義されたgreet変数を使うことができます。
index.js
// named import
import { greet } from './default.js';
console.log(greet);
変数以外にも関数も渡すことができます。
default.js
// named export
const greet = () => {
return "これは関数です";
}
export { greet };
index.js
// named import
import { greet } from './default.js';
console.log(greet());
named import / exportの特徴
複数まとめてimport
export時に複数まとめて渡すことができます。
default.js
// named export
const greet = "hello";
const hoge = "hoge";
export { greet, hoge };
index.js
// named import
import { greet, hoge } from './default.js';
console.log(greet, hoge);
宣言と同時にexport
宣言と同時にexportすることもできます。
import時には変わらずまとめて受け取ることができます。
default.js
// named export
export const greet = "hello";
const hoge = "hoge";
export { hoge };
index.js
// named import
import { greet, hoge } from './default.js';
console.log(greet, hoge);
default.js
// named export
export const greet = () => {
return "これは関数です";
}
index.js
// named import
import { greet } from './default.js';
console.log(greet());
エイリアスの設定
asを指定して別名を設定することができます。
default.js
// named export
const greet = "hello"
export { greet as hello };
index.js
// named import
import { hello } from './default.js';
console.log(hello);
export/import両方でエイリアスの設定
export時にasで別名を指定し、さらにimport時にもasで別名を指定することができます。
default.js
// named export
const greet = "hello"
export { greet as hello };
index.js
// named import
import { hello as h } from './default.js';
console.log(h);
