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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次