これは完全に私が普段の開発でTypeScriptを使用していて「あ、この場合はやっぱりdeafult exportがいいなとか、こっちの場合はnamed exportの方がいいな」という個人的な意見で書いております。
default exportの良さ
今のところ業務でコードを書いていてdefault exportの方が良いなと感じた点はテストコードを書くときに「mock化しやすい」というとこでした。
業務ではReactを使いテストライブラリにjestを使用しています。
Reactコンポーネントをモック化したい場合のケースを参考にdefault exportで定義していた場合とnamed exportで定義していた場合の違いを紹介していきます。
default exportを使っている場合は以下のようにmockできます。
src/components/SampleDefaultExport.jsx
export default const Component = () => { return(<>Render text.</>) }
src/components/Sample.test.jsx
jest.mock('./SampleDefaultExport', () => () => 'Render mock text.');
しかしnamed exportを使っていると以下のようにmock化してあげる必要ができてきて面倒です。
src/components/SampleNamedExport.jsx
export const Component1 = () => { return(<>Render text.</>) }
src/components/Sample.test.jsx
jest.mock('./SampleNamedExport', () => ({ Component1: jest.fn(() => 'Render mock text.'), }));
named exportの良さ
named exportで宣言しているオブジェクトの名前変更による修正漏れをちゃんとエディタ上で検知できる。
named exportのルールとして以下があります。
インポートするときは、対応するオブジェクトと同じ名前を使用しなければなりません。
このルールがあるため、オブジェクト名を変更した場合は上記のルールを守れていないことによりエラーとなり修正箇所の特定が容易になります。
結局どちらがよいのか？
個人的にはやはりnamed exportの方がチームで開発していく上では積極的に使用していくべきかなと考えます。
利用側でexportする値の名前を同一にするという制限を付けられるし、あまり利用側に自由度を与えたくはないと考えています。
上記のnamed とdefaultのメリットを挙げてもテストのためにdefaultを採用するする気には中々なれないと思いますし、それならしっかりとコードに一貫性を持たせられるようにnamed exportで制限をしっかり設けてあげたほうがコードの健全性も向上するからです。
まだまだ他にもnamed export と default exportの良さがあるかなと思いますが、今のところ私の経験として上記の通りです。
以上、default export、named exportについての話でした。
