概要
...【JavaScript】ECMAScriptモジュール①の続きです。
...【JavaScript】ECMAScriptモジュール③もあります。
JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。
JavaScript入門一覧に他の記事をまとめています。
デフォルトエクスポート/インポート
デフォルトエクスポート/インポートについてそれぞれ記載していく。
※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください
動作環境情報はコチラ
【環境】
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ファイルを作成・配置する)
デフォルトエクスポート
- モジュールごとに1つしかエクスポートができない。(名前つきエクスポートは複数可能)
- エクスポート方法は、
export default エクスポート対象;と記載する。
export.js
// wordという変数を定義
const word = 'word';
// helloという関数を定義
function hello() {
console.log('Hello JavaScript');
};
// export default エクスポート対象; でエクスポート
export default word;
★Tips①
-
export文を宣言の前に付けると、宣言とデフォルトエクスポートが同時に可能となる。 - このTipsは
関数やクラスのみに有効。(変数はカンマ区切りで複数定義可能なため) - また、この時関数名やクラス名を省略可能。
export default function hello() { "...処理" };
// 関数名を省略した場合
export default function () { "...処理" };
// 変数は使用できない
export default const tmp_var; // =>エラーとなる
デフォルトインポート
- 指定したモジュールのデフォルトエクスポートに名前をつけてインポートする。
- インポート方法は
import インポート名 from モジュールパスと記載する。
export.js
// wordという変数を定義
const word = 'word';
// helloという関数を定義
function hello() {
console.log('Hello JavaScript');
};
// export default エクスポート対象; でエクスポート
export default word;
import.js
// import インポート名 from モジュールパスでインポート
import word from './export.js';
console.log(word); // => word
★Tips②
- デフォルトエクスポートは、
defaultという固有の名前による名前つきエクスポートと同じものである。 - そのため、名前つきエクスポートで
as defaultとエイリアスをつけることでデフォルトエクスポートすることが可能。 - また、名前つきインポートでは
defaultという名前を指定することで、デフォルトインポートすることが可能。
export.js
// wordという変数を定義
const word = 'word';
// 名前つきエクスポートでas defaultとすることでデフォルトエクスポートとなった
export { word as default };
import.js
// defaultは予約語のため、名前つきインポートでas構文を使用しエイリアスを付けることでインポート可能
import { default as defaultWord } from './export.js';
console.log(defaultWord); // => word
★Tips③
- 名前つきインポートとデフォルトインポートの構文は同時に記述することも可能。
export.js
// wordという名前つきエクスポート用変数を定義
const word = 'word';
// 関数defaultFuncをデフォルトエクスポート用に定義
export default defaultFunc () {
console.log('defaultFunc!');
}
// 「word」を名前つきエクスポート
export { word };
import.js
// デフォルトエクスポートを行った「defaultFunc」、名前つきエクスポートを行った「word」をインポート
import defaultFunc, { word } from './export.js';
console.log(word); // => word
defaultFunc(); // => defaultFunc!