html5jエンタープライズ部 第7回ナイトセミナーのスライド(1/27)

1. SPA
（Single-Page-Application）
における
JavaScriptFrameWork
のお話

2. 自己紹介
酒巻 瑞穂
■業務系のSE屋さん
■活動とか
◆ HTML5j エンタープライズ部（スタッフ）
◆ HTML5j Webプラットフォーム部（スタッフ）
◆ FireFoxOS コードリーティング （わるだくらみ補佐）
Twitter：https://twitter.com/SakamakiM
Facebook：https://twitter.com/SakamakiM

3. Single Page Application

4. 単一のHTMLファイル？

5. 一度の描画で全部取る？

6. 「Page」とは何なのか？

7. SPA描画の流れ

8. SPA描画の流れ
画面

9. SPA描画の流れ
画面
コンテンツ

10. SPA描画の流れ
画面
コンテンツ
断片化したHTMLファイル

11. SPA描画の流れ
View
画面
使用するユーザーや
状況により変わる！
コンテンツ
Page
ほぼ決まっている
基礎フレーム部分
（プレースホルダー）
断片化したHTMLファイル

12. PageとViewを分ける意味
View
Page

13. 再利用性とパフォーマンス
ナビゲーション
メニュー
Page
常に表示
設定ページ
RSS ページ
あまり
使わない

14. 状況/目的による切り分け
ナビゲーション
メニュー
Page
Offline
でも使う
設定ページ
RSS ページ
Network
必須

15. SPAにおけるServerの役割

16. SPAにおけるServerの役割
UIの処理を持たない

17. SPAにおけるServerの役割
UIの処理を持たない
状態を持たない

18. SPAにおけるServerの役割
UIの処理を持たない
状態を持たない
リソースの提供

19. SPAにおけるClientの役割
UIの処理を持たない
ルーティング処理
クライアント側で
ページ遷移を求められる。
（ページの切り替えはクライアントで！）
状態を持たない
リソースの提供

20. SPAにおけるClientの役割
UIの処理を持たない
ルーティング処理
クライアント側で
ページ遷移を求められる。
（ページの切り替えはクライアントで！）
状態を持たない
ビジネスロジックと状態
クライアント側でビジネスロジックと
データ、状態の管理を行う。
リソースの提供

21. SPAにおけるClientの役割
UIの処理を持たない
ルーティング処理
クライアント側で
ページ遷移を求められる。
（ページの切り替えはクライアントで！）
状態を持たない
ビジネスロジックと状態
クライアント側でビジネスロジックと
データ、状態の管理を行う。
リソースの提供
データの取得
Ajax、またはWebSocket等の
リソース取得手段が必要

22. UIとBLS
の同期
BLS
描画
（UI）
コンテンツ
リソース
アクセス
ルーティング
状態管理

23. コンテンツを組み合わせると
同じような処理が多数発生！！
BLS
通信
BLS
状態管理
通信
Route
Route
BLS
通信
状態管理
状態管理
処理

25. ExtJS

26. 軽い説明
ダウンロード：http://angularjs.org/
APIドキュメント：http://docs.angularjs.org/api/
ライブラリ：http://ngmodules.org
ライセンス：MIT
ダウンロード、APIドキュメント、ライブラリ：http://backbonejs.org/
ライセンス：MIT
ExtJS
ダウンロード：https://www.sencha.com/products/extjs/download
APIドキュメント：http://docs.sencha.com/extjs
ライブラリ：https://market.sencha.com/
ライセンス：GPLv3

27. 今回のお題！
（MVP or MVC）
DOM
(UI)
Template
View
Data-binding
router
Presenter
Or
Controller
Model
ServerAccess
Ajax
WebSocket

28. 今回のお題！
（MVP or MVC）
DOM
(UI)
Template
Domへのアプローチ
View
Data-binding
router
Presenter
Or
Controller
Model
ServerAccess
Ajax
WebSocket

29. 今回のお題！
（MVP or MVC）
DOM
(UI)
Template
Domへのアプローチ
ルーティング
状態管理
View
Data-binding
router
Presenter
Or
Controller
Model
ServerAccess
Ajax
WebSocket

