exportとimportの使い方 | ES6モジュール | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

ES6モジュールとは？

ES6モジュール（ES Modules：ESM）は、JavaScriptのコードを複数のファイルに分割し、必要な機能だけを読み込める仕組みです。

大規模なプログラムでは、すべてのコードを1つのファイルに書くと管理が難しくなります。ES6モジュールを利用すると、機能ごとにファイルを分けて開発できるため、コードの再利用性や保守性が大きく向上します。

モジュール間で機能を共有するには、exportで公開し、importで読み込みます。

exportとimportの基本

ES6モジュールでは、次の2つのキーワードを使用します。

つまり、exportが「公開」、importが「利用」の役割を担当します。

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

複数の関数や変数を公開したい場合は、名前付きエクスポートを使用します。

exportする側

// math.js

export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

export const PI = 3.141592653589793;

importする側

// main.js

import { add, subtract, PI } from "./math.js";

console.log(add(10, 5));
console.log(subtract(10, 5));
console.log(PI);

{ }の中に読み込みたい名前を指定します。必要なものだけを読み込めるのが特徴です。

exportをまとめて記述する方法

関数や変数を定義したあとで、一括してexportすることもできます。

function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

const PI = 3.141592653589793;

export { add, subtract, PI };

プロジェクトによってはこちらの書き方が採用されることも多くあります。

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

1つのモジュールで代表となる機能を公開する場合は、export defaultを使用します。

exportする側

// greet.js

export default function greet(name) {
    return `こんにちは、${name}さん`;
}

importする側

// main.js

import greet from "./greet.js";

console.log(greet("山田"));

デフォルトエクスポートは、波括弧{ }を付けずに読み込みます。また、読み込む際の名前は自由に変更できます。

import hello from "./greet.js";

console.log(hello("田中"));

このように、greetではなくhelloという名前でも利用できます。

名前付きエクスポートとデフォルトエクスポートの違い

名前を変更して読み込む（as）

名前付きエクスポートは、asを使うことで別名を付けて読み込めます。

import { add as sum } from "./math.js";

console.log(sum(3, 5));

ライブラリ名が重複する場合などによく利用されます。

すべての機能をまとめて読み込む

モジュール内のすべてをまとめて読み込みたい場合は、*を使用します。

import * as math from "./math.js";

console.log(math.add(5, 3));
console.log(math.subtract(5, 3));
console.log(math.PI);

この場合は、mathオブジェクトを通して各機能へアクセスします。

HTMLからES6モジュールを読み込む

ブラウザでES6モジュールを利用する場合は、<script>タグにtype="module"を指定します。

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

type="module"を付けないと、importやexportは使用できません。

ES6モジュールを使うメリット

まとめ

• ES6モジュールは、JavaScriptのコードを複数ファイルに分割する仕組みである。
• exportで機能を公開し、importで利用する。
• 名前付きエクスポートは複数の機能を公開できる。
• デフォルトエクスポートは1つの代表的な機能を公開する。
• type="module"を指定するとブラウザでもES6モジュールを利用できる。
• モジュール化により、再利用性・保守性・可読性が大きく向上する。