AMD(Asynchronous Module Definition / 非同期モジュール定義)は、CommonJSのモジュールシステムの性質が「同期」であったため、 ブラウザには相応しくないと考えた人達に向けられたものでした。

AMDは同期読み込みに関する問題を解決し、 非同期での依存関係の読み込みを可能にするためのJavaScriptのモジュール化の標準を指定するものです。

• 仕様
• 例

仕様

モジュールはdefine関数を使用して定義されます。

define

define関数で、AMDのモジュールをどのように定義するかを決めます。 これは、下記のシグネチャを持つ関数に過ぎません。

define(id?: String, dependencies?: String[], factory: Function|Object);

id

(任意)モジュール名を指定します。

dependencies

(任意)この引数は、このモジュールが他の定義済みのどのモジュールに依存しているのかを示します。 モジュールの識別名の配列を指定します。 省略した場合は、デフォルト値として["require", "exports", "module"]が指定されます。

factory

最後の引数は、モジュールの定義を行うものです。 これは、関数(1度だけ呼び出される)またはオブジェクトが指定可能です。 関数の場合、その戻り値はモジュールのexportされた値にされます。

例

幾つかの例を見てみましょう。

名前が付けられたモジュール

myModuleという名前が付けられたjQueryを必要とする(依存する)モジュールの定義例です。

define('myModule', ['jquery'], function($) {
    // $はjqueryモジュールからexportされたものです。
    $('body').text('hello world');
});

//次のように使用します。
require(['myModule'], function(myModule) {});

注意: webpackでは、名前が付けられたモジュールはローカルでのみ利用可能です。 一方Require.jsでは、名前が付けられたモジュールはグローバルで利用可能です。

匿名(名無し)のモジュール

idの引数を指定しないモジュールの定義例です。

define(['jquery'], function($) {
    $('body').text('hello world');
});

複数の依存性を持つモジュール

複数の依存性を持つモジュールの定義例です。 各依存性のexportが、factory関数に渡されることに注目して下さい。

define(['jquery', './math.js'], function($, math) {
    $('body').text('hello world');
});

値のexport

自身をexportするモジュールの定義例です。

define(['jquery'], function($) {

    var HelloWorldize = function(selector){
        $(selector).text('hello world');
    };

    return HelloWorldize;
});

requireを使用した依存性の読み込み

依存性を示すdependencies引数を省略した場合、 前述したように、デフォルト値として["require", "exports", "module"]が指定されることを思い出してください。

define(function(require) {
    var $ = require('jquery');
    $('body').text('hello world');
});

 Back to top