JavaScript のモジュールローダー

1. JavaScript のモジュール
2. JavaScript のモジュールローダー

この記事では、JavaScript におけるモジュール ローダーとは何か、モジュール ローダーを使用してメインの JavaScript ファイルに JavaScript モジュールをロードする方法について、例を挙げて説明します。

JavaScript のモジュール

実装の詳細を要約し、特定のタスクを実行するために使用されるコードの複数のステートメントは、モジュールと呼ばれます。 また、再利用することもでき、同じようなコードを繰り返し書くことを避けることができます。

モジュールを別のコード ソースに読み込んで使用できます。 モジュールを使用して、依存関係を簡単に転置して管理できます。

モジュールの基本パターン:

以下に示すように、パターンを使用してモジュールを作成できます。

// Expose module as a global variable

var MyModule = function() {
  // Inner logic of the module

  function helloWorld() {
    console.log('Hello world');  // will print "Hello world" in log
  }

  // Expose API

  return {
    helloWorld: helloWorld
  }
}

これで、以下に示すように、モジュールのインスタンスを作成できます。

var module_instance = new MyModule();

これで、そのパブリック API にアクセスできます。

module_instance.helloWorld();

JavaScript のモジュールローダー

既に記述されたモジュールを特定のモジュール形式で解釈してロードするには、ソース コードの実行時に実行されるモジュール ローダーを使用します。 モジュールローダーがブラウザに読み込まれます。

モジュールローダーがロードするメインファイルを定義する必要があります。 モジュールローダーは、メインファイルの解釈とダウンロードを実行します。

JavaScript のモジュール ローダーの例がいくつかあります。

• RequireJs
• SystemJ

RequireJs

RequireJs は、AMD (Asynchronous Module Definition) 標準をサポートするライブラリです。 以下に示すように、HTML ドキュメントに RequireJ をダウンロードしてロードする必要があります。

<script src="scripts/require.js"></script>

require.js スクリプトがロードされる前または後に、RequireJs を構成できます。 必要なさまざまな名前を記述し、構成を保存する必要があります。

SystemJ

JavaScript では、SystemJs はユニバーサル モジュール ローダーです。 モジュールロード用のangularでは、非常に使用されています。

main.js ファイルに jQuery ライブラリが必要な場合は、main.js ファイルを import キーワードで開始すると、jQuery ライブラリ モジュールが自動的に読み込まれます。 以下に示すように、SystemJs を使用して、メインの JavaScript ファイルに個別の JavaScript モジュールをロードできます。

System.Import('main.js');