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

実践!Backbone

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

Yuku t

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

はじめに

はじめまして。プログラマ向け情報共有サイトQiitaを開発・運営しているIncrements株式会社の高橋と申します。Qiitaではフロントエンドのアプリケーション開発にBackboneを採用しています。また縁があってBackbone.jsガイドブックという本を執筆させていただきました。本連載では、Backboneを使ったより実践的な話題を紹介していきたいと思います。

初回となる今回は「すでにjQueryを使っているけど最近何かと話題のBackboneも気になる!」という開発者の方がBackboneを試しに使ってみる際の初めの一歩の踏み出し方を紹介することが目的です。そのために今回はjQueryで実装されたサンプルコードをBackboneに移植します。

なぜBackboneを使うの?

すでにjQueryがあるのになんでわざわざBackboneを使うのでしょう。jQueryを使えばブラウザの違いを気にすること無く簡単にコードを書くことができます。

jQueryは確かに便利なのですが、JavaScriptを使った大規模なサイトが作られるようになってくると、そのままでは立ち行かなくなるということも分かってきました。それに対して「MVCでコンポーネントを分けて管理すると維持が楽だよ」とか「オブザーバパターンを使うといいよ」と言ったノウハウが公開されるようになったのですが、各自が一から頑張って実装しなければならないような状況が長く続きました。

そんな中で現れた(数多のフレームワークの中で最も脚光を浴びているものの一つ)のがBackboneです。こうすればいいよという状態から一歩進めてこれを使えばいい感じで書けるよにしてくれたのです。

jQueryコードをBackboneで置き換えてみよう

では細かい話は抜きにして、早速jQueryで書かれたサンプルコードをBackboneを使って書きなおしてみましょう。

今回取り上げるサンプルは簡単なタブです。タブをクリックするとその下にあるコンテンツが切り替わる、というよく見かけるものをイメージしてください。

<div id="tab">
  <div class="tabs">
    <a href="#A" class="tab active">TabA</a>
    <a href="#B" class="tab">TabB</a>
  </div>
  <div class="panels">
    <div id="A" class="panel active">PanelA</div>
    <div id="B" class="panel">PanelB</div>
  </div>
</div>

activeなパネルだけが表示されるように簡単なCSSが書かれているものとします。

.panel        { display: none;  }
.panel.active { display: block; }

そしてjQueryを使って、細かくは解説しませんが、例えばこんな感じで実装されていたとしましょう。見た目は貧相ですが、これでも立派なタブとして動作します。ちなみにfindは指定要素(今回の場合$('#tab'))が持つ全子孫要素から、指定条件式に合致するものを選択するメソッドです。

// tabsにクリックイベントハンドラ登録
$('#tab').on('click', '.tab', function (e) {
  // activeな要素を一旦解除する
  $('#tab').find('.active').removeClass('active');
  // クリックされたタブと対応するパネルをactiveにする
  var $clickedTab = $(e.target).addClass('active');
  $($clickedTab.attr('href')).addClass('active');
});

では、次のページでBackboneを使って一歩一歩書きなおしていってみましょう。

Backbonejs
タグ:

連載バックナンバー

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

記事をリクエストする

関連記事

コメント