JavaScriptReact

default export と export の違いってなんだろう

JavaScript

export構文とは

export宣言は関数やオブジェクト、変数を他ファイルでも使用できるようにするための構文

default export の記法

  • 1つのモジュール内で1つだけexportできる。
  • 呼び出し側で自由に名前が設定できる
const Func = (num1, num2) => num1 + num2

export default Func;

呼び出し側はimport時に自由に名前を設定できる

// もちろん同じ名前でもOK
import Func from './sample'

// これでもいけちゃう
import func from '.sample'

exportの記法(named export 名前付きエクスポート)

  • 1つのモジュール内で何個でもexportすることができる
  • 呼び出し側ではexportした名前(下記コードではname, Func)でimportしなければならない
// name変数を他ファイルでも使えるようにする
export const name = "Mamasaya"
// Func関数を他ファイルでも使えるようにする
export const Func = (num1, num2) => num1 + num2

呼び出し側は {} で値を指定する

import { name, Func } from './sample1'

どっちがいいのだろうか

どちらにもメリット・デメリットがあるので一概にこれとは言えなさそう・・・

自分は named export をよく使います

TypeScriptの場合は default export を使うべきみたいなZennの記事もありますね

参考文献
export - JavaScript | MDN
export 宣言は、JavaScript モジュールから値をエクスポートするために使用されます。エクスポートされた値は import 宣言やダイナミックインポートによって、他のプログラムにインポートすることができます。インポートされたバイ...
named exportは有害だと考えられます
named exportとdefault exportの違いを理解する

コメント