ES module コトハジメ #3 default import, default export
今回は前回のnamed import, default exportの内容に引き続き、2種類あるES moduleの記述方法の2つ目の記法であるdefault import, default exportについて解説します。
- default import, default exportの構文について知りたい方
- default import, default exportとnamed import, named exportどちらを使用するべきか悩んでいる方
- ES moduleの構文について理解したい方
default import, default exportの特徴
default import, default exportでは、named import, named exportとは違い、変数名をimport側で宣言します。named import, named exportでは、エイリアスを使用する場合を除いて、export側で宣言していましたよね。また、default exportsで公開できる値は1つのモジュール(ファイル)につき1つだけになります。そして、default exportsで公開した値は{}を使用せず、むき出しで記述します。
- 変数名をimport側で宣言する
- default exportsで公開できる値は1つのモジュール(ファイル)につき1つだけである
- default exportsで公開した値は{}を使用せず、むき出しで記述する
default exportの構文
default exportはexport default <式>
の形式で記述します。まず、最初に例を見てください。
export default function(name) {
console.log(`Hello, ${name}!`);
}
上記のように、基本的には、default exportは名前をつけずにexportします。これは、default exportの特徴として、変数名ではなく、評価された値自体をexportしているためです。import時に変数名を宣言するという仕様は、この評価された値自体をexportするためです。この仕様が存在するため、下記のように記述することもできます。
export default "foo";
このコードは foo
という文字列をexport defaultで公開しています。
また、あえてexport default <式>
の形でなく、export default <名前>
の形で記述するとすると、下記のように記述できます。
function greet (name) {
console.log(`Hello, ${name}!`);
}
export default greet;
default exportsのパターン
ここでは先程紹介しきれなかった、default exportを使ったコード例を紹介します。default exportのexport文では文字列や数値など直接の値、class式、{}や[]などのリテラルも指定して公開できます。
// 数値型の公開
export default 18;
// class式の公開
export default class {
// 省略
}
// オブジェクト型の公開
export default {
// 省略
}
また、このような書き方はNGという例を紹介します。それは const
などを使用して変数や名前付き関数をexportすることです。
export default const num = 18;
export default const greet = (name) => {
console.log(`Hello, ${name}!`);
}
上記のようなコードはエラーになります。
default importの構文
default exportsで公開された値に対するimport文は簡単で、import <変数名> from
の形式で記述することができます。また、変数名は読み込み側で任意に指定できるところは注意が必要です。
import greet from './greet.js';
greet('UI'); // 結果:Hello, UI!
上記のコードでは、 greet.js
でexportされた関数を greet
という名前でimportしています。そのため、例えば、下記のようなコードでも同じことができます。
import hello from './greet.js';
hello('UI');
default exportsとnamed exportsの同時使用
mport元でnamed importの書式を用いた場合にはdefaultという名前から、default exportsで公開されている値にアクセスできます。
次のように、このdefaultに対してasを使ってリネームする文法を用いれば、ほかのnamed exportsと一緒にimportできます(defaultは予約語なのでリネームしないといけません)。
import { default as sub, obj } from './sub.js';
また、次の書式でも同じことができます。
import sub, { obj } from './sub.js';
上記2つのコードは、default exportしたsub
関数とnamed exportしたobj
を同時にimportしています。さらに応用として、エイリアスを使用することで、 importsと名前空間付きのimportも同時に行うことができます。
import sub, * as subs from './sub.js';
もちろんこれらの記述を別々に行うこともできます。↓は上記の例と同じことです。
import sub from './sub.js';
import { obj } from './sub.js'
default exportは基本的に使用するべきではないという話
最後にnamed export / import とdefault export / import 野どちらを使用するべきなのかという話をしたいと思います。
結論から言うと、named export / import を使用するべき ということになります。
これには様々な理由があるのですが、自分が理解したものでいうと
という点が考えられると思います。
詳しくは、私より頭の良い方が書いてくれた記事があるため、そちらを参考にしていただけると幸いです。
なぜ default export を使うべきではないのか?
まとめ
今回は、default import, default exportについて説明しました。ポイントをまとめると以下のとおりです。
いかがでしたでしょうか?この記事を読んでいただいた方の、default import, default exportについての理解が少しでも深まれば幸いです。また、今回でES moduleについてのシリーズは終了になります。シリーズ続きで呼んでいただいた方はありがとうございました。
今後も、定期的に更新を続けてまいりますので、よろしくお願いいたします。