アプリケーションが大きくなるにつれ、それを複数のファイルに分割したくなります。いわゆる ‘モジュール’ です。通常、モジュールはクラスや便利な関数のライブラリを含みます。
長い間、JavaScript には言語レベルのモジュール構文は存在しませんでした。当初はスクリプトが小さくて単純だったため問題ではありませんでした。そのため、モジュールの仕組みも必要ありませんでした。
しかし、スクリプトが徐々に複雑になってきたため、コミュニティはコードをモジュールにまとめるための様々な方法を発明しました。
いくつか挙げます:
- AMD – 最も古いモジュールシステムの1つで、最初はライブラリrequire.jsで実装されました。
- CommonJS – Node.js サーバ用に作られたモジュールシステムです。
- UMD – もう1つのモジュールシステムで、ユニバーサルなものとして提案されています。AMD と CommonJS と互換性があります。
今や、これらはゆっくりと歴史の一部になっていますが、依然として古いスクリプトの中で利用されています。
言語レベルのモジュールシステムの標準は 2015 年に登場し、それ以来徐々に進化し、今ではすべての主要なブラウザとNode.js でサポートされています。なので、ここからはモダンな JavaScript モジュールについて学んでいきます。
モジュールとは?
モジュールは単なる1つのファイルです。
ディレクティブ export と import を利用することで、モジュール間で機能を相互にやりとりすることができます。:
exportキーワードは、ファイルの外部からアクセス可能であるべき変数や関数にラベル付けをします。importは他のモジュールから機能をインポートできるようにします。
例えば、関数をエクスポートしているファイル sayHi.js があります:
// 📁 sayHi.js
export function sayHi(user) {
alert(`Hello, ${user}!`);
}…そして、別のファイルでそれをインポートして使います。:
// 📁 main.js
import {sayHi} from './sayHi.js';
alert(sayHi); // function...
sayHi('John'); // Hello, John!import ディレクティブは現在のファイルからの相対パス ./sayHi.js のモジュールを読み込み、エクスポートされた関数