Edited at

Rendr入門(2): リクエスト処理の流れ(Router, Controller、View、Template)

More than 5 years have passed since last update.

前回のRendrの概要紹介に続いて、ここではRendrでのリクエスト処理の流れを解説します。

Rendrアプリのスケルトンコード、rendr-app-templateを参考にします。

https://github.com/airbnb/rendr-app-template

※まだざっくりしてるので、頻繁にアップデートされます。不明な点は質問してください。


ルーターによるURLのルーティング

Rendrにリクエストを行うと、ルーターがURLに関連づけられたコントローラを呼び出します。

ルーターの設定は、app/routes.js で行います。Railsのconfig/routes.rbに相当します。

サンプル:

module.exports = function(match) {

match('', 'home#index');
match('repos', 'repos#index');
match('repos/:owner/:name', 'repos#show');
match('users' , 'users#index');
match('users/:login', 'users#show');
match('users_lazy/:login', 'users#show_lazy');
};

match()に渡す引数の一つ目がURLパターン、二つ目がコントローラとアクションを表しています。URLパターンで:parameterと書く事で、マッチした文字列をクエリパラメータをコントローラに渡す事が出来ます。


コントローラ

コントローラは、リクエストに対するデータ取得とビューの呼び出しを担当します。

app/controllersの下にファイルを作成していきます。

ルーティングファイルの'users#index'から呼び出されるのが、下記の関数です。アクション毎に関数を定義します。

サンプル(app/controllers/users_controller.js):

module.exports = {

index: function(params, callback) {
var spec = {
collection: {collection: 'Users', params: params}
};
this.app.fetch(spec, function(err, result) {
callback(err, result);
});
}
}

ここでは、Backbone.Collection形式でデータ(Users)を取得しています。this.app.fetchは、サーバ側とクライアント側でのデータfetchを抽象化するrendrの機能です。実際のデータ・レイヤーについては、話が複雑になるので別途解説します。

fetchが成功したらcallbackを呼び出してビューにデータを渡します。


ビュー

テンプレートへのデータの受け渡しと、クライアント側での動作を記述するのがBackbone.Viewを拡張する「ビュー」の役割です。app/viewsの下にファイルを作成します。

ここでは、ひとまずサーバ側でのデータの受け渡しを見て行きます。

サンプル(app/views/users/index.js):

module.exports = BaseView.extend({

className: 'users_index_view'
});

module.exports.getTemplateData = function(){
data = BaseView.prototype.getTemplateData.call(this);
return data;
};
module.exports.id = 'users/index';

module.exports.idの部分を、コントローラとアクションに対応させます。

ビューに遷移した段階でgetTemplateData()が呼ばれ、コントローラでfetchされたオブジェクトがBackbone.Collection/Backbone.Modelに変換されます。

コントローラで「collection」「model」の名前でfetchしたものは、自動的にビューに渡るデータとして変換されます。つまり、ひとつのビューに対して一つのColleciton/Modelを自動で割り当てる事ができます。この辺は、現在も仕様が激しく変わっているところで、複数のCollection/Modelを受け渡すことができるようになるようです。getTemplateData()を上書きする事で、独自のデータセットを作る事もできます。


テンプレート

テンプレートはapp/templatesの下に作成します。ビューから渡されたデータをレンダリングします。

標準ではHandlebarsを使用していますが、Rendr用にラッパーモジュールを書いて他のエンジンを使う事もできます。

サンプル:

<h1>Users</h1>

<ul>
{{#each models}}
<li>
<a href="/users/{{login}}">{{login}}</a>
</li>
{{/each}}
</ul>


rendr-cli

rendrのプロジェクトファイル作成をコマンドラインから行うツール。実はまだ使った事無いので、使ってからまた詳細を書きます。

https://github.com/technicolorenvy/rendr-cli


まとめ

Rendrにおけるリクエスト処理の流れを解説しました。



  • app/routes.jsでルーティングを行う。


  • app/controllers/*_controller.jsにあるコントローラのロジックが呼び出される。


  • app/views/の下の対応したビューが呼び出されて、テンプレートにデータが渡る。


  • app/templates/の下のテンプレートがレンダリングされる。

という、一連の流れとそれぞれのパートの連携のキーを理解頂けたでしょうか?

これでひとまず、自分の作りたいアプリケーションを実装する「基礎」が分かったと思います。

次回は、データの取得を行うDataLayerについて書く予定です。