Backbone.jsの特徴とできることをまとめてみた

JavaScriptでは基本的にデータベースを活用した機能やアプリケーションを実装することはできません。

しかし、高度なアプリケーションの開発が行われるようになると、データベースの利用は不可欠です。

そのためのひとつの方法として利用されるの「Backbone.js」ですが、本記事ではこのBackbone.jsがどのような機能を持ち、どのような用途で使うことができるのかについて紹介します

Backbone.jsの特徴

backbone.js

Backbone.jsは、オープンソースのフレームワークで、以下のサイトで公開されています。

 

https://backbonejs.org/

 

開発用の「Development Version」、正式版の「Production Version」、開発中の最先端バージョンである「Edge Version」がありますが、特に理由がなければProduction Versionをダウンロードして使います。

Backbone.jsを利用する際には、jQueryやUnderscore.jsといった別のライブラリも必要になりますので、必要に応じてダウンロードしたりCDNを利用するようにしてください

Backbone.jsは、MVCフレームワークにおけるModelを可能にするフレームワークです。

データベース側にRESTサービスを指定することによって、必要なデータにアクセスすることが可能になっています。

そのため、データベース側でRESTの設定が必要です。

Backbone.jsでは、データベースを使う必要がない場合だとしてもMVCフレームワークに沿った形でWebサイトやアプリケーションが気軽に作れるのも特徴です。

Backbone.jsでは、JSON形式でデータを記述して扱います。以下のような形でJavascriptのコードを入力して使います。

var People = Backbone.Model.extend({
defaults: {name: Taro_Yamada, age: 28}
function() {alert('My name is ' + this.get('name') + '! My age is ' + this.get('age')  + ‘years old.'); } )}

このくらいのデータ量ならデータベースは不要ですが、こうしたデータを複数管理し、配列で返してくれるCollectionの機能や、モデルを継承させて新規データの追加ができる機能は規模が大きくなるほど便利です。

 

記述がシンプルであるため、学習コストが低く、Angularなどの主流MVCフレームワークの前学習としての利用にも向いています。

Backbone.jsでできること

backbone.jsでできること

Backbone.jsでは次のようなことが可能です。

おすすめのプログラミングスクール【無料あり】エンジニアが解説!プログラミングスクールおすすめ5選

MVCモデルの基本を理解できる

Backbone.jsそのものは2010年に登場した少し古いフレームワークであるため、他のフレームワークへの移行が進んでいます。

しかし、2020年現在、主流になっている多くのJavaScriptフレームワークはBackbone.jsと同じMVC(Model-View-Controller)モデルで設計されています。

フレームワークが多機能になるほど覚えることが多くなり、こうしたモデルの概念を理解することが難しくなりますが、Backbone.jsはMVCモデルが非常にシンプルに実現されています。

そのため、MVCモデルの基本的な考え方や構造などを覚えるために最適です。

初心者はAngularなどの高機能なフレームワークを使い始める前に学習してみるとよいでしょう。

コードの記述を簡略化できる

jQueryなどをインストールできることもあり、JavaScriptの実行に必要な記述を大幅に減らすことができます。

開発規模や設計によってはかえって冗長になることもありますが、決まったテンプレートにデータを書き込むスタイルのぺージではコードの見通しがずっと良くなります

配列が使いやすい

Backbone.jsではModelやCollectionをJSON形式で記述することでわかりやすく配列や多次元配列を作成することが可能です。

データベースを使うほどではない内容なら、配列を使うことで演算や処理がずっと楽になります。

既存のデータベースとの接続が可能

Backbone.jsではRESTfulな(REST形式に対応した)インタフェースやサーバーとの通信用関数が用意されています。

これらを利用することによって、ローカルや離れたサーバーとの通信が可能で、データベースからのデータの受け渡しを利用したアプリケーションの構築が可能です。

SPA(シングルページアプリケーション)のフロントエンド開発での利用例が多く見られます

Backbone.jsを使ってつくれるサービス

backbone.jsで作れるサービス

Backbone.jsを使うことで、JavaScriptだけでは実現が難しかったWebサービスの作成が可能になります。

ToDoリスト

ToDoリストはBackbone.jsの書籍や学習サイトでもよく実習の題材に挙げられます。

慣れた人なら30~60分ほどで実用に足るしっかりしたものが作成可能です。

プロジェクト管理ツール

ToDoリストをより大規模にすることで、複数人で利用するプロジェクト管理ツールを作成することもできます

データをどこに格納するかさえ検討できれば、ローカルネットワーク内でもクラウド上でも使えるサービスを作成できます。

ポートフォリオ作成・保存サービス

デザイン系の職種であ、自分の制作物をまとめて紹介するための「ポートフォリオ」の作成をすることがあります。

Backbone.jsを利用することで管理しやすく、閲覧しやすいポートフォリオ管理サービスを作成できます。

ネットショップ

ネットショップではBackbone.jsのさまざまな利用方法があります。

ページを遷移させることなく、データベースからデータを取り出して画面に表示させることが可能です。

無限スクロールと相性が良いため、さまざまなサービスで利用されています。

その他

その他、多くの利用例がBackbone.jsのマニュアルに参考例として紹介されています。

すでにサービスが終了しているものも見られますが、ウォルマートやAirbnb、Huluなど世界的に有名なサービスでもBackbone.jsが使われていたことがわかります。

 

参考:Backbone ドキュメント日本語訳(Examples)

https://github.com/enja-oss/Backbone/blob/master/docs/Examples.md

Backbone.jsのまとめ

まとめ

Backbone.jsはMVCモデルを利用したJavaScriptフレームワークとしては初期のものであり、低い学習コストでMVCモデルについて理解できます。

他にも便利なフレームワークが増える中で、その存在感は薄れつつありますが、小~中規模のWeb開発であればまだまだ活用されるシーンも多いです

フロントエンド、サーバーサイドを問わず、学習しておくとよいライブラリのひとつといえるでしょう。