JavaScript モジュールは、JavaScript コードを整理して再利用する方法です。モジュールを使用すると、コードをより小さく管理しやすい部分に分割でき、必要に応じてアプリケーションの他の部分にインポートして使用できます。このモジュール式のアプローチは、クリーンなコードベースの維持に役立ち、デバッグが容易になり、コードの再利用性が向上します。
JavaScript エコシステムにはさまざまなモジュール システムがあります。 ES モジュール (ESM) は ECMAScript 仕様の標準であり、主にブラウザで使用され、Node.js でのサポートが増えています。 CommonJS は、Node.js で伝統的に使用されていたもう 1 つのモジュール システムです。
ES モジュール (ESM) は、ECMAScript 2015 (ES6) で導入された JavaScript の標準化されたモジュール システムです。異なるファイル間で関数、オブジェクト、プリミティブのインポートとエクスポートを可能にすることで、コードの編成と再利用性が向上します。このモジュール システムは、ブラウザや Node.js などの最新の JavaScript 環境で広くサポートされています。
エクスポートとインポート
export キーワードは、現在のモジュールの外部からアクセスできる変数と関数にラベルを付け、アプリケーションの他の部分で再利用できるようにします。 import キーワードを使用すると、これらの機能を他のモジュールからインポートできるため、モジュール式プログラミングとコードの再利用が可能になります。
名前付きエクスポートを使用すると、モジュールから複数の項目をエクスポートできます。各項目は、エクスポートされたときと同じ名前でインポートする必要があります。
//modules.js
const greet = () => {
console.log('Hello World');
};
export { greet};
名前付きエクスポートをインポートする場合は、エクスポートと同じ名前を使用する必要があります。
import { greet } from './module.js';
greet(); // Hello, World!
デフォルトのエクスポートでは、モジュールごとに 1 つのデフォルトのエクスポートが可能です。アイテムは任意の名前でインポートできます。
//modules.js
const greet = () => {
console.log('Hello World');
};
export default greet;
デフォルトのエクスポートをインポートするときは、任意の名前を使用できます。
import message from './module.js'; message(); // Hello, World!
HTML でのモジュールの使用
ブラウザでモジュールを使用する場合は、モジュールを HTML ファイルに含める必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
