ES module コトハジメ #2 named import, named export

今回からはES moduleの具体的な仕様や、記述方法について説明します。その中でも今回はnamed import, named exportにフォーカスして解説していきます。

named import, named exportの特徴

named import, named exportとは日本語では名前付きimportや、名前付きexportと呼ばれます。名前付きと言うなの通り、変数名をexport側で宣言するという特徴があります。また、1つのモジュールから複数の値を、いくつでもexportできるという特徴もあります。また、default exportと違って、importするときに｛｝を使用します。

named exportの構文

構文は、export const answer = 42のような、export <変数宣言>といった形式として記述します。

実際の例を見ていきましょう。

// answerという変数名で数値を公開
export const answer = 18;

// objという変数名でオブジェクトを公開
export const obj = {
  foo: 'bar'
};

named exportsで関数宣言を行う場合は、下記のように名前付きの関数定義を行う必要があります。もちろん、constなどの変数宣言を用いた関数式の形式でも有効に動きます。

// greetという変数名で関数を公開（関数宣言）
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

// byeという変数名で関数を公開（関数式）
export const bye = function(name) {
  console.log(`Bye ${name}!`);
};

また、上記の例ではexportする値ごとに、 export を記述していましたが、下記のコードのようにまとめて記述することもできます。

// answerという変数名で数値を公開
const answer = 42;

// objという変数名でオブジェクトを公開
const obj = {
  foo: 'bar'
};

// まとめてexportすることもできる
export { answer, obj };

named import

named exportsで公開されている値の読み込みには、どの変数名の値を読み込むかを指定する必要があります。

基本的には、import { <変数名> } from の形式で、分割代入を記述するときのような要領でimport先から読み込みたい値の変数名を単一あるいは複数列挙します。

上記のsub.jsからanswerだけを読み込みたい場合（単一読込）には、次のように記述します。

import { answer } from './sub.js';

複数読み込見したい場合は、カンマ区切りで記述します。

import { answer, obj, greet, bye } from './sub.js';

エイリアス

named exportsで公開されている変数名は、import元で変更することもできます。この機能をエイリアス（別名）と呼びます。

次の例ではsub.jsから公開されている変数answerを、import元ではansという変数名に付け直しています。

import { answer as ans } from './sub.js';

エイリアスをつけたimportとそのままのimportが混在することもあります。

import { answer as ans, obj } from './sub.js';

エイリアスはexportするときに行うこともできます。

// answerという変数名で数値を公開
const answer = 18;

// objという変数名でオブジェクトを公開
const obj = {
  foo: 'bar'
};

export { answer as ans, obj };

// importする側

import { ans, obj } from "./sub.js";

exportでエイリアスをつけつつ、importでエイリアスを指定することもできます。↓このように2段階でエイリアスを指定することができます。

// importする側

import { ans as myAnswer, obj } from "./sub.js";

エイリアスを使用することで、import先からnamed exportsで公開されている値のすべてを読み込むことができます。次のような記法で、公開されている値のすべてを、任意の名前空間内に配置します。

import * as sub from './sub.js';
console.log(sub.answer); // 18

この場合、sub.jsのnamed exportsのすべてが名前空間subに展開されており、それぞれsub.answerやsub.objなどのプロパティ名を経由してアクセスできます。

まとめ

今回は、named import, named exportについて説明しました。ポイントをまとめると以下のとおりです。

named import, named exportはとても良く使用するES moduleの構文です。複数の値をexportできるため、使用機会が多くあるのではないでしょうか？呼んでいただいた方の参考に少しでもなれば幸いです。