Backbone.jsについて

はじめに

仕事でBackbone.jsというフレームワークを初めて触れるようになりました。自分の理解をもっと深めるために調べたことをメモとして残します。

Backbone.jsとは？

Backbone.jsの公式ホームページに入ると紹介がこのように書いてます。

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Backbone.jsは、クライアント側のWebアプリケーション開発に構造的な制御方法(MVCモデル)を提供するJavaScriptフレームワークです。

MVCモデルに合わせて開発することで、コードの役割を分けて作成かつ管理することができるようになります。こうすると、プログラムの構造を体系化できます。Backbone.jsで開発する際は次の項目に従ってコードを作成するようになります。

Model

MVCのModelのことです。データをJavaScriptオブジェクト（JSONとみなしても良いです）として持っています。

View

MVCのViewのことです。画面に表示されるUIです。Viewはユーザーから渡されたイベントを処理するハンドラーも持っています。こうみるとViewがControllerの役割もしているように見えますね。

Collection

Modelオブジェクトを集めたものをCollectionと言います。Collectionの中にはURLという属性があって、ModelたちがどのURLにPOST/GET/DELETE/PUTされるかを決めます。

また、Viewとも連携してあるので、Modelの値が変わったときに手軽くViewを更新することができるようにします。

Router

MVCのControllerのことです。location.hash(URLで＃の後に出てくるやつ)の変更に対する処理を行います。

なぜBackbone.jsを使うのか？

Backbone.jsは便利な機能をたくさん持っています。

1. UIの更新

Backbone.jsを使うと、CollectionとViewが連携されてデータに変化があった際に画面のUIを更新する作業を便利に行うことができます。

2. Single Page Applicationの開発が楽になる

Routerはlocation.hashの変更を処理すると上記しましたが、これはSingle Page Applicationの開発をすごく楽にできるようにします。

Single Page Applicationは、「ひとつのHTMLファイルになっているアプリケーション」を意味していると言えます。

基本的には、HTMLファイル１つが１つのViewを意味していましたが、location.hashを使うと１つのHTMLファイルでもブックマークができるようURLを変更しながら様々なViewを見せることができます。他のViewを表示している時にHTMLファイルが変わらないので画面のリロードをする必要がなくなり、UXでのメリットがあると言えます。たとえば、Twitterなどがそのようになっています。

3. CRUD

Backbone.jsはサーバー側との連携関連機能もあって、データのCRUD(削除、照会、更新、削除)を楽に実装することができます。

4. Underscore.js

Backbone.jsはUnderscore.jsというライブラリを依存しているので、Backbone.jsを使おうとしたら必ずUnderscore.jsも使わなければなりませんが、このUnderscore.jsにも便利な機能がたくさんあります。

5. jQuery

Backbone.jsはjQueryも一緒に使うことができます。なので、既存のjQueryユーザーもBackbone.jsを使うとしたら、問題なくそのまま使えます。jQueryで使っていたコードをそのまま持って行って、プログラムの構造だけBackboneに合わせて構成すると良いでしょう。BackboneのViewを作成する際にjQueryのセレクターをそのまま使うことができるので楽です。

終わりに

自分は基本的なHTML、CSS、JavaScript以外のフロントエンド技術は全く初めてだったので、Backboneも初耳でした。実はBackboneも結構古い技術だと見たので、この記事を書いてもいいのかな・・とは思ってましたが、やっぱり自分の勉強のためにも記録として残したほうが良いと判断し、間違っている内容もあるかもしれませんが、自分が調べながら理解した内容を簡単に書いてみました。

この記事が私のように初めての方々にも役に立つと嬉しいと思います。

ありがとうございました。

参考

Backbone.js

Getting Started with Backbone.js

その他素晴らしい記事たち(...)