🦧

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

2023/04/14に公開

動機

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

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

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

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

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

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

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

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は有害だ」と主張しており興味深い記事です。

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