JavaScript モジュール

モジュール（Modules）

JavaScript モジュールはコードを独立したファイルに分解することができます。

これにより、コードベースのメンテナンスが容易になります。

モジュールは import ステートメントから外部ファイルにインポートされる。

モジュールは <script> タグ内の type="module"。

インスタンス

<script type="module">
import message from "./message.js";
</script>

自分で試してみてください

エクスポート

を含む関数または変数のモジュールは外部ファイルのどこにでも保存できます。

エクスポートには二種類あります：名前付きエクスポートおよびデフォルトエクスポート。

名前付きエクスポート（Named Exports）

让我们创建一个名为 person.js 的文件，并在其中填充我们要导出的内容。

名前付きエクスポートを作成する方法は二種類あります。一つは逐次インライン作成、もう一つはファイルの最下部で一度に全て作成です。

逐次インライン作成：

person.js

export const name = "Bill";
export const age = 19;

ファイルの最下部で一度に作成：

person.js

const name = "Bill";
const age = 19;
export {name, age};

デフォルトエクスポート（Default Exports）

让我们创建另一个名为 message.js 的文件，并用其演示默认导出。

ファイルにはデフォルトのエクスポートが1つしかありません。

インスタンス

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};
export default message;

インポート

ファイルにモジュールをインポートする方法は、それが名前付きのエクスポートであるかデフォルトのエクスポートであるかによって異なります。

名前付きのエクスポートは大括号で構成されています。デフォルトのエクスポートはこのようにいません。

名前付きのエクスポートからインポート

ファイル person.js から名前付きのエクスポートをインポート：

import { name, age } from "./person.js";

自分で試してみてください

デフォルトのエクスポートからインポート

ファイル message.js からデフォルトのエクスポートをインポート：

import message from "./message.js";

自分で試してみてください

注意

モジュールは HTTP(s) プロトコルにのみ適用されます。

file:// プロトコルで開かれたウェブページでは、インポート/エクスポートを使用することができません。