Backbone.jsの基礎知識

目的

就業先でBackbone.jsが必要となり勉強を始めたのですが、Backbone.jsに関する日本語の記事が少なく、、、(´・ω・｀)困ったので自分用にまとめていきます。

目次

• Backbone.jsとは
• Backbone.jsの特徴
• Backbone.jsの導入方法
• Backbone.jsにおけるMVCの機能
• 参考文献

Backbone.jsとは

JavaScript によるアプリケーションフレームワークです。
大規模なアプリケーションを作る時に、効率的に開発できるツールになっています。

Backbone.jsの特徴

• フロントエンドで動作する必要最小限のシンプルなフレームワーク
• 他のフレームワークと比べて設計の自由度が高い
• JavaScriptプログラムをModel・View・Controllerの3つに分けて記述する
• 大規模開発の場合でもプログラム全体を一定のルールに従って管理できる
• nderscore.jsとjquery.jsに依存している

先人が分かりやすくまとめてくださっている記事を発見したので、詳細はこちらを参照ください。

個人的に大きな特徴としては、nderscore.jsとjquery.jsに依存していることと、JavaScriptプログラムをModel・View・Controllerの3つに分けて記述することだと感じました。

underscore.jsとjqueryを知らんと使えんのかい、、、が最初の感想で、私はjqueryの復習とunderscore.jsの勉強から始まりました。(ﾉД`)ｼｸｼｸ
また、JSファイル内でもMVCモデルのような概念で記載するのか、、、というのが新鮮に感じました。

Backbone.jsの導入方法

方法１

公式サイトから最新バージョンをダウンロード

公式サイト：http://backbonejs.org/

方法２

CDN経由から利用

※Backbone.jsはunderscore.jsとjquery.jsに依存しているため、以下のように3つのファイルを最初に読み込む必要があります。

<script src="https://cdn.jsdelivr.net/npm/underscore@1.9.1/underscore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/backbone@1.4.0/backbone.min.js"></script>

Backbone.jsにおけるMVCの機能

Model

Modelは単一のデータを保持するのに役立つ機能であり、作り方としてはJavaScriptのクラスを作成する感覚に似ています。

もっともシンプルなModelの作り方としては、次のように記述します。

const Person = Backbone.Model.extend();

Collection

Collectionは、複数のデータを追加したり削除したりなどを連続的に行うようなケースに使用します。

イメージとしては、最初に作ったModelをまとめて扱うやつって感じでしょうか。

《個人的たとえ》
Model　→　えんぴつ、消しゴムと言ったひとつひとつのモノ
Collection　→　えんぴつや消しゴムをまとめる筆箱

Collectionは、えんぴつを何本もまとめて扱ったり、筆箱に入っている全部のモノを動かしたり変更させたりと、、、複数のモノを扱うときに使用するって感じですかね。

---

たとえ話はこのくらいにして、本題に戻りましょう。

作り方は以下のように記述します。
引数にmodelプロパティの値として、前章で作成したModelを指定することで紐付けることができます。

const Users = Backbone.Collection.extend({model: Person});
const users = new Users();

//コレクションへデータを追加
users.add({name:'次郎', age:28});
users.add({name:'花子', age:25});
users.add({name:'三郎', age:32});
users.add({name:'田中', age:25});

//最後のデータ要素を削除する
users.pop();
 
//指定した要素を削除する
users.remove(users.at(0));
 
//すべてのデータを削除する
users.reset();

remove()メソッドはデータ要素を指定するのですが、その際に便利なのがat()メソッドです。これは配列のようにコレクションのインデックス番号を指定するだけで、目的のデータを削除することができます。

基本的にコレクションのデータは膨大になるため、目的のデータを検索＆取得するメソッドもいくつか用意されています。

View

Backbone.jsのViewは、これまで作成したモデルやコレクションのデータを利用してDOM要素を生成する用途として利用するのが一般的です。

他にも、イベント処理・画面描画も行うことができます。

もっともシンプルなViewの作り方は次のとおりです。

const view = Backbone.View.extend();

引数としてさまざまなオプションを渡すことで、DOMコンテンツを作成していきます。

詳しい書き方は以下を参考に、、、
https://www.sejuku.net/blog/106675?msclkid=88f10fbcb3d411ec87a5890507d0167a

参考文献

JavaScript初心者でも理解！Backbone.jsの基本チュートリアル
【JavaScript】Backbone.jsとは何か
Backbone.jsとは？JavaScriptフレームワークについて解説
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた!