【React】デフォルトエクスポートとは

デフォルトエクスポートとは

Reactのデフォルトエクスポート（export default）は、モジュールから1つだけエクスポートする方法です。モジュール内で1つのコンポーネントや関数、クラス、またはオブジェクトをデフォルトとしてエクスポートすることができます。このようにエクスポートされた要素は、インポート時に名前を変更することなく利用できます。

使用方法

例えば、以下のようにReactコンポーネントをデフォルトエクスポートすることができます。

// MyComponent.js

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

export default MyComponent;

この場合、MyComponentはデフォルトエクスポートされており、他のファイルでインポートする際には以下のように書くことができます。

import MyComponent from './MyComponent.js';

export defaultを使用すると、インポート時に任意の名前を付けることができます。上記の例では、MyComponentがデフォルトエクスポートされているため、インポート時に任意の名前（ここではMyComponent）を指定できます。

一方、export文を使用してエクスポートする場合、エクスポートする変数や関数の名前を指定する必要があります。この場合、インポート時に指定した名前でエクスポートされた変数や関数を使用する必要があります。

// MyFunction.js

export function myFunction() {
  return 'Hello, World!';
}

このようにエクスポートされた関数は、インポート時に同じ名前で使用する必要があります。

import { myFunction } from './MyFunction.js';

まとめ

デフォルトエクスポートは、ファイルごとに1つの要素をエクスポートする必要がある場合や、エクスポートされる要素が単一である場合に便利です。一方で、export文を使用すると、複数の要素をエクスポートすることができるため、柔軟性があります。