☰

CommonJS、AMD、RequireJSの関係は？質問する

tag-icon • tag-icon javascript module requirejs amd commonjs
CommonJS、AMD、RequireJSの関係は？質問する

たくさん読んだ後でも、CommonJS、AMD、RequireJSについてはまだ非常に混乱しています。

CommonJS (旧ServerJS )は、言語がブラウザ外で使用される場合にJavaScript仕様 (つまりモジュール)を定義するグループであることは知っています。CommonJS モジュール仕様には、Node.jsやRingoJSのような実装がいくつかありますよね?

CommonJS、Asynchronous Module Definition (AMD)、RequireJSの関係は何ですか?

RequireJS はCommonJSモジュール定義の実装ですか? そうであれば、AMDとは何ですか?

ベストアンサー1

RequireJSはAMD APIを実装します（ソース）。

CommonJS はexports、モジュールの内容を定義するオブジェクトを利用してモジュールを定義する方法です。簡単に言うと、CommonJS の実装は次のように動作します。

// someModule.js
exports.doSomething = function() { return "foo"; };

//otherModule.js
var someModule = require('someModule'); // in the vein of node    
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };

基本的に、CommonJSでは、require()依存関係を取得する関数、exportsモジュールの内容をエクスポートする変数、および依存関係を要求するために使用されるモジュール識別子（このモジュールに関連して問題のモジュールの位置を記述する）が必要であると規定されています（ソース）。CommonJS には、おっしゃったNode.jsをはじめ、さまざまな実装があります。

CommonJSはブラウザを念頭に置いて設計されたものではないため、ブラウザ環境にはあまり適合しません（*これについてはソースがありません。RequireJS サイト。*) どうやら、これは非同期読み込みなどに関係しているようです。

一方、RequireJSはブラウザ環境に合わせて設計されたAMDを実装しています（ソース)。どうやら、AMD は CommonJS Transport 形式のスピンオフとして始まり、独自のモジュール定義 API に進化しました。そのため、この 2 つには類似点があります。AMD の新機能は、define()モジュールがロードされる前に依存関係を宣言できる機能です。たとえば、定義は次のようになります。

define('module/id/string', ['module', 'dependency', 'array'], 
function(module, factory function) {
  return ModuleContents;  
});

つまり、CommonJS と AMD は実装が異なるJavaScriptモジュール定義 API ですが、どちらも同じ起源を持っています。

  • AMD はモジュール依存関係の非同期読み込みをサポートしているため、ブラウザに適しています。
  • RequireJS はAMDの実装ですが、同時にCommonJSの精神(主にモジュール識別子) を維持しようとしています。

さらに混乱を招くのは、RequireJS が AMD 実装であるにもかかわらず、CommonJS ラッパーを提供しているため、CommonJS モジュールをほぼ直接インポートして RequireJS で使用できることです。

define(function(require, exports, module) {
  var someModule = require('someModule'); // in the vein of node    
  exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
});

おすすめ記事