JavaScript でのエクスポートとインポートについて

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

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

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

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 <h1>Hello, {name}!</h1>;
}

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

import Greeting from './Greeting';

function MyComponent() {
  return <Greeting name="Alice" />;
}

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

以上がJavaScript でのエクスポートとインポートについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。