JavaScript では、モジュール を使用すると、コードをより小さく再利用可能な部分に分割し、構成、保守性、読みやすさを向上させることができます。モジュールは、特にコードベースが大きくなる場合に、スケーラブルなアプリケーションを作成するために不可欠です。 ES6 (ECMAScript 2015) の導入により、JavaScript は、異なるファイル間でコードをインポートおよびエクスポートできるネイティブ モジュール システムを獲得しました。
モジュールは、本質的には独自のファイルに保存されるコードの一部です。このコードでは、変数、関数、クラス、またはアプリケーションの他の部分で使用できるようにするその他の構成要素を定義できます。
あるファイルの変数、関数、またはクラスを別のファイルで使用できるようにするには、export キーワードを使用します。 JavaScript でモジュールからエクスポートするには、名前付きエクスポート と デフォルト エクスポート の 2 つの方法があります。
名前付きエクスポートを使用すると、モジュールから複数の項目 (変数、関数など) をエクスポートできます。名前を指定してエクスポートします。
// math.js (Module File) export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
デフォルトのエクスポートを使用すると、関数、クラス、オブジェクトなどの単一の値をエクスポートできます。デフォルトのエクスポートは通常、モジュールの 1 つの主要な機能をエクスポートする場合に使用されます。
// math.js (Module File)
export default function multiply(a, b) {
return a * b;
}
別のファイルのモジュールからエクスポートされた値にアクセスするには、import キーワードを使用します。インポートには、名前付きインポート と デフォルト インポート の 2 種類があります。
名前付きエクスポートをインポートする場合は、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
デフォルトのエクスポートをインポートする場合、インポートされた値に任意の名前を選択できます。
// app.js (Main File) import multiply from './math.js'; console.log(multiply(2, 3)); // Output: 6
名前付きインポートを、同じモジュールからのデフォルトのインポートと組み合わせることもできます。
// 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" 属性を
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
