元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

【JavaScript】モジュールのimport/export(3)

今回は、モジュールのインポートとエクスポートの特殊な書き方について見ていきます。具体的には、*(アスタリスク)を使った記述と再エクスポート、副作用のあるインポートの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の中で何かしらの処理を実行するような記述があると、インポートした時点でその処理が実行されます。例えば、ログを送ったり、アクセス解析したりといった処理が考えられます。インポートした時点で何かしらの処理をさせたい場合は、このように記述すると良いです。しかし、中身がよく分からないものをインポートする場合、この書き方はよろしくないでしょう。

まとめ

モジュールのインポートとエクスポートの踏み込んだ書き方について見ていきました。全て覚えるのは難しいので、このような書き方があると頭の片隅に置いておくと良いです。

参考サイト