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

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

 メニュー

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

モジュールのインポートとエクスポートについて書きます。その中でも名前付きインポート(named import)/名前付きエクスポート(named 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)

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 };

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

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

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

namae as nで、namaeをnとしてインポートします。

エイリアスの例

  • index.html
  • index.js
  • data.js
  • data2.js

index.jsに2つのファイルをインポートする場合を考えます。data.jsとdata2.jsで同じ名前の変数をエクスポートしてもインポートするときにエイリアスを使うことで、変数名の衝突を避けられます。

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

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

export { name, message };
/* data2.js */
const name = "Bob";

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

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

まとめ

モジュールのインポートとエクスポートについて見ていきました。今回は、名前付きインポート/エクスポートとエイリアスの記述について書きました。組み合わせで複数の記述パターンがあるので、どのパターンで書かれていても読めるようにしておきたいです。

参考サイト