エクスポートとインポート

エクスポート(export)とインポート(import)ディレクティブにはいくつかの構文パターンがあります。

前章ではシンプルな使用例を見ました。ここではより多くの例を見ていきましょう。

宣言の前の export

変数、関数、クラスのいずれかであれば、その前に export を置くことで、エクスポート対象として任意の宣言にラベル付けすることができます。

例えば、ここではすべてのエクスポートは有効です:

// 配列のエクスポート
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 定数のエクスポート
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// クラスのエクスポート
export class User {
  constructor(name) {
    this.name = name;
  }
}

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // 末尾に ; はありません

宣言とは別に export する

別に export を記述することもできます。

ここでは、最初に宣言をし、その後エクスポートしています:

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // エクスポートされた変数のリスト

…あるいは、技術的には関数の上に export を置くこともできます。

import *

通常は、次のようにインポートするものの一覧を波括弧 import {...} に置きます。:

// 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

しかし、import の数が多い場合、import * as <obj> を使用してオブジェクトとしてすべてをインポートすることができます。例:

// 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

一見すると、記述量も少なく、非常にクールに思えます。そもそも、なぜインポートが必要なものを明示的にリストする必要があるのでしょう？

それにはいくつかの理由があります。

1. 何をインポートするかを明示的にリストすることで、より短い名前にできます: say.sayHi() の代わりに sayHi()。
2. 明示的なインポートの一覧はコード構造の見通しをよりよくします。: 何がどこで使われているか。それはコードをサポートし、リファクタリングをより簡単にします。

import “as”

異なる名前でインポートするために as