検索

ホームページ >ウェブフロントエンド >jsチュートリアル >ES モジュールを使用した JavaScript コードの強化: エクスポート、インポート、その他

ES モジュールを使用した JavaScript コードの強化: エクスポート、インポート、その他

WBOY
WBOYオリジナル
2024-07-21 13:44:07800ブラウズ

Enhancing JavaScript Code with ES Modules: Export, Import, and Beyond

JavaScript モジュールは、JavaScript コードを整理して再利用する方法です。モジュールを使用すると、コードをより小さく管理しやすい部分に分割でき、必要に応じてアプリケーションの他の部分にインポートして使用できます。このモジュール式のアプローチは、クリーンなコードベースの維持に役立ち、デバッグが容易になり、コードの再利用性が向上します。

ES モジュールと CommonJS の比較

JavaScript エコシステムにはさまざまなモジュール システムがあります。 ES モジュール (ESM) は ECMAScript 仕様の標準であり、主にブラウザで使用され、Node.js でのサポートが増えています。 CommonJS は、Node.js で伝統的に使用されていたもう 1 つのモジュール システムです。

ESモジュール(ESM)

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 ファイルに含める必要があります。