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

JavaScriptのロゴJavaScript
スポンサーリンク

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

今回のブログはこんな方におすすめ!
  • named import, named exportの構文について知りたい方
  • エイリアスについて知りたい方
  • ES moduleの構文について理解したい方
スポンサーリンク

named import, named exportの特徴

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

named import, named exportの特徴
  • 変数名をexport側で宣言する
  • 1つのモジュールから複数の値を、いくつでも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.answersub.objなどのプロパティ名を経由してアクセスできます。

まとめ

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

  • named export / importは、変数名をexport側で宣言する
  • named export / importは、1つのモジュールから複数の値を、いくつでもexportできる
  • named export / importは、importするときに{}を使用する
  • named exportの構文は、export <変数宣言>
  • named importの構文は、import { <変数名> } from “参照先パス”
  • エイリアスという機能を利用して、named exportsで公開されている変数名を、import元で変更できる
  • エイリアスを利用して、import先からnamed exportsで公開されている値のすべてを読み込むことができる

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

コメント

タイトルとURLをコピーしました