JavaScriptを分割&非同期で読み込めるRequireJS
『サニー 永遠の仲間たち』という韓国映画がとても良かったです！minamiです。
サイトで使用するJavaScriptを非同期で読み込むライブラリが昨今増えていますが、その中でRequireJS というライブラリがバージョンアップしたとのことなのでさわってみました。
RequireJSとは
RequireJSは、JavaScriptのファイルやモジュールを非同期でロードできるJavaScriptライブラリです。推奨環境は下記になっています。
- IE 6以上
- Firefox 2以上
- Safari 3.2以上
- Chrome 3以上
- Opera 10以上
ダウンロードする
まずライブラリをダウンロードします。
RequireJS の設置
ダウンロードしたら、以下のように設置します。
├ index.html
└ /js
├ main.js（読み込み管理用jsファイル）
├ require.js
└ /helper
└util.js（読み込んで使用したいjsファイル）htmlファイルに以下の記述でrequire.jsを読み込みます。data-main属性にmain.jsへのパスを記述します。".js"は省略します。
<script data-main="js/main" src="js/require.js"></script>main.js には以下のように記述します。
require(["helper/util"], function(util) {
// helper/util.js の機能を使った処理
});基本的な使い方はこれだけです！簡単ですね。
script タグによる読み込みが1行になる上に、その他のjsを非同期で読みこんでくれるためサイトの高速化にもつながります。
サイトでjQuery を使っている場合は以下をダウンロードして記述します。
<script data-main="js/main.js" src="js/require-jquery.js"></script>main.js（jQueryプラグイン jquery.alpha.js と jquery.beta.js を読み込む場合）
require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
$(function() {
$('body').alpha().beta();
});
});define() でモジュールの設定
とりあえず上記の使い方だけでも便利なのですが、RequireJS にはさらにすごい機能があります。
hoge.js
define({
hoge: "ほげ",
fuga: "ふが"
});define() を使って上記のような記述をしたhoge.js があるとします。それをrequire() を使って読み込んだ側のjsで以下のように記述するとhoge.js で定義した値を取得することができます。
require(["hoge"], function(hoge) {
console.log(hoge.hoge); // "ほげ" と出力される
});require()の第一引数に設定した配列の順に、callback関数に値が渡されます。
define() にはJavaScriptで扱えるすべての値がモジュールとして定義できます（！）しかもdefine() の中でさらに依存するモジュールの読み込みができるので、連鎖して使える上に、読み込む側は使っているモジュールで読み込むjsはどれだっけ？なんてことも考えずにすみます。
hage.js
//hoge.js とfoo.js の内容に依存しているモジュール
define(['hoge','foo'],function(hoge,foo){
return {
foo : foo.foo
fee : foo.fee
huge : hoge.huge
hugo : hoge.hugo
}
});とりあえずのまとめ
非同期読み込みのライブラリは他にも選択肢がありますが、かなり簡潔で強力なライブラリになっているのではないでしょうか。まだまだ機能があるのでもう少し詳しく調べてみたいです。
