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

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

 メニュー

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

モジュールのインポートとエクスポートについて書きます。その中でもデフォルトインポート(default import)とデフォルトエクスポート(default export)の記述について書きます。

事前準備

以下のファイルを用意します。

  • index.html
  • index.js
  • data.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>

モジュールのimport/export

モジュールのimport/exportには、以下の2種類があります。

  • 名前付きインポート(named import)/名前付きエクスポート(named export)
  • デフォルトインポート(default import)/デフォルトエクスポート(default export)

変数のdefault import/default export

ここでは、デフォルトインポートとデフォルトエクスポートの書き方を見ていきます。エクスポート側では、以下のように書きます。

export default 変数名;
/* data.js */
// エクスポート側
const name = "Alice";

function message(value){
  console.log(value)
}

export { message };
export default name;

export defaltは、1モジュールにつき1回しか使えません。以下のような記述はできません。

export default message;
export default name;

インポート側では、以下のように{}の外に変数名を書きます。

import 変数名 from "./xxx.js";
/* index.js */
// インポート側
import name from "./data.js";

document.body.textContent = name;

関数のdefault import/default export

/* data.js */
// エクスポート側
const name = "Alice";

function message(value){
  console.log(value)
}

export { name };
export default message;
/* index.js */
// インポート側
import message, { name } from "./data.js";

message(name);

関数宣言時のdefault import/default export

/* data.js */
// エクスポート側
export default function message(value){
  console.log(value)
}
/* index.js */
// インポート側
import message from "./data.js";

message("hello world");

関数の宣言時にdefault exportする場合は、関数名を省略できます。その場合、インポート側で名前を付けられます。

/* data.js */
// エクスポート側
export default function (value){
  console.log(value)
}
/* index.js */
// インポート側
import msg from "./data.js";

msg("hello world");

宣言時にexport defaultできるのは関数だけです。変数は、宣言時にexport defaultできません。変数の場合、以下のような書き方ができてしまうので、1モジュールにつき1回しか使えないということと整合性が取れなくなります。

export default const name = "Alice", name2 = "Bob";

まとめ

モジュールのインポートとエクスポートについて見ていきました。今回は、デフォルトインポート/エクスポートの記述について書きました。デフォルトインポート/エクスポートはデメリットがあるそうなので、自分でコードを書くときは、名前付きインポート/エクスポートを使う方が良いそうです。しかし、デフォルトインポート/エクスポートが出てくる場合は、使わざるを得ません。そのため、書き方を知っている必要はあります。

参考サイト