概要
...【JavaScript】ECMAScriptモジュール②の続きです。
...【JavaScript】ECMAScriptモジュール①もあります。
JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。
JavaScript入門一覧に他の記事をまとめています。
ECMAScriptモジュール(その他構文)
これまで記載したECMAScriptモジュールについて、その他の構文についても記載する。
※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください
動作環境情報はコチラ
【環境】
PC：Mac
エディタ：Visual Studio Code
プラグイン：Live ServerというVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome
【登場ファイル】
export.js：エクスポートに関するコードを記述したエクスポート側のファイル
import.js：インポートに関するコードを記述したインポート側のファイル
index.html：「import.js」を使用、および開発者コンソールで確認する際に開くファイル
【★ポイント】
index.htmlのheadタグ内に<script src="import.js" type="module"></script>のように記述する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript入門</title>
<script src="import.js" type="module"></script>
</head>
<body>
</body>
</html>
※最終的に以下のような構成になる。
(任意の場所に「js」フォルダを作成および、フォルダに上記3ファイルを作成・配置する)
再エクスポート
- 別のモジュールをインポートし、再度自身のファイル内でエクスポートすること。
- エクスポートされた複数のモジュールをまとめたモジュールを作成する際などに使用する。
- 再エクスポート方法は
export モジュール名 from モジュールパス;と記載する。
export.js
// 名前つきエクスポートを再エクスポート
export { foo, bar } from './export1.js';
// すべての名前つきエクスポートを再エクスポート
export * from './export1.js';
// ..などその他にも様々なパターンで活用可能
すべてをインポート
- すべての名前つきエクスポートをまとめてインポートする方法
- モジュールごとの
名前空間となるオブジェクトをimport as構文で宣言する。 - 変数や関数にアクセスす際は名前空間オブジェクトのプロパティを使用する。
-
defaultという固有名を使用するとデフォルトエクスポートにもアクセス可能
export.js
// wordという変数を定義
const word = 'word';
// helloという関数を定義
function hello() {
console.log('Hello JavaScript');
};
// デフォルトエクスポート用の関数を定義
export default function defaultFunc() {
console.log('defaultFunc');
}
// 「word」「hello」を名前つきエクスポート
export { word, hello };
import.js
// 名前空間となるオブジェクトをimport as構文で宣言
import * as exportModule from './export.js';
console.log(exportModule.word); // => word
exportModule.hello(); // => Hello JavaScript
exportModule.default(); // => defaultFunc
副作用のためのインポート
- 単にモジュールのコードを実行し、変数や値など参照する必要のない場合などに使用(何かしらのセットアップするなど)
-
import モジュールパス;でモジュールファイル全体をインポートする。
export.js
console.log('毎回このメッセージを表示する!');
import.js
// import モジュールパス;で副作用のためのインポート
import './export.js' // => 読み込んだ時点で「毎回このメッセージを表示する!」が表示される