30. 今回のお題！
（MVP or MVC）
DOM
(UI)
Template
Domへのアプローチ
ルーティング
状態管理
ビジネスロジック
View
Data-binding
router
Presenter
Or
Controller
Model
ServerAccess
Ajax
WebSocket

31. 今回のお題！
（MVP or MVC）
DOM
(UI)
Template
Domへのアプローチ
ルーティング
状態管理
ビジネスロジック
View
Data-binding
router
Presenter
Or
Controller
Model
モデルとビューの同期
ServerAccess
Ajax
WebSocket

32. 今回のお題！
（MVP or MVC）
DOM
(UI)
Template
Domへのアプローチ
ルーティング
状態管理
ビジネスロジック
View
Data-binding
router
Presenter
Or
Controller
Model
モデルとビューの同期
外部リソースへのアクセス
ServerAccess
Ajax
WebSocket

33. DOM
(UI)
Template
（カスタムHTML）
Domへのアプローチ
★カスタムHTMLテンプレート
Angularでは一度テンプレートと呼ばれる
ベースHTMLを読み込み、コンパイル
することで、JavaScriptに密接に紐付く Controller
DOMツリーし、画面描画します。
(directive)
View
(compileDOM)
★独自タグでイベントを定義するメリット
DataBinding
controllerで定義されたビューイベントは命令的です。
viewと完全に切り離されているため、再利用性とテス
トコードからのアプローチが容易です
ngRouter
Presenter
(Controller)
Model
(POJO)
対して directiveで定義されたイベントは宣言的であり
HTML自体が宣言的な言語であるため、自然な流れ
でHTMLへの独自拡張、欠点を補うことができます。
ServerAccess
(Angular.$http)
(Factory)

34. DOM
(UI)
Template
（カスタムHTML）
ルーティング
AngularJSチームが作成しているngRouteを使う
ことでルーティング処理が可能になります。
より高機能なAngularUI Routerと言う
サードパーティ製ライブラリもあります。
Controller
(directive)
View
(compileDOM)
DataBinding
ngRouter
Presenter
(Controller)
状態管理
cookieについては、AngularJSチームが作成した、
cookie制御用のライブラリAngular-cookieがあり
ます。
Model
(POJO)
localstrageの制御については、
AngularLocalstrageというサードパーティ製ライブ
ラリがあります。
ServerAccess
(Angular.$http)
(Factory)

35. DOM
(UI)
Template
（カスタムHTML）
ビジネスロジック
AngularのビジネスロジックはServiceを用いてビジネスロ
ジックを実装します。
Serviceには色々ありますが、それぞれ用途に応じて使い分
けます。
格納されるのはJavaScriptObjectです。
Controller
(directive)
factory
シンプルなBusinessLogicの実装、Service登録するまでも
ない軽量なBLSの定義ができる。
service
サービスの登録ができる、モジュールを横断した使用が可能
provider
初期化時の振る舞いなど、細やかな制御ができるサービス
を登録することができます。
View
(compileDOM)
DataBinding
ngRouter
Presenter
(Controller)
Model
(POJO)
vlaue
Moduleを横断してつかえるJavaScriptObjectを定義できま
す
constant
Moduleを横断してつかえる値の定義ですが、valueと違い、
上書きできません。
ServerAccess
(Angular.$http)
(Factory)

36. DOM
(UI)
Template
（カスタムHTML）
モデルとビューの同期
Angularには双方向バインディング機能があ
ります。
そのため、開発者は、ほぼ自然に
Controller
Viewとロジックの同期を取ること
(directive)
ができます。
しかしながら、この双方向バインディングはパ
フォーマンスなどの問題が発生する可能性が
あります。
View
(compileDOM)
DataBinding
ngRouter
Presenter
(Controller)
Model
(POJO)
ServerAccess
(Angular.$http)
(Factory)

37. DOM
(UI)
Template
（カスタムHTML）
外部リソースへのアクセス
Ajaxでの遣り取りは、単純なものであれば、
$Httpを使います。
Ajax通信部分を、モジュール内で
再利用可能なコンポーネントとして
定義したい場合、ngResourceを使い
プロバイダとして定義できます。
Controller
(directive)
WebSocketを使用する場合は、Factory等で再
利用可能な形で定義して使用する事が一般的
です。
View
(compileDOM)
DataBinding
ngRouter
Presenter
(Controller)
Model
(POJO)
ServerAccess
(Angular.$http)
(Factory)

