:::: MENU ::::

Backbone.MarionetteとRailsを使ってSingle Page Application(SPA)を構築する〜概要紹介編〜


こんにちは、sovaのはき猫です。

sovaではITを使って今の世の中を良くするアプリケーションを作っていきたいと思っています。その第一弾として「クローズドな掲示板アプリ – CircleBoard –」をリリースしました!CircleBoardを使えば、今まで以上に友人や同僚など、周りの仲間との情報共有を活性化する事が出来ると思います。是非使ってみて下さい。

また、現在CircleBoardがApplivのSNSランキングに掲載中です。応援よろしくお願いします!
http://android.app-liv.jp/sns/socialnet/0139/

さて、今回はタイトルにもあるようにBackbone.MarionetteとRuby on Railsを使ってSingle Page Applicationを作る方法について、What’s SPA?という方でも理解出来るようにご紹介します。本稿は長編の第一弾目の概要紹介編です。

Single Page Application(SPA)とは

Single Page Application(以後、SPA)とは、その名の通り、単一ページで構成されたWebアプリケーションのことです。単一ページとはhtmlファイルが1つしかない(index.htmlのみ)ことを意味します。htmlファイルが1つしかないのに、どうやってWebアプリケーションを作るの?と思う方はFlashやJavaアプレットをイメージするといいと思います。FlashやJavaアプレットも1つのhtmlの中でアプリケーションとして動いています。近年、FlashやJavaアプレットが衰退していき、代わりにhtml5(html/JavaScript/css)の登場でデスクトップアプリケーションと同じレベルのアプリをhtmlで作れるようになりました。それをより加速させるのがSPAだと思います。

SPAについては「Single-page application(SlideShare)」や「RIAに代わる技術、実用的SPAについて考える」を読むとより理解が進むでしょう。(どちらもhtml5jエンタープライズ部 副部長の記事でした)

ではここから具体的にhtml5を使ってSPAを作る方法についてご紹介していきます。

html5でSPAを作るには?

html5でSPAを作るにはJavaScriptフレームワークが必須でしょう。中でも、以下のようなJavaScript MVC系ライブラリーを最近は使うと良いみたいです。

  • Backbone.js
  • AngularJs
  • Ember.js
  • Knockout.js

それぞれの違いについては以下のページあたりが参考になります。

今回はこれらの中から以下の理由でBackbone.jsを採用しました。

  • 軽量なフレームワークであるため、困ったらソースコードを読めばわかる
  • 最低限の機能だけが提供されているので、学習コストが低い
  • 周りの人がBackbone.jsを使っていたので、入りやすかった
  • 枯れた技術である

Backbone.jsを実際に使ってみると、何か分からない事があっても最悪ソースコードを読めば分かる程度の量なので、結構助かっています。ただし、Backbone.jsだけだと自由すぎて複数人でプロジェクトを進めていると、コードがカオスになったり、同じようなコードを何度も書かなくてはならず、最終的にオレオレフレームワークを作る必要があったりと、何かと困る事があるそうです。なので、今回はBackbone.jsの追加モジュールであるBackbone.Marionetteを採用することに決定しました。

Backbone.jsとは

Backbone.jsはもはやフロントエンドMVxフレームワークのデファクトスタンダードなライブラリーなので、ご存知の方は多いでしょう。簡単に説明すると、Backbone.jsとはフロントサイドのコードにMVxの構造を与えてくれるフレームワークです。Backbone.jsのようなMVxフレームワークが登場する前までは基本的にフロントエンドはjQueryでゴリゴリ頑張るという感じだったかと思います。しかし、それだとコードの見通しが悪くなり、保守性が著しく悪くなったでしょう。実際に私もjQueryでゴリゴリ書いて失敗した経験はあります。

Backbone.jsについて一番詳しいのは公式サイトなので、詳しく知りたい方はそちらを参照してみると良いでしょう。また、先日O’Reillyから書籍が販売開始されています。私もこの本は読みました。わかりやすくてよい本です。

Bacbone.jsでもViewを定義することが出来ますが、Backbone.Marionetteで基本的にView周りが拡張されているため、Marionetteを使うのであれば、ViewはMarionette、モデル周りは素のBackbone.jsを使う事になります。ここで簡単にBackbone.jsのモデルとコレクションについて紹介します。

Backbone.jsのモデル

Backbone.jsのモデルはsetter/getterでプロパティ変数の値を格納したり取り出したりするような、いわゆる一般的なモデルです。例えば、ユーザ毎にログインを管理するよなアプリケーションであれば、ログインidとパスワードをもつようなユーザモデルを定義する事になります。

Backbone.jsのコレクション

Backbone.jsのコレクションとはモデルのリストです。複数のモデルをリストとしてコレクションを保持する事ができます。バックエンド側のAPIで返す値がモデル単体ではなく、コレクションを返すような場合はモデルを複数生成して配列として管理する必要はなく、Backbone.jsのコレクションとして管理することが可能です。また、Backbone.jsは内部でUnderscore.jsを利用しており、コレクションの操作にUnderscore.jsの各メソッドを使うことが出来ます。

Backbone.Marionetteとは

上記にも書きましたが、Backbone.jsは自由度が高すぎていろいろな使い方が出来てしまうので、以下のようなデメリットがあります。

  • 複数人でコードを書くと、コードに一貫性を持たせるのが難しい
  • 一人でコードを書いても、その日の気分で違うコードを書いてしまったりしてコードに一貫性を持たせるのが難しい
  • 同じようなコードを何度も書かなければならない

そこで、Backbone.jsを拡張して、よく使うような機能を別途提供してくれるライブラリーであるBackbone.Marionette(以下、Marionette)を利用します。

Marionetteの主な機能や概要などは以下のページがわかりやすかったです。

まとめ

今回はSingle Page Applicationを作る前段階として、SPAを作る為のフレームワークの紹介やBackbone.jsとBackbone.Marionetteの紹介を簡単にしました。次回以降、Marionetteをフロントエンド、RailsをバックエンドにおいてSPAを作っていきたいと思います。


So, what do you think ?