export functionとは!?JavaScript ES6 (ES2015)のモジュールexportとimport【Next.js】

覚書です。

JavaScript ES6 (ES2015)のモジュールexportとimport【Next.js】

JavaScriptの標準仕様であり、ES6 (ES2015) からモジュールの機能が公式に追加されました。このモジュールの機能は、JavaScriptのコードを複数のファイルに分割し、ファイル間で変数や関数を共有するためのものです。

export functionとは!?export defaultとexport functionの違いは？

デフォルトエクスポート (export default): この方法でエクスポートされたものをインポートする際には、中括弧 {} は不要です。

• 1つのモジュールあたり、1つだけのエンティティ（関数、クラス、オブジェクトなど）をデフォルトとしてエクスポートできます。
• インポートする際には、任意の名前をつけることができます。

// component.tsx
export default function MyComponent() { ... }

// anotherFile.tsx
import MyComponent from './component';

名前付きエクスポート (export): この方法でエクスポートされたものをインポートする際には、中括弧 {} が必要です。

1つのモジュールから複数のエンティティをエクスポートすることができます。

// component.tsx
export function MyComponent1() { ... }
export function MyComponent2() { ... }

// anotherFile.tsx
import { MyComponent1, MyComponent2 } from './component';

ご参考になれば幸いです。