named exportとdefault exportの違いを理解する

動機

Reactで開発していると、named exportsとdefault exportsのワードが出てきて、なんとなくしか把握できていなかったため、簡単にまとめてみました。

そもそもexportって？

あるモジュールの関数、オブジェクト、プリミティブ値を、他のモジュールで使用できるようにするための構文。

使用する側は、import文を用いて使用できるようになる。

named export（名前付きエクスポート）とは

特徴

• １つのモジュール内に複数exportできる
• 呼び出し側では、export時の名前でimportしなければならない
• エディタの自動補完が効く

export const sampleFn = () => {
  return <h1>サンプル</h1>
}

export const testFn = () => {
  return <h1>テスト</h1>
}

呼び出し方

{}内で、欲しい値を指定する

import {sampleFn, testFn} from './Sample'
import {sampleFn} from './Sample'

default exports（デフォルトエクスポート）とは

特徴

• １つのモジュール内に1つだけexportできる。そのため、そのファイルの責務を強制的に1つに絞ることができる
• 呼び出し側で、名前を自由に定義できる
• エディタの自動補完が効きずらい

const sampleFn = () => {
  return <h1>サンプル</h1>
}

export default sampleFn

呼び出し方

export defaultの場合は、インポート時に対象を任意の名前に変更できる

import sampleFn from './Sample'

import testFn from './Sample'　⇦ これでもOK（sampleFnではなくてもエラーは吐かれない）

どっちを使うべき？

結論として、named export を使った方が良さそうな印象を受けました。

理由としては、以下になります。

• import時に名前を変更することができるため、複数ファイルで呼び出されるときにそれぞれのファイルで名前が一致しないという状況が起きてしまい、予期せぬエラーや可読性が落ちる懸念がある。
• エディタの自動importがnamed exportのみ恩恵を受けれる

1つ目に関しては、対象のexport元のファイルに何かしらの修正があり、exportする変数名が変わると、import側は名前が一致しないため、エラーが吐かれる。

そのため、呼び出し元がどこか把握しやすくなり、予期せぬエラーや呼び出し側の名前が不一致のままになっているということを避けやすい。

一方、default export の場合は、export元のファイルに何かしらの修正があり、exportする変数名が変わっても、呼び出し側ではエラーが吐かれないため、エラーや名前の不一致につながりやすい。

ですが、以下の記事では「named exportは有害だ」と主張しており興味深い記事です。

是非読んでみてください。

https://zenn.dev/yuhr/articles/668dba202726bf

参考にした記事

https://bonoponz.hatenablog.com/entry/2020/06/11/【React/ES6】named_exportsとdefault_exportsの使い分け

https://engineering.linecorp.com/ja/blog/you-dont-need-default-export

React公式ページにも記載あり（追記）
https://ja.react.dev/learn/importing-and-exporting-components#default-vs-named-exports