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

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

【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の中で何かしらの処理を実行するような記述があると、インポートした時点でその処理が実行されます。例えば、ログを送ったり、アクセス解析したりといった処理が考えられます。インポートした時点で何かしらの処理をさせたい場合は、このように記述すると良いです。しかし、中身がよく分からないものをインポートする場合、この書き方はよろしくないでしょう。

まとめ

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

参考サイト

» HTML入門のまとめはこちらです。