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に依存**している

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

https://qiita.com/mzmz__02/items/12d6ff9bfb9edf991784


個人的に大きな特徴としては、**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つのファイルを最初に読み込む必要があります。

```js
<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の作り方としては、次のように記述します。

```js
const Person = Backbone.Model.extend();
```

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

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

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

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

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

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

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





```js
//コレクションへデータを追加
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の作り方は次のとおりです。

```js
const view = Backbone.View.extend();
```

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

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



# 参考文献
[JavaScript初心者でも理解！Backbone.jsの基本チュートリアル](https://www.sejuku.net/blog/106675?msclkid=88f10fbcb3d411ec87a5890507d0167a)
[【JavaScript】Backbone.jsとは何か](https://qiita.com/mzmz__02/items/12d6ff9bfb9edf991784)
[Backbone.jsとは？JavaScriptフレームワークについて解説](https://programming-world.net/jsframework/backbone/)
[Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた!](https://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9)