38. DOM
(UI)
Template
(html、ejs)
Domへのアプローチ
DOMの構築はBackbone.VIewを用い
て定義します。
Bacbone.View内のrenderでDOM要素
の構築を行うことができます。
View
(Backbone.View)
しかしながら、より簡単にするために、追
加のライブラリを用いてテンプレートエン
ジンを使うことが一般的です。
Backbone.StickIt
テンプレートエンジンは様々なものが用
意されており、目的に応じてある程度選
択できます。
Backbone.
Router
Presenter
(JS Object)
Model
(Backbone.Model)
ServerAccess
(Backbone.sync)

39. DOM
(UI)
Template
(html、ejs)
ルーティング
Backbone.Routerを使うことで
基本的なルーティング処理は実現できます。
しかし、Backbone.Routerには状態管理やネス
トしたルーティング管理を持たないため、
状態管理を行いたい場合はサードパーティ製ラ
イブラリを用いる必要があります。
状態管理
状態の制御、cookieとLocalstrageの管理です。
制御には、サードパーティ製ライブラリを用いま
す。
Jqueryライブラリのjquery.cookieと
BackboneLocalstrageが有名です。
View
(Backbone.View)
Backbone.
Router
Backbone.StickIt
Presenter
(JS Object)
Model
(Backbone.Model)
ServerAccess
(Backbone.sync)

40. DOM
(UI)
Template
(html、ejs)
ビジネスロジック
BackboneはビジネスロジックはModelと
Collectionを用いて定義します。
・Backbone.Mode
データのCRUDと保持を担当
View
(Backbone.View)
Backbone.StickIt
・Backbone.Collection
Modelの集合体
簡単なアプリケーションであればプレーンな
Backboneでも問題ないですが、
規模のおおきな開発では定形コードの削減や
コード全般の汚染を防ぐため
Backbone.Marionetteを使うのをお勧めしま
す。
Backbone.
Router
Presenter
(JS Object)
Model
(Backbone.Model)
ServerAccess
(Backbone.sync)

41. DOM
(UI)
Template
(html、ejs)
モデルとビューの同期
Backboneは単体ではデータバインディ
ング機能を持っていません。
もし、データバインディングが必要となる
場合は、サードパーティ製ライブラリ
（Backbone.StickIt等）を使うことで実現
できるようになります。
しかし、明示的に定義していかなければ
ならないため、AngularJSよりはコードが
煩雑になります。
View
(Backbone.View)
Backbone.
Router
Backbone.StickIt
Presenter
(JS Object)
Model
(Backbone.Model)
ServerAccess
(Backbone.sync)

42. DOM
(UI)
外部リソースへのアクセス
Template
(html、ejs)
View
(Backbone.View)
Ajax通信を行う場合は、Backbone.syncにAjax
通信の機能があるのでそれを使用します。
Backbone.StickIt
WebSocket通信を行う場合はBackbone.syncを
オーバーライドして使います。
syncの仕様
http://backbonejs.org/#Sync
Presenter
(JS Object)
Model
(Backbone.Model)
ServerAccess
(Backbone.sync)

43. ExtJS
DOM
(UI)
Template
(Ext.Template)
Domへのアプローチ
DOMの構築はExt.Componentを継承した
様々なレイアウト用クラスが使用できます。
一部例）
Ext.button.Button(ボタン)
Ext.grid.Panel(Grid)
Ext.form.Label(ラベル)
Ext.Template
DOMを容易に生成する為のクラスです。
文字列、またはJSON形式で定義します。
Ext.XTemplateはExt.Templateを継承したク
ラスとなっており、比較演算子や条件分
岐、Ext.view.Viewを中継してExxt.XTemplate
とExt.data.Storeとの紐付けも可能です。
View
(Ext.Component)
Controller
(Ext.app.Controller)
Model
(Ext.data.Model)
ServerAccess
(Ext.data.Ajax)
(Ext.ux.WebSocket)

