なぜnpx create-react-appすると"export default" Appなのか？ #JavaScript

はじめに

最近Reactを勉強していますが、export（名前付きエクスポート）とexport default（デフォルトエクスポート）に惑わされています。

どちらを使えばいいのか疑問に思い軽く調べたところ、「exportでは〜ができます。export defaultでは〜ができます。」というややズレた答えが散見され、「exportなのかい？export defaultなのかい？どっちなんだい！！？？（きんに君風）」と思っていました。

（stackoverflowでも「全部の質問読んだけど、わかんねえ、、、」という記事がありました。）

exportとdefault exportの違いはこちら

exportとexport defaultのどちらを使うべきか

この「export vs export default 論争」に対する答えは

どちらを使ってもよく、プロジェクトで決めた方針に従う

です。

下で記載しているように、React.lazyを使うケースではexport defaultを使う必要があるとのことですが、その他のケースでは絶対にどちらか選んで使わなければならないという答えは見つかりませんでした。

exportを使った方がいい？

ただ、調べた感じでは、「export defaultよりもexportを使った方がいい」という意見が大半のようです。

以下比較

No.	項目	export	export default
1	import時のコンポーネント名の統一性	👍	👎
2	リファクタリング	👍	👎
3	記述の簡潔性	👍	👎
4	Tree Shakingの改善	👍	👎

No.1　import時のコンポーネント名の統一性

exportはインポート時に決まった名前でインポートする必要があり、コンポーネント名が統一される
（↔︎export defaultはインポート側で名前を自由につけることができるため、コンポーネント名が統一されない）

【参考】
・Qiita開発チームがReactの開発で export default を使わなくなった理由

No.2　リファクタリング

exportはリファクタリング時にVSCodeなどのエディターで補正が効く

【参考】
・Qiita開発チームがReactの開発で default export を使わなくなった理由
・Why we have banned default exports in Javascript and you should do the same

Why we have banned default exports in Javascript and you should do the same

No.3　記述の簡潔性

複数コンポーネントをまとめてindexファイル等に記述する際、簡潔に書ける

src
 └components
   ├ Apple.jsx
   ├ Index.jsx
   └ Orange.jsx

というファイル構成の場合、

exportの場合

Apple.jsx

export const Apple = () => <div>Apple🍎</div>

Orange.jsx

export const Orange = () => <div>Orange🍊</div>

index.jsx

export { Apple } from './Apple.js'  👈 それぞれを1行で書ける
export { Orange } from './Orange'

export defaultの場合

Apple.jsx

const Apple = () => <div>Apple🍎</div>
export default Apple

Orange.jsx

const Orange = () => <div>Orange🍊</div>
export default Orange

index.jsx

import Apple from "./Apple";
import Orange from "./Orange";

export { Apple, Orange }; 👈 こっちでまとめ直さないといけない

【参考】
・Understanding the Difference Between Named and Default Exports in React）
・Avoid ES6 default exports

No.4　Tree Shakingの改善

Tree Shaking（バンドル時に不要なコードをバンドルしないこと）の改善が期待される

・Avoid ES6 default exports
・What is the importance of Default exports in ReactJS
・Why we have banned default exports in Javascript and you should do the same

export defaultを使う必要があるケース

2022年7月時点ではReact.lazy（何それ、知らない・・・。）を使う場合はdefault exportを使わなければならないようです。

export default App？？

さて、調べた感じではexport > export defaultのように思えますが、どうにも腑に落ちない自分がいました。

その原因はこれです。

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;　👈 !!

npx create-react-appするとreactアプリの雛形が作られますが、そこでexport defaultが利用されているのです。
あれだけ名前付きインポートの方がいいと言われているのになぜReactは初期設定でデフォルトエクスポートを利用しているのでしょうか・・・？

その理由

こちらの記事を読んでいてその理由がしっくりきたように思います。
（貴重なexport default派の方の意見が見つかりました。）

そもそもReact, Vue, Angularといったフレームワークはコンポーネント指向を採用しています。
これはコンポーネント＝部品、構成要素　であり、小さい部品を１つ１つ組み合わせて最終的なアプリケーションの形にする　という設計指向です。
そのため、１つのファイルに複数の処理を記述して欲しくないのです。

あるべき

Button.jsx

const Button = () => { //ボタンに関する処理 }
export default Button

Input.jsx

const Input = () => { // inputフィールドに関する処理 }
export default Input

アンチパターン

MultipleElements.jsx

export const Button = () => { //ボタンに関する処理 }
export const Input = () => { // inputフィールドに関する処理 }

すでにご存知の通り、export defaultは１ファイルにつき１つしか許可されていません。
（ただし、exportは複数記述可能なので、プロジェクトでexport defaultを使用するルールにしておく必要があります。）

なので、Reactでも「１つのファイルには１つのコンポーネントのみ記述してね」ということで、npx create-react-appして生成される雛形にはexport default Appが使われているのではないでしょうか。

以上が自分なりに導き出した結論となります。

やや細かい点ですが、ずっと気になっていたので、自分なりに解消できてスッキリしました。

（もし間違っている記載等ございましたら、ご指摘ください。）

2022/07/16 追記
↓ もう一つ参考になる記事を見つけました。

なぜnpx create-react-appすると"export default" Appなのか？