JavaScript では、モジュールは自己完結型のコード単位であり、エクスポートを使用して他のモジュールにアセットを公開したり、インポートを使用して他のモジュールからアセットを消費したりできます。このメカニズムは、最新の JavaScript アプリケーションでモジュール式の再利用可能なコードを構築するために不可欠です。

デフォルトのエクスポート

• モジュールにはデフォルトのエクスポートを 1 つだけ含めることができます。
• デフォルトのアセットをエクスポートするには、エクスポートされるエンティティの前にデフォルトのキーワードを使用します。
• デフォルトのエクスポートをインポートするには、エクスポートされた名前を指定せずに、それを変数に直接割り当てることができます。

// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

名前付きエクスポート

• モジュールには複数の名前付きエクスポートを含めることができます。
• 名前付きアセットをエクスポートするには、エクスポートされるエンティティの前にエクスポート キーワードを使用し、名前を付けます。
• 名前付きエクスポートをインポートするには、インポートするアセットの名前を指定する必要があります。

// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

デフォルトと名前付きエクスポートの結合

デフォルトのエクスポートと名前付きエクスポートの両方を 1 つのモジュールに含めることができます:

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

デフォルトと名前付きエクスポートの両方をインポートするには:

import greet, { farewell } from './myModule';

覚えておくべき重要なポイント

• エクスポートは、モジュールからアセットを公開するために使用されます。
• import は、他のモジュールからアセットを消費するために使用されます。
• モジュールにはデフォルトのエクスポートを 1 つだけ含めることができます。
• 名前付きエクスポートは個別にインポートすることも、まとめてインポートすることもできます。
• インポートに使用される名前は任意であり、エクスポートされたモジュールで使用される名前と一致する必要はありません。

実践例

React コンポーネントを検討します:

import React from 'react';

export default function Greeting({ name }) {
  return 
Hello, {name}!
;
}

この例では、Greeting コンポーネントがデフォルトのエクスポートとしてエクスポートされます。インポートして他のコンポーネントで使用できます:

import Greeting from './Greeting';

function MyComponent() {
  return ;
}

エクスポートとインポートを理解することで、JavaScript プロジェクトでコードを効果的に整理して再利用できます。