RequireJS と jQuery の使用方法

はじめに§ 1
グローバル関数§ 2
モジュール名§ 3
shim 設定を使用した例§ 4
CDN から jQuery を読み込む例§ 5
noConflict を使用するモジュールのマッピング§ 6
連結された require-jquery ファイルを使用した以前の例§ 7

はじめに § 1

RequireJS は他の依存関係と同様に jQuery を読み込みますが、jQuery の広範な使用と広大なプラグインエコシステムを考えると、プロジェクトには jQuery に依存する他のスクリプトも含まれる可能性があります。新しいプロジェクトを開始する場合と、既存のコードを調整する場合では、jQuery RequireJS の設定方法が異なる場合があります。

jQuery は、AMD/RequireJS を検出した場合でも、グローバル変数 "$" と "jQuery" として自身を登録します。AMD アプローチではグローバル関数の使用は推奨されていませんが、これらの jQuery グローバル変数を無効にするかどうかは、それらに依存する非 AMD コードがあるかどうかによって異なります。jQuery には、noConflict 関数があり、グローバル変数の制御を解放できます。これは、後ほど説明するように、requirejs.config で自動化できます。後述。

モジュール名 § 3

jQuery は、AMD/RequireJS を検出すると、名前付き AMD モジュール 'jquery'（すべて小文字）を定義します。混乱を避けるため、requirejs.config でモジュール名として 'jquery' を使用することをお勧めします。

例

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        // the left side is the module ID,
        // the right side is the path to
        // the jQuery file, relative to baseUrl.
        // Also, the path should NOT include
        // the '.js' file extension. This example
        // is using jQuery 1.9.0 located at
        // js/lib/jquery-1.9.0.js, relative to
        // the HTML page.
        jquery: 'jquery-1.9.0'
    }
});

もう一つの（推奨される）解決策は、ファイルを 'jquery.js' と名付け、baseUrl ディレクトリに配置することです。そうすれば、上記の paths エントリは不要になります。

baseUrl + moduleID + '.js' というデフォルトの ID とパスの規則に従ってファイルを配置することで、多くの設定行を回避できます。以下の例では、baseUrl をサードパーティのライブラリコードのディレクトリとして設定し、アプリコード用に paths 設定を 1 つ追加する方法を示します。

繰り返しますが、`'lib/jquery'` のような別のモジュール名で jQuery を参照すると、エラーが発生する可能性があります。**この例は動作しません**


    // THIS WILL NOT WORK
    define(['lib/jquery'], function ($) {...});

jQuery は 'jquery' という名前で自身を登録し、'lib/jquery' という名前では登録されないため、動作しません。一般的に、`define()` 呼び出しでモジュールを明示的に命名することは推奨されていませんが、jQuery にはいくつかの特別な制約があります。

shim 設定を使用した例 § 4

この例では、shim 設定を使用して、define() を呼び出さない jQuery プラグインの依存関係を指定する方法を示します。この例は、既存の jQuery プロジェクトを変換する際に、jQuery プラグインのソースを修正して define() を呼び出す必要がない場合に役立ちます。

shim 設定を使用した jQuery の例

CDN から jQuery を読み込む例 § 5

この例では、コンテンツ配信ネットワーク (CDN) から jQuery を読み込みながら、コードを読み込み、最適化する方法を示します。この例では、すべての jQuery プラグインが define() を呼び出して依存関係を適切に表現する必要があります。Shim 設定は、CDN リソースを使用した最適化ビルドの後では機能しません。

CDN から jQuery を使用する例

noConflict を使用するモジュールのマッピング § 6

すべてのモジュール（jQuery に依存するサードパーティの jQuery プラグインまたはライブラリコードを含む）が AMD に互換性があり、`requirejs(['jquery'])` を呼び出す際にグローバル名前空間に $ または jQuery が存在しないようにしたい場合は、map 設定を使用して、jQuery の使用を noConflict を呼び出して 'jquery' モジュール ID の jQuery の値を返すモジュールにマッピングできます。

この例は上記の CDN の例で使用できます。shim 例は機能しません。shim されたライブラリにはグローバル jQuery が必要です。

requirejs.config({
    // Add this map config in addition to any baseUrl or
    // paths config you may already have in the project.
    map: {
      // '*' means all modules will get 'jquery-private'
      // for their 'jquery' dependency.
      '*': { 'jquery': 'jquery-private' },

      // 'jquery-private' wants the real jQuery module
      // though. If this line was not here, there would
      // be an unresolvable cyclic dependency.
      'jquery-private': { 'jquery': 'jquery' }
    }
});

// and the 'jquery-private' module, in the
// jquery-private.js file:
define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

つまり、jQuery を使用するモジュールは、グローバル $ に依存するのではなく、AMD の戻り値を使用する必要があります。


requirejs(['jquery'], function( $ ) {
    console.log( $ ) // OK
});

requirejs(['jquery'], function( jq ) {
    console.log( jq ) // OK
});

requirejs(['jquery'], function( ) {
    console.log( $ ) // UNDEFINED!
});

連結された require-jquery ファイルを使用した以前の例 § 7

以前は、require.js と jQuery を連結した特別な require-jquery ファイルを使用した例を挙げていましたが、これはもはや require.js で jQuery を使用する推奨方法ではありません。しかし、（メンテナンスされていない）例を探している場合は、ここで require-jquery を見つけることができます。

JavaScript モジュールローダー