[JSを書くなら]複雑になりがちなBackboneJSのモジュールをrequireJSで管理する入門


require.jsとかbackbone.jsとか連携させようと思うと
応用系の記事ばっかり見つかるので、自分で纏めました。

今回は、node.jsで作成した為、以下の構成になっています。

```ファイル構成
|-- app.js
|-- index.html
|-- requires
|   `-- test.js
`-- views
    |-- test1.js
    `-- test2.js
```
http://localhost/index.html でアクセス出来る環境
各ファイルの内容に関しては、後半説明します。



## RequireJSって何？
JSの非同期ローディングとモジュール化を行うライブラリ
詳しくは公式サイト（英語）みてね
http://requirejs.org/

## ではでは、能書きはええから先に進みます。
### index.htmlの中身は？

```index.html
  1 <!DOCTYPE html>                                                       
  2 <html lang="ja">                                                      
  3 <head>                                                                
  4 <meta charset="utf-8">                                                
  5 <title>hello connect</title>                                          
  6                                                                       
  7 <script src="//code.jquery.com/jquery-1.10.2.js"></script>            
  8 <script src="//underscorejs.org/underscore-min.js"></script>          
  9 <script src="//backbonejs.org/backbone-min.js"></script>              
 10 <script src="//requirejs.org/docs/release/2.1.8/minified/require.js"></script>
 11 
 12 </head>                                                               
 13 <body id="body">                                                      
 14 hello RequireJS World!!!                                              
 15 
 16 <div id='view'>                                                       
 17 index.htmlで最初から表示<br/>
 18 </div>
 19 
 20 <!-- #1 注目 -->
 21 <script src="requires/test.js"></script>
 22 </body>                                                               
 23 </html>
```
headで必要なlibraryを書いてます。
jquery, undersocreJS, backboneJS
それに、requireJS、まぁ普通ですよね。

今までと変化があるとしたら、それは
21行目です。</body>の前に書くのは、普通じゃね？

# そう、普通です。

今までと違うとしたらそれは、その中身です。では次で説明します。

### require.js入門の肝

```requires/test.js
  1 console.log('一番最初に実行されます。');                              
  2                                                                       
  3 //依存モジュールを非同期ローディング                                  
  4 require(["views/test1", "views/test2"], function(test1, test2) {       
  5                                                                       
  6   var testView1 = new test1.testView1();
  7   console.log(testView1.render());
  8   console.log((new test2.testView2()).render());                      
  9                                                                       
 10   console.log('一番最後に実行されます。');                            
 11                                                                       
 12 });                                                                   
 13 console.log('さて問題です、いつ処理が行われるしょう？実は二番目なんです(((〃ω〃))')
```

4行目にrequireらしい文章がある事が見て分かるかと
第一引数に記述している["views/test1", "views/test2"]
読み込むjsのパス（拡張子である、.jsは削除）を定義しています。

この関数と引数の意味は、
第一引数の中身を読み込んでから、第二引数を実行するという意味になります。
ですので、今回のケースでは、
view/test1.js
view/test2.js
を読み込みを行った後で、第二引数のfunctionを実行する事になります。

次に気になる箇所は、第二引数のfunciotnに渡してる引数
test1とtest2だと思いますので、次はその説明をします。

### views/test1とviews/test2の中身は一体？？

```views/test1.js
  1 console.log('views/test1.jsが読み込まれました。');
  2 define(["//backbonejs.org/backbone-min.js"], function() {
  3   var testView1 = Backbone.View.extend({
  4     el: 'body',
  5     defaults: {
  6     },
  7     initialize: function() {
  8       console.log('testView1のnewです。');
  9     },
 10     render: function() {
 11       $('#view').append('testView1のrenderです。<br/>');
 12       return 'testView1のrenderです。';
 13     }
 14   });
 15   return {
 16     testView1: testView1
 17   };
 18 });
```

backboneのviewモジュールを定義しているファイルです。
慣れ親しんだ方からしたら、普通ですよね。

ちょっと違うとしたら２行目と１５行目ですよね。
2行目は依存ファイルの定義です、今回はBackboneですので、Backbone.jsのパスを書いてます（色々端折ってます）

15行目は testView1という名前で定義したBackbone View Moduleを　 {testView1:testView1}という形で返却しています。

この返却された物が先ほどのtest1に入る事になります。
test2はこのファイルをコピーして1->2に変更しただけですので、割愛します。

これで、test1,test2の中身が
test1: {testView1:testView1(viewオブジェクト)}
test2: {testView2:testView2(viewオブジェクト)}

である事がわかったと思いますので、

# いよいよ大詰めですぞ

```requires/test.js
  1 console.log('一番最初に実行されます。');                              
  2                                                                       
  3 //依存モジュールを非同期ローディング                                  
  4 require(["views/test1", "views/test2"], function(test1, test2) {       
  5                                                                       
  6   var testView1 = new test1.testView1();
  7   console.log(testView1.render());
  8   console.log((new test2.testView2()).render());                      
  9                                                                       
 10   console.log('一番最後に実行されます。');                            
 11                                                                       
 12 });                                                                   
 13 console.log('さて問題です、いつ処理が行われるしょう？実は二番目なんです(((〃ω〃))')
```

先ほどのrequires/test.jsです。
一つ前の説明で、test1 = testView1(Backbone View Moule)である事がわかりました。
もうそうなればあとは簡単に読み解くだけ

6行目では、testView1をnewしてる
7行目では、testView1のrenderを実行してる
8行目では、testView2のnewとrenderをワンラインで実行してる
だけとご理解いただけたかと思います。

# 最後はブラウザで見てみよう！！

途中途中console.logで処理のフローが分かるようにしています。

では、以下のURLにアクセスしてみましょう
http://localhost/index.html

## ブラウザ結果

```
hello RequireJS World!!!
index.htmlで最初から表
testView1のrenderです。
testView2のrenderです。
```
## console.log結果

```console
一番最初に実行されます。 test.js:1
さて問題です、いつ処理が行われるしょう？実は二番目なんです(((〃ω〃)) test.js:13
views/test1.jsが読み込まれました。 test1.js:1
views/test2.jsが読み込まれました。 test2.js:1
testView1のnewです。 test1.js:8
testView1のrenderです。 test.js:7
testView2のnewです。 test2.js:8
testView2のrenderです。 test.js:8
一番最後に実行されます。 
```
以下の流れで、読み込み、実行されていることが分かるかと思います。
1. requires/test.jsの処理を実行
2. views/test1.jsをロード
3. views/test2.jsをロード
4. requires/test.jsのrequire関数第二引数内の処理実行
5. views/test1.jsをnew
6. views/test1.jsでrender
7. views/test2.jsでnewとrender
8. requires/test.jsのrequire関数第二引数内の処理の最後を実行

ではでは、長くなりましたが快適なモジュール管理生活を！！

※追伸、説明口調ですがあくまでも個人向けメモ（●＾o＾●）

## 変更履歴
13/08/02 15:50
タイトル変更：ナチがち -> なりがち