[JavaScript General] ドットインストールで「Backbone.js 入門」

大枠を知りたくてちょっと調べた。ES2015 っぽく書きながら勉強。

[markdown]
## 概要

こちらを参考にさせて頂きました。

> * [Backbone.js を基礎からやってみよう – akiyoko blog](http://akiyoko.hatenablog.jp/entry/2015/08/07/074935)
> * [Backbone.jsとは | CodeGrid](https://app.codegrid.net/entry/backbonejs-intro)

MV* 問題で混乱したので、下記で概要を把握。

| 名前 | MVC での分類 | 役割 |
|————————|————–|——————————–|
| Backbone.Model | Model | データの取得・保存・更新・削除 |
| Backbone.Collection | Model | Model の集合 |
| Backbone.View | View | DOM の監視と操作 |
| Backbone.Router | Controller | URL の監視 |
| Backbone.History | Controller | Router の履歴監視 |

[PDF アーカイブ](https://www.amazon.co.jp/WEB-PRESS%E7%B7%8F%E9%9B%86%E7%B7%A8-Vol-1~84-PRESS-plus/dp/4774175382?ie=UTF8&*Version*=1&*entries*=0)をあさると、WEB+DB PRESS Vol.68 2012/04/24 号で「比較的成熟していて人気のある MVC フレームワーク」として紹介されていたので読む。

WEB+DB PRESS Vol.68

posted with amazlet at 16.06.23

名村 卓 三宅 陽一郎 白土 慧 勝間 亮 石田 忠司 牧本 慎平 A-Listers 近藤 宇智朗 はまちや2 mala じゅんいち☆かとう 並河 祐貴 小野 修司 中島 聡 森田 創 小飼 弾 田籠 聡 天野 祐介 cho45 大和田 純
技術評論社
売り上げランキング: 421,074

Amazon.co.jpで詳細を見る

## 公式リファレンス

以下のバージョンで動かした。

* [Backbone.js](http://backbonejs.org/) … v.1.3.3
* [Underscore.js](http://underscorejs.org/) … v.1.8.3
* [jQuery API Documentation](http://api.jquery.com/) … v.2.2.4

## インストール

`npm install` し、

“`prettyprinted
% npm install –save jquery underscore backbone
“`

こんな形で読込。

“`javascript
‘use strict’;
var $ = require(“jquery”);
var _ = require(“underscore”);
var Backbone = require(“backbone”);
“`

以下を使って require + ES6 する。

> * [DriftwoodJP/sandbox-es6: sandbox es6(2015)](https://github.com/DriftwoodJP/sandbox-es6)

## ドットインストールを ES6 に書き換える

> * [Backbone.js入門 (全22回) – プログラミングならドットインストール](http://dotinstall.com/lessons/basic_backbonejs)

こちらを参考に試行錯誤した。

> * [tastejs/todomvc-backbone-es6: Backbone TodoMVC rewritten using ES6](https://github.com/tastejs/todomvc-backbone-es6)
> * [masakielastic/backbone-es6-example: Backbone.js と EcmaScript 6 (ES6) のコードの例です。](https://github.com/masakielastic/backbone-es6-example)

いろいろ自信なし。

### Model, Collection, View（前半）

ドットインストールの前半をやった後、勉強のために ES6 に書き換えてみた。

– `super()` に引数を `this.tagName = ‘li’` のような形で渡せずに悩んだ。

> * [Backbone and ES6 Classes · Issue #3560 · jashkenas/backbone](https://github.com/jashkenas/backbone/issues/3560)
> * [Underscore.js](http://underscorejs.org/#defaults)

`_.defaults` を使う。

“`javascript
class TaskView extends Backbone.View {
constructor(options) {
_.defaults(options, {
tagName: ‘li’
});
super(options);
:
“`

### ToDo アプリの作成（後半）

– 突然、`initialize` が出てきて監視の流れになって困った。最近は `listenTo` を使うようなのでそれっぽく書き換えた。
– View template? の index.html で `completed` が Undefined で困った。`this.model.attributes.completed` とした。

## 所感

[ドットインストール](http://dotinstall.com/lessons/basic_backbonejs) のサンプルでは、Backbone.Router, Backbone.History, LocalStorage あたりは利用されていないので、下記などを参考にさらに読み解く必要がありそう。

* [Backbone.js Todosを読み解く – console.lealog();](http://lealog.hateblo.jp/entry/2013/04/17/010712)
* [TodoMVC](http://todomvc.com/)
* [tastejs/todomvc-backbone-es6: Backbone TodoMVC rewritten using ES6](https://github.com/tastejs/todomvc-backbone-es6)

いろいろ理解が足りていないので、とりあえず保留。。。
書籍については、今読むならこれらしい。

入門Backbone.js (Programmer’s SELECTION)

posted with amazlet at 16.06.23

James Sugrue
翔泳社
売り上げランキング: 333,788

Amazon.co.jpで詳細を見る

## 補遺

* [Webアプリ構築のためのBackbone.js入門 – Backbone.Model – tacamy.log](http://tacamy.hatenablog.jp/entry/20140120/1390172676)
* [Backbone.jsともっと仲良くなるためのヒント | I am mitsuruog](http://blog.mitsuruog.info/2013/04/backbonejs.html)
* [Backbone.js: バリデーション – Sarabande.jp](http://blog.sarabande.jp/post/51339795552)
[/markdown]