JavaScript モジュールとインポート/エクスポート システムについて

JavaScript でのモジュールとインポート/エクスポート

JavaScript では、モジュール を使用すると、コードをより小さく再利用可能な部分に分割し、構成、保守性、読みやすさを向上させることができます。モジュールは、特にコードベースが大きくなる場合に、スケーラブルなアプリケーションを作成するために不可欠です。 ES6 (ECMAScript 2015) の導入により、JavaScript は、異なるファイル間でコードをインポートおよびエクスポートできるネイティブ モジュール システムを獲得しました。

JavaScript のモジュールを理解する

モジュールは、本質的には独自のファイルに保存されるコードの一部です。このコードでは、変数、関数、クラス、またはアプリケーションの他の部分で使用できるようにするその他の構成要素を定義できます。

モジュールからのエクスポート

あるファイルの変数、関数、またはクラスを別のファイルで使用できるようにするには、export キーワードを使用します。 JavaScript でモジュールからエクスポートするには、名前付きエクスポート と デフォルト エクスポート の 2 つの方法があります。

1. 名前付きエクスポート

名前付きエクスポートを使用すると、モジュールから複数の項目 (変数、関数など) をエクスポートできます。名前を指定してエクスポートします。

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

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

デフォルトのエクスポートを使用すると、関数、クラス、オブジェクトなどの単一の値をエクスポートできます。デフォルトのエクスポートは通常、モジュールの 1 つの主要な機能をエクスポートする場合に使用されます。

// math.js (Module File)
export default function multiply(a, b) {
  return a * b;
}

モジュールのインポート

別のファイルのモジュールからエクスポートされた値にアクセスするには、import キーワードを使用します。インポートには、名前付きインポート と デフォルト インポート の 2 種類があります。

1. 名前付きインポート

名前付きエクスポートをインポートする場合は、export ステートメントで使用された正確な名前を使用する必要があります。

// app.js (Main File)
import { add, subtract } from './math.js';

console.log(add(2, 3));  // Output: 5
console.log(subtract(5, 3));  // Output: 2

2. デフォルトのインポート

デフォルトのエクスポートをインポートする場合、インポートされた値に任意の名前を選択できます。

// app.js (Main File)
import multiply from './math.js';

console.log(multiply(2, 3));  // Output: 6

3. 名前付きインポートとデフォルトインポートの結合

名前付きインポートを、同じモジュールからのデフォルトのインポートと組み合わせることもできます。

// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

// app.js
import multiply, { add } from './math.js';

console.log(multiply(2, 3));  // Output: 6
console.log(add(2, 3));  // Output: 5

クラスのエクスポートとインポート

関数や変数と同じ方法で、クラスをエクスポートおよびインポートできます。

例: クラスのエクスポートとインポート

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

動的インポート

JavaScript は 動的インポート もサポートしており、実行時に条件付きでモジュールをロードできます。これは、必要な場合にのみモジュールをロードして、初期ロード時間を短縮するコード分割に役立ちます。

// math.js (Module File)
export default function multiply(a, b) {
  return a * b;
}

ブラウザ内のモジュール

最新のブラウザでは、ES6 モジュールをネイティブに使用できます。 type="module" 属性を <script> に追加するだけです。 HTML のタグ。<br> </script>

// app.js (Main File)
import { add, subtract } from './math.js';

console.log(add(2, 3));  // Output: 5
console.log(subtract(5, 3));  // Output: 2

結論

インポート/エクスポート システムは、コードをモジュール化し、懸念事項を分離できる JavaScript の強力なツールです。コードをより小さく再利用可能な部分に分割することで、アプリケーションの保守性と拡張性を強化できます。モジュールを効果的にエクスポートおよびインポートする方法を理解することは、JavaScript をマスターする上で重要な部分です。

---

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

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