Backbone.jsの基礎

Kazuhito Hokamura

2013/10/24

内容

  1. Backbone.jsを使うと何を解決できるか
  2. Backbone.jsの基本的なアーキテクチャ
  3. Backbone.jsを使った設計のコツ

内容

  1. Backbone.jsを使うと何を解決できるか
  2. Backbone.jsの基本的なアーキテクチャ
  3. Backbone.jsを使った設計のコツ

よくあるコード

$(function() {
  // 要素取得してー
  var $form = $('.todoForm');
  var $input = $form.find('input[type="text"]');
  var $list = $('.todoList');

  // フォームがサブミットされたらー
  $form.submit(function(e) {
    e.preventDefault();

    // 要素作って追加ー
    var text = $input.val();
    var html = '<li><input type="checkbox">' + text + '</li>';
    var $li = $(html);
    $list.append($li);

    // イベントもここで設定しちゃうー
    $li.find('input[type="checkbox"]').change(function() {
      $(this).closest('li').toggleClass('complete');
    });
  });
});

問題点

  • 仕様変更や機能追加に弱い
  • 再利用しづらい
  • 分業しづらい
  • テストしづらい

つまり

規模が大きくなったときに
管理しきれなくなる

どうすればいいか

きちんと設計しよう

例えば

  • 機能ごとにファイルやクラスに分ける
  • 再利用しやすいようにモジュール化する
  • モジュール同士を疎結合にする

その手助けをするのがBackbone.js

Backbone.jsが提供・解決すること

  • 良い設計の土台となる機能
  • 役割、機能の切り分けの指針
  • 長期的な生産性の向上

Backbone.jsが提供・解決しないこと

  • コード量の削減
  • プログラムの高速化
  • 短期的な生産性の向上
  • かっこいいUI
  • 設計のベストプラクティス

内容

  1. Backbone.jsを使うと何を解決できるか
  2. Backbone.jsの基本的なアーキテクチャ
  3. Backbone.jsを使った設計のコツ

Backbone.jsは
MVCフレームワーク

  • Model
  • View
  • Controller

大事なのは

これ。MVCという言葉はどうでもいい。

  • Model、Collectionはデータを扱う
  • ViewはDOMを扱う
  • RouterとHistoryはURLとか履歴を扱う

基本的な処理の流れ

  1. Viewがユーザーからの入力を受け取ってModelのデータを更新
  2. Modelはデータが変更されたというイベントを発火
  3. ViewはModelのイベントを監視して適切にDOMを変更して描画

内容

  1. Backbone.jsを使うと何を解決できるか
  2. Backbone.jsの基本的なアーキテクチャ
  3. Backbone.jsを使った設計のコツ

設計のコツ

  • ModelとViewを明確に分ける
  • Viewを疎結合にする

最初のTodoのコード

問題点

  • データとViewが密結合
  • フォームとリストが密結合

こうなるとよい

何がいいのか

  • データの管理をModelに任せられる
  • View同士が疎結合になり再利用しやすい
// モデル
var Todos = Backbone.Collection.extend();

// フォーム
var FormView = Backbone.View.extend({
  events: {
    'submit': 'onSubmit'
  },
  onSubmit: function(e) {
    e.preventDefault();
    this.collection.add({ text: this.$('input[type="text"]').val() });
  },
});

// リスト
var ListView = Backbone.View.extend({
  initialize: function() {
    this.collection.on('add', this.render, this);
  },
  render: function() {
    // 描画処理
  }
});

// 初期化
var todos = new Todos();
new FormView({ collection: todos });
new ListView({ collection: todos });

機能追加

フォーム以外からリストを追加したい

これだけ。

$('.usualTodos li').click(function() {
  todos.add($(this).text());
});

既存のコードを変えることなく
仕様追加に対応できる！

まとめ

  • 規模が大きいアプリケーションは設計が必要
  • Backbone.jsを使うと設計の一つの指針ができる
  • 利用しやすいようにモジュールを分けるのが設計のコツ（しかしこれが難しい）

Q & A