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

## はじめに
最近Reactを勉強していますが、export（名前付きエクスポート）とexport default（デフォルトエクスポート）に惑わされています。<br/>
どちらを使えばいいのか疑問に思い軽く調べたところ、「exportでは〜ができます。export defaultでは〜ができます。」というややズレた答えが散見され、「exportなのかい？export defaultなのかい？どっちなんだい！！？？（きんに君風）」と思っていました。<br/>

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

https://stackoverflow.com/questions/46913851/why-and-when-to-use-default-export-over-named-exports-in-es6-modules

exportとdefault exportの違いは[こちら](https://qiita.com/Jassy/items/fa4d7a784ea9d0b9f89a)

## exportとexport defaultのどちらを使うべきか
この「export vs export default 論争」に対する答えは

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

です。

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

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

以下比較

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

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

【参考】
・[Qiita開発チームがReactの開発で export default を使わなくなった理由](https://qiita.com/ohakutsu/items/218939c93c8fc8620d77)

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

【参考】
・[Qiita開発チームがReactの開発で default export を使わなくなった理由](https://qiita.com/ohakutsu/items/218939c93c8fc8620d77)
・[Why we have banned default exports in Javascript and you should do the same](https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad)

<a href="https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad">Why we have banned default exports in Javascript and you should do the same</a> 


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


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

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

<h4>exportの場合</h4>

```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'
```

<h4>export defaultの場合</h4>

```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](https://betterprogramming.pub/understanding-the-difference-between-named-and-default-exports-in-react-2d253ca9fc22)）
・[Avoid ES6 default exports](https://rajeshnaroth.medium.com/avoid-es6-default-exports-a24142978a7a)



### No.4　Tree Shakingの改善
[Tree Shaking](https://qiita.com/soarflat/items/755bbbcd6eb81bd128c4)（バンドル時に不要なコードをバンドルしないこと）の改善が期待される


・[Avoid ES6 default exports](https://rajeshnaroth.medium.com/avoid-es6-default-exports-a24142978a7a)
・[What is the importance of Default exports in ReactJS](https://stackoverflow.com/questions/43354897/what-is-the-importance-of-default-exports-in-reactjs)
・[Why we have banned default exports in Javascript and you should do the same](https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad)

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

2022年7月時点では[React.lazy](https://ja.reactjs.org/docs/code-splitting.html#reactlazy)（何それ、知らない・・・。）を使う場合はdefault exportを使わなければならないようです。


## export default App？？

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

```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派の方の意見が見つかりました。）

https://kk-web.link/blog/20201021

そもそもReact, Vue, Angularといったフレームワークは[コンポーネント指向](https://www.cresco.co.jp/blog/entry/18152/#:~:text=%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E6%8C%87%E5%90%91%E3%81%A8%E3%81%AF%E3%80%81%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88,%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%80%82&text=%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E6%8C%87%E5%90%91%E9%96%8B%E7%99%BA%E3%81%AF%E3%80%81%E7%94%BB%E9%9D%A2,%E7%94%A8%E3%81%84%E3%81%A6%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%80%82)を採用しています。
これはコンポーネント＝部品、構成要素　であり、小さい部品を１つ１つ組み合わせて最終的なアプリケーションの形にする　という設計指向です。 
そのため、**１つのファイルに複数の処理を記述して欲しくない**のです。

あるべき

```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でも「**<font color="red">１つのファイルには１つのコンポーネントのみ記述してね</font>**」ということで、npx create-react-appして生成される雛形にはexport default Appが使われているのではないでしょうか。

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

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

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

2022/07/16 <font color="red">追記</font>
↓ もう一つ参考になる記事を見つけました。

https://zenn.dev/yuhr/articles/668dba202726bf