44. ExtJS
DOM
(UI)
Template
(Ext.Template)
ルーティング
ExtJSはMVCフレームワークのため、MVP特
有のルーティング機能は提供されていません。
Routerを使用したい場合、ユーザーエクステン
ションのExt.ux.Routerと言う軽量ライブラリが
存在します。
View
(Ext.Component)
Controller
(Ext.app.Controller)
状態管理
Cookies、Localstorageを用いて状態管理を行
う場合、ExtJSではExt.state.Providerクラスを
継承した以下の機能を使います。
Ext.state.CookieProvider
クッキー用の状態保持クラス
Ext.state.LocalStorageProvider
Localstrage用の状態保持クラス
Model
(Ext.data.Model)
ServerAccess
(Ext.data.Ajax)
(Ext.ux.WebSocket)

45. ExtJS
ビジネスロジック
（モデルとビューの同期）
ExtJSのビジネスロジックはExt.data.Model
と、Ext.data.Storeで成り立ちます。
DOM
(UI)
Template
(Ext.Template)
View
(Ext.Component)
Ext.data.Model
データの保持とCRUDを担当する。
Controller
(Ext.app.Controller)
Ext.data.Store
Modelの集合体
Ext.Componentを継承したViewに当たる機能
は、内部にStoreManagerを所持してお
り、StoreオプションにModel（Store）を設定す
るとこでViewとModelの紐付きを行えます。
Model
(Ext.data.Model)
ServerAccess
(Ext.data.Ajax)
(Ext.ux.WebSocket)

46. ExtJS
DOM
(UI)
Template
(Ext.Template)
外部リソースへのアクセス
ExtJSにはAjax通信用のクラスが用意されて
います。
Ext.Ajaxを用いた柔軟な通信の他
に、Ext.data.Readerを用いてModelを生成す
るExt.data.AjaxProxyや、Rest通信用の
Ext.data.RestProxyなど、目的に応じた様々な
クラスが用意されています。
WebSocket通信に関しては、ユーザーエクス
テンションでExt.ux.WebSocketがあります。
View
(Ext.Component)
Controller
(Ext.app.Controller)
Model
(Ext.data.Model)
ServerAccess
(Ext.data.Ajax)
(Ext.ux.WebSocket)

47. 日本語書籍
➔
➔
➔
AngularJS
✔ はじめてのAngularJS
Backbone
✔ Backbone.jsガイドブック
✔ Backbone.jsアプリケーション開発ガイド＠ 2/7
Sencha ExtJS
✔ ExtJS ４ 実践開発ガイド
✔ ExtJS ４ 実践開発ガイド２

48. 日本語のAPI（Web）
➔
➔
➔
AngularJS
✔ 日本語のAPI
✔ http://js.studio-kingdom.com/angularjs
Bakcbone
✔ 日本語のAPI
✔ http://backbonejs.apidocs.jp/
ExtJS
✔ xenophyで翻訳されたものがあり
✔ http://docs.xenophy.com/ext-js/4-0/

49. AngularJS
ルール：フレームワーク寄り 学習コスト：高い MV～：MVP
破壊的なUI/Viewの変更にも対応しやすい。
デザイン等が決まってなく、素早くプロトタイプしながら形を作り出していく場合に有用
全体的に依存性注入などにより、ロジック全体がフレームワークのルールに依存する形になるので、わ
りと統制が取れた仕組みになりやすい。
Backbone
ルール：プロジェクト内で作る 学習コスト：低い MV～：MVP & MVC
MVP、MVC両方の手段が取れる
JSフレームワークなども選択肢が多いため案件に合わせた最適なカスタマイズができるのが良い
既にフロント開発に携わっている場合、そのノウハウを引き継げる為、導入の敷居はさらに低くできる。
ExtJS
ルール：フレームワーク重視 学習コスト：高い（xenophyによるトレーニングあり） MV～：MVC
MVCパターン重視の為、破壊的なUI/VIew変更がある場合は向かないが、ビジネスロジックが重要に
なる場合は堅牢なものが作れるため、とても相性が良い。
学習コストは高め、導入の敷居は高いが、xenophyによるコンサルティングからトレーニングまで有償
でうけられる為、要員が確保できない場合は良い。
サポート付き、かつフレームワークのルールが強いので長期の保守、運用を考えると向いている。

50. ご清聴ありがとうございました。