社内の勉強会で使ったRequire.jsについての資料 とりあえず動かせる感じまでの内容です。

1. About
Require.js
Kyohei Morimoto

2. アジェンダ
- Require.jsって？
- 何ができるか？
- 使い方
- 課題

3. 現状の問題点
‣ フロントエンド開発の複雑化
‣ 多量のライブラリが必要
（jquery underscore backbone + plugins）
‣ モジュール開発
‣ ブラウザで適切なライブラリは4∼8程度
‣ 全部読み込むまではブラウザは表示されない

4. index.
html
app.js
lib3
lib4
lib1
lib2
mod1
mod2
mod3
‣ 読み込む量が多くて大変
‣ パフォーマンスも悪い
‣ ※CAは10000行のJSをBB化した
ら、90ファイルになったそうな…

5. app.js
lib3 lib4
lib1
lib2
mod1
mod2
mod3
‣ 読み込み順番や依存関係がある
‣ 本来読み込まなくて良い物まで読み
込んでいたりする
‣ 特にSPA

6. Require.js

7. app.js
lib3 lib4
lib1
lib2
mod1
mod2
mod3
‣ 必要なライブラリやモジュールだけ
を読むようにしてくれる
‣ 読み込むものをまとめてくれる

8. 使い方
<script data-main="app" src="js/vender/require.js"></script>

9. 使い方:Requireの設定
requirejs.config({
baseUrl : 'js',
paths : { // 読み込み先のパスを設定できる
// '/'または'http'から始まると絶対パスで参照する
jquery : [
'lib/jquery.min',
],
underscore : [
'lib/underscore-min',
],
backbone :'lib/backbone-min'
},
shim : { //AMDに対応してないものを対応させる
underscore : {
exports : _' //jqueryだったら、$
},
}
});

10. おさらい
‣ baseUrl:ルートのパスを設定
‣ paths：で利用するライブラリのpathsを設定する
‣ shim:AMDに対応してないライブラリを対応させる

11. 使い方:モジュールの定義
define(['backbone'], function (Backbone) {
console.log(Backbone === window.Backbone); // true
});

12. 使い方:モジュールの定義(何か値を返す)
define(['backbone'], function (Backbone) {
var myModule = Backbone.Model.extend({});
return myModule
});

13. おさらい
define([ 使うライブラリ ],function(ライブラリ名){
//処理
});
!
‣ 読み込み時に必要なライブラリを設定する

14. 使い方:モジュールの呼び出し
require([ foo ],functions(foo){
foo.doSomething();
});

15. おさらい
‣defineとよく似てる
‣defineは依存で、requireは取得のイメージ
‣clickイベントなどに紐付けると後からファイルを取
得することができたりする

16. Demo

17. 課題

18. app.js
jquery
index.
html
Back
Bone
under
Score
moment
highcha
rts
view.js
model.jsclickEvent
alert( Hello World )
各種依存関係