exportの書き方の違い【JavaScript、React】

Reactの関数コンポーネントをexportするときに「export default」と「export 」という書き方があり、どちらを使っても問題なく動いているので、これまでReactを勉強したときに使った書籍や動画で解説されている通りになんとなく書いていました。

とある機会に違いを聞かれ、明確に答えられず、調べたので、まとめておこうと思います！（Reactを勉強した書籍や動画でも説明があったとは思うのですが、深く理解しようとしていなかった）

※間違えがあれば教えていただけると幸いですm(_ _)m

1 export default
2 export
3 違い
- 3.1 1つのモジュール内でのエクスポートできる数
- 3.2 呼び出し側（import）で定義の記述方法
4 どちらを使うべき？

export default

SampleComponent.js

export default function SampleComponent() {
  return (
    <h1>サンプルコンポーネントです！</h1>
  );
}

関数などをエキスポートするのに、「export default」と宣言する方法を「デフォルトエクスポート」と呼ぶそうです。

ちなみに、僕がReactを勉強する際に見た動画ではアロー関数を使って下記のように書かれることが多かったです。

SampleComponent.js

const SampleComponent = () => {
  return (
    <h1>サンプルコンポーネントです！</h1>
  );
}

export default SampleComponent;

export

SampleComponent.js

export function SampleComponent() {
  return (
    <h1>サンプルコンポーネントです！</h1>
  );
}

関数などをエキスポートするのに、「export」のみを宣言する方法を「名前付きエクスポート」とよぶそうです。

アロー関数では下記のようになります。

SampleComponent.js

export const SampleComponent = () => {
  return (
    <h1>サンプルコンポーネントです！</h1>
  );
}

違い

主に下記の違いがあります。

1つのモジュール内でのエクスポートできる数
呼び出し側（import）で定義の記述方法

1つのモジュール内でのエクスポートできる数

デフォルトエクスポートは1つのモジュール内で1つしかエクスポートはできません。

つまり下記がNG！！

SampleComponent.js

export default function SampleComponent1() {
  return (
    <h1>サンプルコンポーネント1です！</h1>
  );
}

export default function SampleComponent2() {
  return (
    <h1>サンプルコンポーネント2です！</h1>
  );
}

一方で、名前付きエクスポートは1つのモジュール内で複数エクスポートできます。

つまり下記もOK

SampleComponent.js

export function SampleComponent1() {
  return (
    <h1>サンプルコンポーネント1です！</h1>
  );
}

export function SampleComponent2() {
  return (
    <h1>サンプルコンポーネント2です！</h1>
  );
}

export function SampleComponent3() {
  return (
    <h1>サンプルコンポーネント3です！</h1>
  );
}

呼び出し側（import）で定義の記述方法

デフォルトエクスポートはインポートする時に対象を任意の名前に変更できます。

つまり

ExportComponent.js

export default function ExportComponent() {
  return (
    <h1>エクスポートコンポーネントです！</h1>
  );
}

下記でOKだし

ImportComponent.js

// そのままの名前でOK
import ExportComponent from './ExportComponent';

export default function ImportComponent() {
  return (
    <>
        <h1>インポートコンポーネントです！</h1>
        <ExportComponent />
    </>
  );
}

下記でもOK

ImportComponent.js

// 任意の名前でもOK
import ExportAnyNameComponent from './ExportComponent';

export default function ImportComponent() {
  return (
    <>
        <h1>インポートコンポーネントです！</h1>
        <ExportAnyNameComponent />
    </>
  );
}

一方で、名前付きエクスポートはインポートするときにエキスポートした名前でかつ中括弧で囲んで宣言する必要があります。

つまり

ExportComponent.js

export function ExportComponent1() {
  return (
    <h1>エクスポートコンポーネント1です！</h1>
  );
}

export function ExportComponent2() {
  return (
    <h1>エクスポートコンポーネント2です！</h1>
  );
}

export function ExportComponent3() {
  return (
    <h1>エクスポートコンポーネント3です！</h1>
  );
}

下記のように「import」する必要があります。

ImportComponent.js

import { 
　ExportComponent1,
　ExportComponent2, 
　ExportComponent3
} from './ExportComponent';

export default function ImportComponent() {
  return (
    <>
        <h1>インポートコンポーネントです！</h1>
        <ExportComponent1 />
        <ExportComponent2 />
        <ExportComponent3 />
    </>
  );
}