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

ブラウザのサポート

最新のブラウザは JavaScript モジュールをネイティブにサポートしています。これには、Chrome、Firefox、Safari、Edge、Opera が含まれます。ただし、Internet Explorer などの古いブラウザはモジュールをサポートしていません。これらの場合、Webpack などのバンドラーまたは Babel などのトランスパイラーを使用する必要がある場合があります。

Node.js でのモジュールの使用
Node.js で ES モジュールを使用するには、.mjs ファイル拡張子を使用するか、package.json ファイルで "type": "module" を設定します。

// package.json
{
 "type": "module"
}

エイリアスのインポート

JavaScript モジュールのエイリアスを使用すると、異なる名前を使用して機能をインポートおよびエクスポートできます。これは、名前の競合を回避したり、インポートするモジュールのコンテキストでよりわかりやすい名前を指定したりする場合に役立ちます。

// math.js
export function add(a, b) {
   return a   b;
}
 export function subtract(a, b) {
   return a - b;
}

エイリアスを使用して、これらの関数を別の名前でインポートできます:

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

モジュール全体をエイリアスとしてインポート

モジュール全体を単一のエイリアスとしてインポートできるため、名前空間内のすべてのエクスポートにアクセスできます。

// main.js
import * as math from './math.js';


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

動的インポート

Promise を返す import() 関数を使用してモジュールを動的にインポートすることもできます。これは、コード分割と遅延読み込みに役立ちます。

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

この例では、loadModule 関数が呼び出されたときに math.js モジュールが動的にロードされます。

共通JS (CJS)

CommonJS は主に Node.js で使用されるモジュール システムです。これは ES モジュールが標準化される前のデフォルトのモジュール システムであり、現在でも多くの Node.js プロジェクトで広く使用されています。 require() を使用してモジュールと module.exports をインポートするか、exports を使用してモジュールから機能をエクスポートします。

CommonJS では、モジュールから値をエクスポートするために module.exports と exports の両方が使用されます。 exports は基本的に module.exports の短縮形であり、どちらでも使用できます。ただし、潜在的な混乱や予期しない動作を避けるために、通常は module.exports を一貫して使用することをお勧めします。

この例では、module.exports に関数が割り当てられているため、app.js の require 呼び出しはその関数を返します。

// 挨拶.js module.exports = 関数(名前) { return `こんにちは、${name}!`; };

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js constgreet = require('./greet'); console.log(greet('アリス')); // 「こんにちは、アリス！」

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

この例では、exports を使用して module.exports にプロパティを追加します。 app.js の require 呼び出しは、加算関数と減算関数を含むオブジェクトを返します。

// math.js exports.add = function(a, b) { a b を返します。 }; exports.subtract = function(a, b) { a - b を返します。 };

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js const math = require('./math'); console.log(math.add(2, 3)); // 5 console.log(math.subtract(5, 2)); // 3

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

JavaScript モジュールには、コードの構成、保守性、パフォーマンスを向上させる数多くの利点があります。

• 再利用性

  モジュールを使用すると、アプリケーションのさまざまな部分やさまざまなプロジェクトにインポートして使用できる再利用可能なコードを作成できます。
  

• メンテナンス性

  コードをより小さな自己完結型モジュールに分割することで、コードベースをより効率的に管理および保守できます。これにより、アプリケーション全体に影響を与えることなく、個々のモジュールの更新、リファクタリング、デバッグが容易になります。
  

• コード分割

  モジュールによりコード分割が可能になり、必要なときに必要なコードのみをロードできるようになり、初期ロード時間と全体的なパフォーマンスが向上します。
  

• テストの改善

  モジュール型コードは、個々のモジュールを分離してテストできるため、テストが簡単です。これにより、テストの信頼性と保守性が向上します。
  

• 木の揺れ

  Webpack や Rollup などの最新のモジュール バンドラーは、最終的なバンドルから未使用のコードを削除する手法であるツリー シェークを実行でき、その結果、より小さく効率的なコードが得られます。
  

結論

JavaScript 開発では、ES モジュールの導入により、従来の CommonJS モジュール システムからの大きな変化が見られました。 ES モジュールは、依存関係を管理し、保守性を向上させるための標準化された効率的な方法を提供します。エクスポートおよびインポート構文は、モジュールを定義して使用するための明確かつ簡潔な方法を提供し、コードベースの構成と読みやすさを向上させます。