今回は、モジュールのインポートとエクスポートの特殊な書き方について見ていきます。具体的には、*(アスタリスク)を使った記述と再エクスポート、副作用のあるインポートの3つについてです。
事前準備
以下のファイルを用意します。
- index.html
- index.js
- person.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>
*でまとめてインポートする
2つの変数をインポート/エクスポートする記述は以下です。
/* person.js */ // エクスポート側 const name = "Alice"; const name2 = "Bob"; export { name, name2 };
// index.js // インポート側 import { name, name2 } from "./person.js"; document.body.textContent = name + name2;
2つの変数を*
でまとめてインポートする記述は以下です。
// index.js // インポート側 import * as person from "./person.js"; document.body.textContent = person.name + person.name2;
*の書き方は、関数やクラスでも使えるそうです。
再エクスポート
以下は、今回のディレクトリの構成です。
プロジェクト名/
├ person/
│ ├ index.js
│ └ person.js
├ index.html
└ index.js
<!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>
名前付きエクスポートを全て再エクスポートする
/* ./person/person.js */ const name = "Alice"; const name2 = "Bob"; export { name, name2 };
./person/index.jsで、全てを再エクスポートします。
/* ./person/index.js */ export * from "./person.js"
/* index.js */ import * as person from "./person/index.js"; document.body.textContent = person.name + person.name2;
名前付きエクスポートを全て再エクスポートし、エイリアスを付ける
再エクスポート時にエイリアスを付けることができます。
/* ./person/person.js */ const name = "Alice"; const name2 = "Bob"; export { name, name2 };
/* ./person/index.js */ export * as person from "./person.js"
/* index.js */ import * as person from "./person/index.js"; document.body.textContent = person.person.name + person.person.name2;
名前付きエクスポートしたもののうちどれかを選んで再エクスポートする
./person/person.jsでエクスポートしたnameとname2のうち、nameだけをエクスポートします。
/* ./person/person.js */ const name = "Alice"; const name2 = "Bob"; export { name, name2 };
/* ./person/index.js */ export { name } from "./person.js"
/* index.js */ import * as person from "./person/index.js"; document.body.textContent = person.name;
名前付きエクスポートしたもののうちどれかを選んで再エクスポートし、エイリアスを付ける
./person/person.jsでエクスポートしたnameとname2のうち、nameだけをエクスポートします。さらに、nameにaliceという別名を付けます。
/* ./person/person.js */ const name = "Alice"; const name2 = "Bob"; export { name, name2 };
/* ./person/index.js */ export { name as alice } from "./person.js"
/* index.js */ import * as person from "./person/index.js"; document.body.textContent = person.alice;
再エクスポート時に複数のファイルをインポートすることができます。そうするとHTML側で1つのJavaScriptファイルを読み込むだけで済むという利点があります。
この他に、再エクスポート時の書き方が3つあります。
- デフォルトエクスポートをそのまま再エクスポートする
- デフォルトエクスポートを名前付きエクスポートにして再エクスポートする
- 名前付きエクスポートをデフォルトエクスポートにして再エクスポートする
副作用のあるインポート
- index.js
- side-effect.js
/* index.js */ import "./side-effect.js";
/* side-effect.js */ console.log("Hello world");
index.jsでは、モジュール自体をインポートします。side-effect.jsの中で何かしらの処理を実行するような記述があると、インポートした時点でその処理が実行されます。例えば、ログを送ったり、アクセス解析したりといった処理が考えられます。インポートした時点で何かしらの処理をさせたい場合は、このように記述すると良いです。しかし、中身がよく分からないものをインポートする場合、この書き方はよろしくないでしょう。
まとめ
モジュールのインポートとエクスポートの踏み込んだ書き方について見ていきました。全て覚えるのは難しいので、このような書き方があると頭の片隅に置いておくと良いです。