Google+ もご覧ください
ユーザーアイコン

実践!Backbone

第一回 jQueryから始めるBackbone.js

Yuku t

第一回 jQueryから始めるBackbone.js

Backboneをインストールする

なにはともあれ、まずはBackboneのインストールからです。

Backbone公式サイト へアクセスしてダウンロード1します。加えてBackboneはUnderscoreというライブラリにも依存しているので、そちらもUnderscore公式サイトからダウンロード2してください。既にjQueryは存在している前提なのでダウンロードしたソースコードをjQueryファイルと同じディレクトリに置いたら、あとはBackboneとUnderscoreを読み込むだけです。その際は必ずBackboneを一番最後に読み込むようにしなければいけません。

<script src="path/to/jquery.js"></script>
<script src="path/to/underscore.js"></script>
<script src="path/to/backbone.js"></script>

Viewを使ってみる

まずDOMイベントのハンドリングをBackboneを使って書いてみます。

var TabView = Backbone.View.extend({
  el: '#tab',
  events: {
    '.tab click': 'tabClick'
  },
  tabClick: function () { /* タブをクリックしたら実行される関数 */ }
});

このようにDOMとのやりとりをするにはViewを使います。とりあえずextendが何かなどは気にせず、先ほどのコードと見比べてみてください。eventsがイベントの種類とそのコールバックの対応を記述します。なんとなくどことどこが対応しているのか分かりますね。

次はイベントハンドラを実装します。jQueryのイベントハンドラに登録したコールバック関数は、実行時にコンテキストがイベントが発生した要素になりますが、BackboneではViewインスタンスになります。ここではViewが持っている $ を使っています。このメソッドは先ほど説明した find のように、自身の子孫の中から要素を検索して返します。

tabClick: function (e) {
  // activeな要素を一旦解除する
  this.$('.active').removeClass('active');
  // クリックされたタブと対応するパネルをactiveにする
  var $clickedTab = $(e.target).addClass('active');
  this.$($clickedTab.attr('href')).addClass('active');
}

Viewができたので最後に忘れずにインスタンスを作ります。

var TabView = Backbone.View.extend({ /* … */ });
var view = new TabView();

これでひとまず終わりです!Backboneへの移植が完了しました。

おや?結局Backboneの何が嬉しいのか分からない、という顔をしていますね。たしかにコードの分量もはじめより増えています。

Backboneの真骨頂をお見せするのは残念ながら次回以降になってしまうのですが、とりあえず現段階で実感できる良い点としては、クラスに実装がまとまっているのでリファクタリングや機能追加がしやすいことがあげられると思います。

リファクタリング: DOM操作を分離する

ではさっそくTabViewに機能追加をしてみましょう。まずはタブを外部から簡単に操作できるようにしてみます。さきほどまでの tabClick はDOMイベントのハンドリングと、その結果をDOMに反映することの2つに操作を分離できそうです。そこでDOM操作を分離して activate メソッドを追加してみます。

tabClick: function (e) {
  this.activate($(e.target).attr('href'));
},
activate: function (id) {
  // activeな要素を一旦解除する
  this.$('.active').removeClass('active');
  // 指定されたタブと対応するパネルをactiveにする
  this.$('a[href="' + id + '"]').addClass('active');
  this.$(id).addClass('active');
}

これを使えばTabViewの外部からでも表示されてるタブを切り換えることができます。

var view = new TabView();
view.activate('#A');  // Aタブが選択される
view.activate('#B');  // Bタブが選択される

確かにjQueryだけを使っていてもこのような機能を追加することはできます。しかしBackboneを使うと今回のように一つのクラスの中に実装するので分かりやすいですね。

ちなみにここで行ったリファクタリングはBackboneでViewを扱う際に非常に大事な働きをするものです。詳しくは次回解説します。

機能追加: ハッシュが変更されたらタブを切り換える

外部からタブの表示を切り換えることができるようになりました。この機能を使って、ブラウザのハッシュが変更されたらそれに応じてタブを切り換えるようにします。hashchangeイベントのコールバックで現在のハッシュに対応するタブを activate すれば実現できそうです。問題はイベントをどこで登録するか、です。

initialize はViewのインスタンスが生成されるときに実行されるメソッドです。今回のようなイベントの登録処理などを実行するのに適した場所です。

initialize: function () {
  var that = this;
  $(window).on('hashchange', function () {
    // hashchangeイベントが発生したらactiveなタブを切り換える
    that.activate(location.hash);
  });
}

非常に簡単ですね。このようにBackboneではある部品に関する処理が一箇所にまとまります。jQueryだけを使っていると新しいイベントハンドラをどんどんソースコードの末尾に追加していく、ということになりがちですが、それと比べるとソースコードの見通しが非常に良くなります。

ちなみにBackboneにはRouterというhashchangeイベントをハンドリングする専用のクラスも用意されています。後の連載で紹介する機会もあると思いますが、気になる方は使い方を調べてみるとよいでしょう。

まとめ

今回はjQueryをすでに使ってアプリケーションを作っている方を対象に、Backboneの初めの一歩としてViewクラスを使ってjQueryのイベントハンドラを置きかえる簡単な使い方を解説しました。是非お手持ちのアプリケーションコードで試してみてください。その際はイベントハンドラとDOM操作を行うメソッドを分離するように心がけるとよいでしょう。

var TabView = Backbone.View.extend({
  el: '#tab',
  events: {
    '.tab click': 'tabClick'
  },
  initialize: function () {
    var that = this;
    $(window).on('hashchange', function () {
      // hashchangeイベントが発生したらactiveなタブを切り換える
      that.activate(location.hash);
    });
  },
  tabClick: function (e) {
    this.activate($(e.target).data('id'));
  },
  activate: function (id) {
    // activeな要素を一旦解除する
    this.$('.active').removeClass('active');
    // 指定されたタブと対応するパネルをactiveにする
    this.$('a[href="' + id + '"]').addClass('active');
    this.$(id).addClass('active');
  }
});

$(function () {
  // 忘れずにインスタンスを作る
  var view = new TabView();
});
Backbonejs
タグ:

連載バックナンバー

  • 第一回 jQueryから始めるBackbone.js

記事をリクエストする

関連記事

コメント