requirejsrequirejsを使い始める
備考
RequireJSは、javascriptファイルを非同期に（つまりブロックせずに）ロードし、複数のjavascriptファイル間の依存関係を管理するために使用される非同期モジュール（AMD）APIの実装です。また、開発者が論理的に別個のコードを維持できるようにしながら、展開用のスクリプトファイルを結合および最小化するための最適化ツールも含まれています。
こんにちは世界
次の例は、RequireJSの基本的なインストールとセットアップを示します。
index.html という名前の新しいHTMLファイルを作成し、次の内容を貼り付けます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello RequireJS</title>
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
<!-- place content here --->
<script>
requirejs(["scripts/say"], function(say) {
alert(say.hello());
});
</script>
</body>
scripts/say.js 新しいJSファイルを作成し、次の内容を貼り付けます：
define([], function(){
return {
hello: function(){
return "Hello World";
}
};
});
プロジェクトの構造は次のようになります。
- project
- index.html
- scripts
- say.js
ブラウザでindex.html ファイルを開くと、「Hello World」で警告が表示されます。
説明
require.jsスクリプトファイルをロードします。
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>sayモジュールをscriptsフォルダから非同期でロードします。 （モジュールを参照するときに.js拡張子は必要ありません。）返されたモジュールはhello()が呼び出された関数に渡されます。<script> requirejs(["scripts/say"], function(say) { alert(say.hello()); }); </script>sayモジュールは、1つの関数hello定義された単一のオブジェクトを返します。define([], function(){ return { hello: function(){ return "Hello World"; } }; });
ネストされた依存関係を持つHello World
次の例では、 define() 関数を使用して複数の依存関係をデモンストレーションすることにより、 Hello World 拡張していdefine() 。
index.html という名前の新しいHTMLファイルを作成し、次の内容を貼り付けます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello RequireJS</title>
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
<!-- place content here --->
<script>
requirejs(["scripts/say"], function(say) {
console.log(say.hello("english"));
console.log(say.hello("spanish"));
console.log(say.hello("french"));
});
</script>
</body>
scripts/say.js 新しいJSファイルを作成し、次の内容を貼り付けます：
define(["scripts/translations"], function(translations){
return {
hello: function(language){
return translations[language].hello + " " + translations[language].world;
}
};
});
scripts/translations.js 新しいJSファイルを作成し、次のコンテンツを貼り付けます。
define([], function(){
return {
"english": {
hello: "Hello",
world: "World"
},
"spanish": {
hello: "Hola",
world: "Mundo"
},
"french": {
hello: "Bonjour",
world: "Le Monde"
}
};
});
プロジェクトの構造は次のようになります。
- project
- index.html
- scripts
- say.js
- translations.js
ブラウザでindex.html ファイルを開くと、コンソールから出力されます。
Hello World
Hola Mundo
Bonjour Le Monde
説明
require.jsスクリプトファイルをロードします。
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>sayモジュールをscriptsフォルダから非同期でロードします。 （モジュールを参照するときに.js拡張子は必要ありません。）返されたモジュールはhello()が呼び出された関数に渡されます。<script> requirejs(["scripts/say"], function(say) { console.log(say.hello("english")); console.log(say.hello("spanish")); console.log(say.hello("french")); }); </script>sayモジュールは、1つの機能を持つ単一のオブジェクトを返すhello定義されたが、この場合には、我々は、依存関係（定義されているscripts/translations）、私たちはそこから翻訳を引っ張ってきます。define(["scripts/translations"], function(translations){ return { hello: function(language){ return translations[language].hello + " " + translations[language].world; } }; });translationsモジュールは、単にさまざまな単語の翻訳を含むオブジェクトを返します。define([], function(){ return { "english": { hello: "Hello", world: "World" }, "spanish": { hello: "Hola", world: "Mundo" }, "french": { hello: "Bonjour", world: "Le Monde" } }; });
非AMDライブラリの組み込み
すべてのライブラリがAMDとRequireJSのdefine() 関数と互換性のある方法で定義されているわけではありません。著者は、これらの依存関係を設定するためのshim ディレクティブをshim ことでこれに対処しました。
1つの例は、jQuery UI Layout Pluginを使用することです。そのプラグインはjQueryに依存します。次のように設定することができます：
requirejs.config({
paths: {
'jquery': '../path/to/jquery.min',
'jquery.layout': '../path/to/jquery.layout.min'
},
shim: {
'jquery.layout': {
deps: ['jquery']
}
}
});
そして、次のようなレイアウトモジュールでそれを使用します：
define(['jquery', 'jquery.layout'], function ($, layout) {
$('body').layout();
});
data-mainエントリポイントの使用
RequireJSでは、 <script> タグ内のdata-main 属性を使用することで、アプリケーションへの単一のエントリポイントが可能です。
<script type="text/javascript" data-main="scripts/main" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
ロード時に、RequireJSはdata-main 属性を探し、主スクリプトタグをasync 属性が設定されたDOMに挿入します。このファイルは、アプリケーションを起動する前に任意の構成を実行する必要があります。
例えば：
// contents of scripts/main.js
require.config({
waitSeconds: 10,
paths: {
jquery: 'libs/jquery-1.4.2.min'
}
});
requirejs(["jquery", "libs/say"], function($, say) {
var $body = $('body');
$body.append( $('<p/>').text(say.hello("english")) );
$body.append( $('<p/>').text(say.hello("spanish")) );
$body.append( $('<p/>').text(say.hello("french")) );
});
