なっく日報

技術やら生活やらのメモ

ES6でexportとexport defaultをどう使い分ければいいの?

いきなり結論

基本的にはexport defaultを使うのが良さそうです。

※ named export を使う方がいいかもという考えに変わりました。詳しくは最下部の追記をご参照ください

↓に

http://www.2ality.com/2014/09/es6-modules-final.html#default_exports_are_favored

Default exports are favored

と書いてますね。

理由

importする側で楽できるから。

// めんどい
import * as utils from './utils';
import { method1, method2 } from './utils';

// こっちのほうがいい
import utils from './utils';

exports.method1 = function() {}はどうするの?

迷ったのが、Node.jsでexports.method1 = function() {} みたいに書いていたパターンでした。

素直に書くなら

export function method1() {
}

export function method2() {
}

なんですが、これだと利用する側は

import * as utils from './utils';
import { method1, method2 } from './utils';

になって、ちょっとめんどい。

現段階では、↓のどっちかの書き方が正解かなと考えてます。 → 上記のように 素直に export function する、どうしてもクラスでまとめたければstatic関数、になりました

// 追記、これはアンチパターン
// export default {
//   method1() {},
//   method2() {},
// }

// それか、これ。
export default class Utils {
  static method1() {}
  static method2() {}
}

// でもこれやり始めると全部クラス定義しないと気が済まなくなるかも・・・

まだES6勉強中なので、ご意見あればいただければ幸いです。

※ 追記1

によると、export default でオブジェクトをエクスポートするのはアンチパターンとのこと。 理由は静的解析による恩恵を受けられなくなるからだそう(Tree-Shaking等)

※ 追記2

↓ Tree-Shaking観点でよく検証されている記事

qiita.com

※ 追記3

TypeScriptの場合は default export は避けた方がよい (リファクタリングした場合もちゃんと検知できる等名前付きexportの方がメリットが大きい)

export default を避けましょうと言っている記事 ↓ .

Avoid Export Default - TypeScript Deep Dive

JavaScriptでも同様にexport defaultは使わない方がよいとする記事 ↓

gfx.hatenablog.com

engineering.linecorp.com

※ 追記4

良い議論があるので貼っておく

blog.uhy.ooo

zenn.dev