JavaScript モジュール機能

モジュールの概要

JavaScript にはモジュール機能がある。モジュール機能を使うと、複数のファイルに分割したコードを、モジュールとして読み込むことができる。

モジュール機能を使うと、グローバルスコープを汚染することなく、コードを分割することができる。

モジュールを書くには、 export と import を使う。

export を使うと、モジュールの外から変数や関数、クラスにアクセスできるようになります。

export function sum(x, y) {
  return x + y;
}

export const pi = 3.141592;

export class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

ファイルの中で1回だけ、 export default を使うことができます。これを使うと、インポートする側で明示的に import する必要がなくなります(詳しくは下へ)。

export default function sum(x, y) {
  return x + y;
}

export default class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

import は、モジュールを読み込むためのキーワードです。 import は、 export と対にして使います。

名前付きエクスポートしたものをインポートするには、 import に {} を使います。 {} の中に、インポートしたいものの名前を書きます。

import { sum, pi } from './math';

import * as math from './math';

import { sum as add, pi } from './math';

import sum from './math';

デフォルトエクスポートしたものをインポートするには、 import に {} を使いません。

import sum from './math';

import Point from './math';

export したものを、別のファイルから export することもできます。

export { sum } from './math';

export * from './math';

モジュールを読み込むには、 <script> タグの src 属性に、モジュールのパスを指定します。

<script type="module" src="./main.js"></script>

<script> タグの type 属性に module を指定することで、モジュールとして読み込めます。