JavaScript モジュール

— y2sunlight 2021-06-07

モジュールの構文

JavaScriptではES2015^*2015からモジュールがサポートされました。近年では、モジュールはサーバーサイド、クライアントサイド（ブラウザ）のいずれでも利用できます。

export

モジュールは一つのファイルとして定義され、外部からアクセスできるメンバ（クラス、関数、変数、定数など）にはexportキーワードを付与します。以下はStudentクラスの例です。

export class School {
    constructor(name) {
        // プロパティの定義
        this.name = name;
    }
}

export class Student {

    // コンストラクタの定義
    constructor(name) {
        // プロパティの定義
        this.name = name;
    }

    // メソッドの定義
    greeting() {
        console.log(`I am ${this.name}.`);
    }
}

export構文

export let name1, name2, …, nameN;  // 変数（var, const も）
export function functionName(){...} // 関数
export class ClassName {...}        // クラス

TODO 説明

import

モジュール内のメンバをインポートするにはimportキーワードを使用します。

import { School, Student } from './school.js'
var abc_school = new School('ABC School');
var suzuki = new Student('Suzuki');
suzuki.greeting(); // I am Suzuki.

import構文

import { name, ･･･ } from module
    name: インポートする要素
    module: モジュール

TODO 説明
モジュール名はNode.jsなどのサーバーサイドJavaでは拡張子を省略したパスを、ChromeなどのクライアントサイドJavaでは拡張子を指定したパス名を指定します。

様々な構文

importしたメンバの別名

モジュール内のimport要素に対して個々に別名をつけることができます。

import {School as MySchool, Student as MyStudent} from './school.js'
var abc_school= new MySchool('ABC School');
var suzuki= new MyStudent('Suzuki');

ワイルドカードによるimport

アスタリスク( * )を使用してモジュール内のすべての要素をインポートすることができます。但しこの場合、モジュールに対して別名を付与します。

import * as school from './school.js'
var abc_school= new school.School('ABC School');
var suzuki= new school.Student('suzuki');

デフォルトのexport

エクスポートする要素が１つのモジュールの場合、デフォルトのexport要素を宣言することができます。

export default class {
    constructor(name) {
        // プロパティの定義
        this.name = name;
    }
}

この様にデフォルトのエクスポートでは要素に名前（この例の場合はクラス名）をつける必要はありません。インポートは以下の様にして行います。

import School from './school.js'
var abc_school= new School('ABC School');

クライアントサイドでの利用

モジュールを HTMLに適用するには、スクリプト要素の中でtype=“module” を使用します。import と export 文は、モジュールの中でのみ使うことができます。通常のスクリプト（type=“javascript”）の中では使えません。

以下は、上述のStudentクラスをインポートするChromeでの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="module">
  import { Student } from './student.js'
  var suzuki = new Student('suzuki');
  suzuki.greeting(); // I am suzuki.
  </script>
</body>
</html>

importキーワードの中のモジュール名は、ChromeなどのクライアントサイドJavaでは拡張子を指定したパス名を指定します。

CORSに関する注意

CORS(Cross-Origin Resource Sharing)とは、直訳すると「オリジン間リソース共有」となり、コルスとも呼ばれます。オリジンとはドメインと似ていますが、プロトコルとポート番号を含んだ概念です。

y2sunlight.com — ドメイン
http://y2sunlight.com:80 — オリジン

つまり、CORSとは異なったオリジン間でリソースを共有する仕組みのことで、CORSを使わない場合は、セキュリティの観点から同一オリジンポリシーに従います。例えばXMLHttpRequestはその代表例です。

CORSはモジュールのインポートに対しても有効になります。従って、モジュールを使ったJavaScriptをローカルでテストしようとするときは注意してください。ローカルから HTML ファイルを読み込もうとすると、JavaScript モジュールのセキュリティ要件のために、CORS エラーが発生します。テストはサーバー経由で行う必要があります。

グローバルスコープに関する注意

モジュールの機能は単独のスクリプトのスコープに対してインポートされます。インポートされた機能はインポートしたスクリプトの内部からしかアクセスできません。即ち、インポートされた機能はグローバルスコープから利用することはできません。

また、モジュールの場合、自動的に Strict モードになり、var命令の省略は禁止されます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="module" src="main.js"></script>
  <script>
    // local_schoolはモジュールの内部からしかアクセスできない
    console.log(local_school.name);    // NG
    foo_school = new School('Foo School')  //NG
  </script>
</body>
</html>

import { School } from './school.js'

var local_school = new School('Local School');
console.log(local_school.name);  // OK

// モジュール内ではグローバルスコープを持つ変数が作成できない。
// global_school = new School('Global School');
// console.log(global_school.name); NG

export class School {
    constructor(name) {
        // プロパティの定義
        this.name = name;
    }
}

目次