【JavaScript】モジュールのimport/export(1) - 元Webデザイナー兼コーダーの備忘録

モジュールのインポートとエクスポートについて書きます。その中でも名前付きインポート(named import)/名前付きエクスポート(named export)とエイリアスについて書きます。

事前準備
モジュールのimport/export
モジュールのエイリアス(別名):as
まとめ
参考サイト

事前準備

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

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)

named import/named export

ここでは、名前付きインポートと名前付きエクスポートの書き方を見ていきます。

エクスポート側では、{}の中に変数名を書きます。

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

export { name };

インポート側では、{}の中にエクスポート時の変数名を書きます。

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

document.body.textContent = name;

複数の変数をimport/export

{}の中に変数名を複数書きます。

/* data.js */
const name = "Alice";
const name2 = "Bob";

export { name, name2 };

{}の中にエクスポート時の変数名を複数書きます。

/* index.js */
import { name, name2 } from "./data.js";

document.body.textContent = name + name2;

宣言時に変数をexportする

export {}は、要りません。

/* data.js */
export const name = "Alice";
export const name2 = "Bob";

/* index.js */
import { name, name2 } from "./data.js";

document.body.textContent = name + name2;

関数をexportする

{}の中に関数名を書きます。

宣言時にexportする書き方とexport { xxx }を併記できます。

/* data.js */
export const name = "Alice";
export const name2 = "Bob";

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

export { message };

/* index.js */
import { name, name2, message } from "./data.js";

message("Hello world");
document.body.textContent = name + name2;

宣言時に関数をexportする

/* data.js */
export const name = "Alice";
export const name2 = "Bob";

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

モジュールのエイリアス(別名):as

export側のエイリアス

宣言時にexportする記法にエイリアスは使えません。

/* data.js */
const name = "Alice";
const name2 = "Bob";

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

export { name as namae, name2, message };

name as namaeで、nameをnamaeとしてエクスポートします。

/* index.js */
import { namae, name2, message } from "./data.js";

message("Hello world");
document.body.textContent = namae + name2;

インポート側は、namaeでインポートします。

import側のエイリアス

/* data.js */
const name = "Alice";
const name2 = "Bob";

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

export { name, name2, message };

/* index.js */
import { name as namae, name2, message } from "./data.js";

message("Hello world");
document.body.textContent = namae + name2;

インポート側でasを使い、別名を付けてインポートします。

export側とimport側の両方でエイリアスを付ける

/* data.js */
const name = "Alice";
const name2 = "Bob";

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

export { name as namae, name2, message };