勉強会JS編＜2＞ クライアントサイドMVCフレームワーク

関連記事

• 勉強会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エンジニア養成読本