exportは名前付きエクスポートでやりましょう

こんにちは。Web デザイナーのツーさんです 😁
昨今の開発環境ではコンポーネントを import や export したりするのは当たり前ですよね。ご存知の通りexport には "デフォルトエクスポート（default export）" と "名前付きエクスポート（named export）" があります。

今回の記事の内容はこの 2 種類のexportの方法の違いとおすすめのエクスポート方法をまとめた小ネタです。

結論：名前付きエクスポートを使いましょう 👍

「そんでどっちを使えばいいの？」となりますよね。
個人的には"名前付きエクスポート"を使うことをおすすめします。 デフォルトエクスポートは正直デメリットが多くて私は使う気がしません。
※個人の見解です

デフォルトエクスポート は名前を自由に変更できる ✍

Hoge コンポーネントを例にexportとimport時のソースコードを見てみましょう。

/** named export */
export function Hoge() {}

/** default export */
export default function Hoge() {}

上記の export された Hoge コンポーネントを import する時

/** named export */
import { Hoge } from "./Hoge";

/** default export */
import Hoge from "./Hoge";
// または
import HogeDef from "./Hoge"; // 名前を変更できる;

名前が変更できてしまうのは開発時に混乱を招く恐れがあるので避けておきたいです。

まとめてエクスポートしづらい 🤷‍♂️

まずは下記をご覧ください。
このようなディレクトリ構成の時にindex.tsxで複数のコンポーネントをまとめてexportすることはよくあると思います。

components
  ├ Fuga.tsx
  ├ Hoge.tsx
  ├ index.tsx // Hoge, Fuga, Piyo をまとめて export する
  └ Piyo.tsx

/** index.tsx (名前付きエクスポートされている場合) */
export { Fuga } from "./Fuga";
export { Hoge } from "./Hoge";
export { Piyo } from "./Piyo";

名前付きエクスポートの場合はシンプルでとてもわかりやすいですね。
次にデフォルトエクスポートの時をみてみましょう。

/** index.tsx (デフォルトエクスポートされている場合)  */
export { default as Fuga } from "./Fuga";
export { default as Hoge } from "./Hoge";
export { default as Piyo } from "./Piyo";

まずdefault as XXXと打つのが面倒だし一見してわかりづらい。そして as を使用してデフォルトエクスポートに別名をつけています。別名なのでもちろん命名も自由にできます。

上記 2 点の理由から私個人は名前付きエクスポートしか使用していません。

"デフォルトエクスポート" と "名前付きエクスポート"についての小ネタは以上になります。
最後までお読みいただき、ありがとうございました。この記事が皆様のお役に立てば幸いです。