はじめに
最近Reactを勉強していますが、exportとexport defaultによく惑わされるので、違いを整理しました。※あくまでできるかできないかの整理となりますので、実際のプロジェクトでこういった書き方がされているかは存じ上げません。
概要
| No. | 項目 | 名前付きエクスポート （export） |
デフォルトエクスポート （export default） |
|---|---|---|---|
| 1 | import時の{ }の必要性 | ○ | × |
| 2 | エイリアスの可否 | ○ | ○ |
| 3 | １ファイルからの複数エクスポート可否 | ○ | △ |
1. import時の{ }の必要性
名前付きエクスポート
FruitsBasket.jsx
export const FruitsBasket = () => <div>FruitsBasket🧺</div>
App.jsx
import { FruitsBasket } from "./FruitsBasket"; 🙆♀️ { } が必要
import FruitsBasket from "./FruitsBasket"; 🙅♀️ { } をつけていない
const App = () => <FruitsBasket />
デフォルトエクスポート
FruitsBasket.jsx
const FruitsBasket = () => <div>FruitsBasket🧺</div>
export default FruitsBasket
App.jsx
import FruitsBasket from "./FruitsBasket"; 🙆♀️ { } は不要
import { FruitsBasket } from "./FruitsBasket"; 🙅♀️ { } をつけている
const App = () => <FruitsBasket />
なお、下記はNG🙅♀️
FruitsBasket.jsx
export default const FruitsBasket = () => <div>FruitsBasket🧺</div>
【参考】
2. エイリアスの可否
名前付きエクスポート
FruitsBasket.jsx
export const FruitsBasket = () => <div>FruitsBasket🧺</div>
App.jsx
import { FruitsBasket as BreadBasket } from "./FruitsBasket"; 🙆♀️ asでrenameできる
import BreadBasket from "./FruitsBasket"; 🙅♀️ ダイレクトにはrenameできない
const App = () => <BreadBasket />
デフォルトエクスポート
FruitsBasket.jsx
const FruitsBasket = () => <div>FruitsBasket🧺</div>
export default FruitsBasket
App.jsx
import BreadBasket from "./FruitsBasket"; 🙆♀️ ダイレクトにrenameできる
import FruitsBasket as BreadBasket from "./FruitsBasket"; 🙅♀️ asを使用したrenameはできない
const App = () => <BreadBasket />
3. 1ファイルからの複数エクスポート可否
名前付きエクスポート
１つずつエクスポートする
FruitsBasket.jsx
export const apple = 'apple🍎'
export const orange = 'orange🍊'
export const banana = 'banana🍌'
App.jsx
import { apple, orange, banana } from './FruitsBasket';
const App = () => {
return (
<>
<p>{apple}</p>
<p>{orange}</p>
<p>{banana}</p>
</>
)
}
まとめてオブジェクトでエクスポートする
FruitsBasket.jsx
const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';
export const fruits = { apple, orange, banana }
App.jsx
import { fruits } from './FruitsBasket';
const App = () => {
return (
<>
<p>{fruits.apple}</p>
<p>{fruits.orange}</p>
<p>{fruits.banana}</p>
</>
);
}
まとめて配列でエクスポートする
FruitsBasket.jsx
const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';
export const fruits = [ apple, orange, banana ]
App.jsx
import { fruits } from './FruitsBasket';
const App = () => {
return (
<>
<p>{fruits[0]}</p>
<p>{fruits[1]}</p>
<p>{fruits[2]}</p>
</>
);
}
デフォルトエクスポート
・複数をそのままエクスポートすることはできない（export defaultは１ファイルにつき１つだけ）・オブジェクト or 配列に格納すれば可能
FruitsBasket.jsx
// エクスポートする側
const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';
export default apple, orange, banana 🙅♀️ 複数をそのままexportはできない
まとめてオブジェクトでexportする
FruitsBasket.jsx
const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';
const fruits = {apple, orange, banana}
export default fruits
App.jsx
import fruits from './FruitsBasket'; 👈 { } は不要
const App = () => {
return (
<>
<p>{fruits.apple}</p>
<p>{fruits.orange}</p>
<p>{fruits.banana}</p>
</>
);
}
まとめて配列でexportする
FruitsBasket.jsx
const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';
const fruits = [apple, orange, banana]
export default fruits
App.jsx
import fruits from './FruitsBasket'; 👈 { } は不要
const App = () => {
return (
<>
<p>{fruits[0]}</p>
<p>{fruits[1]}</p>
<p>{fruits[2]}</p>
</>
);
}
両方を同時に使用する
exportとdefault exportの両方を１つのファイル内で使用することは可能FruitsBasket.jsx
const apple = 'apple🍎';
const orange = 'orange🍊';
const banana = 'banana🍌';
const fruits = [apple, orange, banana]
export const FruitsBasket = () => <div>FruitsBasket🧺</div>
export default fruits
App.jsx
import fruits, { FruitsBasket } from './FruitsBasket'; 🙆♀️ { }のない方を前に書く
import { FruitsBasket }, fruits from './FruitsBasket'; 🙅♀️ { }のある方を先に書くのはNG
const App = () => {
return (
<>
<FruitsBasket />
<p>{fruits[0]}</p>
<p>{fruits[1]}</p>
<p>{fruits[2]}</p>
</>
);
}
参考