関連記事
- 勉強会JS編＜1＞ オブジェクト指向言語としてのJavaScriptを理解
- 勉強会JS編＜2＞ クライアントサイドMVCフレームワーク
- 勉強会JS編＜3＞ フロントエンド開発環境構築
- 勉強会JS編＜4＞ yeoman + backbone.model + grunt
- 勉強会JS編＜5＞ yeoman + backbone.collection + backbone.localStorage
- 勉強会JS編＜6＞ yeoman + backbone.view
- 勉強会JS編＜7＞ yeoman + backbone.router
- 勉強会JS編＜8＞ yeoman + backbone.js 実践 - その１
- 勉強会JS編＜9＞ yeoman + backbone.js 実践 - その２
背景
アプリケーションの変遷
- スタンドアロンアプリケーション
- Webアプリケーションではなく、スタンドアロン環境で動くGUIアプリケーション。
- クライアント・サーバ方式（多数のスタンドアロンアプリケーションがDBサーバとSQLで通信）
- シンプルWebアプリケーション
- サーバ側でのプログラミングを中心にしたWebアプリケーション
- 画面遷移とGUIの状態を一致させることで、状態を意識しないプログラム実行環境が実現
- HTMLのGUI部品により、表現力や操作性はスタンドアロンアプリケーションに比べて低下したが、アプリケーション開発の生産性は大きく向上
- リッチWebアプリケーション
- リッチなGUIを持つWebアプリケーション
- 画面遷移はほとんどない。
- 裏でサーバと通信する必要があるデータだけリアルタイムでやりとりしたり、リッチなモーダルダイアログを表示する。
- GUI制御のプログラムをJavaScriptで書く必要がある。
複雑化するクライアント側のJavaScript
- jQueryによってAjaxやDOM操作によるページの更新が簡単になったが、増大していくコードを管理する仕組みは提供していない。
- 大規模なアプリケーションのコードを管理しやすくするためフレームワークが必要になる。
クライアント側フレームワークの種類
- React.js
- Angular.js
- Angular.js 2.0
- Backbone.js
- Vue.js
- Mithril.js
- Aurelia.js
- Knockout.js
- Ember.js
- Riot.js
- Ractive.js
Backbone.js
JavaScriptをより良く構造化するためのフレームワーク
Backbone.jsを使っているところ
- Hulu(http://www.hulu.jp)
- Bitbucket(https://bitbucket.org)
- Disqus(http://www.disqus.com)
- Airbnb(https://www.airbnb.jp)
- Trello(https://trello.com)
- Wantedly(https://www.wantedly.com)
- schoo(http://schoo.jp)
- Sumally(https://sumally.com)
- connpass(http://connpass.com/highlight)
- miil(http://www.miil.jp)
- http://backbonejs.org/#examples
機能
- Key-Value型のデータとカスタムイベントを持つモデル
- 複数のモデルをリスト化し、リストを操作するAPIが整ったコレクション
- HTMLの描画とイベントハンドリングを担当するビュー
- サーバとJSON（JavaScript Object Notation）をやりとりするRESTfulインタフェース
主要なクラス
- Backbone.Model
- Key-Value型のデータ構造
- 通常JSON APIを通じてサーバから受け取ったものを扱う。
- データを処理するための各種メソッドが実装
- サーバサイドとデータのやりとり
- データ更新にカスタムイベントを発火するなど
- Backbone.Collection
- 一連のモデルを扱うためのクラス
- コレクションはモデルを配列のようにグループ化して保持する。
- モデルの追加・削除
- サーバからまとめてモデルを取得
- Backbone.View
- モデルに格納されたデータを表示するためのクラス
- HTMLを描いたり、モデルの更新やDOMのイベントを監視してHTMLを更新する。
- Backbone.Router
- URLのハッシュフラグメント（#以降）を管理するためのクラス
- 特定のページや状態をハッシュフラグメントに対応させて管理することで、ユーザがブックマークしたりパーマリンクで共有するようになる。
参考書籍
- JavaScript徹底攻略
- JavaScriptエンジニア養成読本