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とは違い、変数名をimport側で宣言します。named import, named exportでは、エイリアスを使用する場合を除いて、export側で宣言していましたよね。また、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 を使用するべき ということになります。

これには様々な理由があるのですが、自分が理解したものでいうと

という点が考えられると思います。

詳しくは、私より頭の良い方が書いてくれた記事があるため、そちらを参考にしていただけると幸いです。

Avoid Export Default

なぜ default export を使うべきではないのか？

まとめ

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

いかがでしたでしょうか？この記事を読んでいただいた方の、default import, default exportについての理解が少しでも深まれば幸いです。また、今回でES moduleについてのシリーズは終了になります。シリーズ続きで呼んでいただいた方はありがとうございました。

今後も、定期的に更新を続けてまいりますので、よろしくお願いいたします。