モジュールのインポートとエクスポートについて書きます。その中でもデフォルトインポート(default import)とデフォルトエクスポート(default export)の記述について書きます。
事前準備
以下のファイルを用意します。
- index.html
- index.js
- data.js
HTMLファイルの中身は以下とします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="module" src="./index.js"></script> <title>モジュールのimport/export</title> </head> <body> </body> </html>
モジュールのimport/export
モジュールのimport/exportには、以下の2種類があります。
- 名前付きインポート(named import)/名前付きエクスポート(named export)
- デフォルトインポート(default import)/デフォルトエクスポート(default export)
変数のdefault import/default export
ここでは、デフォルトインポートとデフォルトエクスポートの書き方を見ていきます。エクスポート側では、以下のように書きます。
export default 変数名;
/* data.js */ // エクスポート側 const name = "Alice"; function message(value){ console.log(value) } export { message }; export default name;
export defaltは、1モジュールにつき1回しか使えません。以下のような記述はできません。
export default message; export default name;
インポート側では、以下のように{}の外に変数名を書きます。
import 変数名 from "./xxx.js";
/* index.js */ // インポート側 import name from "./data.js"; document.body.textContent = name;
関数のdefault import/default export
/* data.js */ // エクスポート側 const name = "Alice"; function message(value){ console.log(value) } export { name }; export default message;
/* index.js */ // インポート側 import message, { name } from "./data.js"; message(name);
関数宣言時のdefault import/default export
/* data.js */ // エクスポート側 export default function message(value){ console.log(value) }
/* index.js */ // インポート側 import message from "./data.js"; message("hello world");
関数の宣言時にdefault exportする場合は、関数名を省略できます。その場合、インポート側で名前を付けられます。
/* data.js */ // エクスポート側 export default function (value){ console.log(value) }
/* index.js */ // インポート側 import msg from "./data.js"; msg("hello world");
宣言時にexport defaultできるのは関数だけです。変数は、宣言時にexport defaultできません。変数の場合、以下のような書き方ができてしまうので、1モジュールにつき1回しか使えないということと整合性が取れなくなります。
export default const name = "Alice", name2 = "Bob";
まとめ
モジュールのインポートとエクスポートについて見ていきました。今回は、デフォルトインポート/エクスポートの記述について書きました。デフォルトインポート/エクスポートはデメリットがあるそうなので、自分でコードを書くときは、名前付きインポート/エクスポートを使う方が良いそうです。しかし、デフォルトインポート/エクスポートが出てくる場合は、使わざるを得ません。そのため、書き方を知っている必要はあります。
