JavaScript初心者でも理解！Backbone.jsの基本チュートリアル

古くから存在するBackbone.jsは、JavaScriptの基本的な学習を一通り学んだあとで最初に触れるフレームワークとしては最適です。

特殊な概念やアーキテクチャーなどを新しく勉強する必要はなく、基本的な構文やオブジェクトの知識があれば誰でも手軽に利用できます。ただし、日本語の情報が少なく公式サイトを見てもどこから学習すればいいのか困る人も少なくありません。

そこで、この記事では初心者でもBackbone.jsの基礎知識について理解できるように解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

Backbone.jsの導入

まず最初にBackbone.jsを使うための導入準備から始めていきましょう。

【Backbone.js】

上記の公式サイトから最新バージョンをダウンロードしても良いのですが、以下のCDN経由からでも手軽に利用することができます。

ただし、Backbone.jsはunderscore.jsとjquery.jsに依存しているため、以下のように3つのファイルを最初に読み込む必要があります。

ここまで出来ればひとまず導入準備は完了です。次章から、基本的なモデルや画面の構築について見ていきましょう。

Model/Collectionの基本

この章では、Backbone.jsの基本とも言えるモデルについて見ていきましょう。主に、Model / Collectionの扱い方について学んでいきます。

Modelの基本的な作り方

Modelは単一のデータを保持するのに役立つ機能であり、作り方としてはJavaScriptのクラスを作成する感覚に似ています。

もっともシンプルなModelの作り方としては、次のように記述します。

const Person = Backbone.Model.extend();

この例では、PersonというModelを作成しています。

このPersonモデルはインスタンスを作る際にデータの初期値を一緒に定義することができます。

const user= new Person({
    name: '太郎',
    age: 30
});
  
console.log(user.toJSON());

実行結果

{ name: "太郎", age: 30 }

インスタンスにtoJSON()メソッドを実行することで、作成したModelの情報だけを出力することができます。

また、Modelを作成する時にオプションとしてdefaultsを設定することができます。これは、モデルが最初から保持しているデータを作ることができます。

const Person = Backbone.Model.extend({
  defaults: {
    area: 'Tokyo',
    country: 'JP'
  }
});

この例では、【area】【country】という2つのプロパティを設定しています。

この状態でもう一度インスタンスを作成してみるとどうなるか見てみましょう！

const user= new Person({
    name: '太郎',
    age: 30
});

実行結果

{ area: "Tokyo", country: "JP", name: "太郎", age: 30 }

実行結果に注目してください。

インスタンスに指定した初期値だけでなく、Modelを作成する時に指定したdefaultsのプロパティも一緒に統合されていますよね。このようにインスタンスを作成するたびに、あらかじめ初期データとして設定したい時に活用すると便利でしょう。

また、Modelを作成する時にメソッドも定義することができます。

const Person = Backbone.Model.extend({
  defaults: {
    area: 'Tokyo',
    country: 'JP'
  },
  
  //メソッドを定義する
  hello: function() {
    console.log('こんにちは、' + this.get('name') + 'さん');
  }
});

この例では、hello()というメソッドを同時に定義しているのが分かります。Modelは【get()】【set()】を使うことで値を取得したり更新することもできるので覚えておきましょう。

上記の場合であれば、【this.get(‘name’)】と記述することでnameプロパティの値を取得しています。

また、定義されたメソッドの使い方は一般的なオブジェクトのメソッドと同じように利用することができます。

const user= new Person({
    name: '太郎',
    age: 30
});

user.hello();

実行結果

こんにちは、太郎さん

Collectionの基本的な作り方

Modelは初期データや単一のデータを扱うのに便利なのですが、複数のデータを追加したり削除したりなどを連続的に行うようなケースにはあまり向いていません。

そこで、Backbone.jsではCollectionという機能が提供されています。作り方は次のように記述します。

const Users = Backbone.Collection.extend({model: Person});

const users = new Users();

引数にmodelプロパティの値として、前章で作成したModelを指定することで紐付けることができます。

コレクションへデータを追加する場合はadd()メソッドを以下のように利用します。

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()メソッドです。これは配列のようにコレクションのインデックス番号を指定するだけで、目的のデータを削除することができます。

基本的にコレクションのデータは膨大になるため、目的のデータを検索＆取得するメソッドもいくつか用意されています。

例えば、pluck()メソッドを利用すると引数に指定したプロパティの値だけを抽出することができます。

console.log(users.pluck('name'));

実行結果

["次郎", "花子", "三郎", "田中"]

この例では、nameプロパティの値だけを抽出して配列要素として取得しています。

where()メソッドを利用すると、特定の条件に該当するデータだけを抽出することができます。

$.each(users.where({age:25}), function(e,i) {
    console.log(i.get('name'));
})

実行結果

花子
田中

この例では、ageプロパティの値が25のデータだけを抽出しています。上記の例では、get()を利用して名前だけをさらに抽出して出力しています。

Viewの基本

この章では、Viewによる画面描画について見ていきましょう。基本的な作り方やイベント処理、画面描画の手法について学んでいきます。

Viewの基本的な作り方

それでは、基本的なViewを作っていきましょう。

Backbone.jsのViewは、これまで作成したモデルやコレクションのデータを利用してDOM要素を生成する用途として利用するのが一般的です。

もっともシンプルなViewの作り方は次のとおりです。

const view = Backbone.View.extend();

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

例えば、li要素を作成するのであれば次のようにtagNameプロパティを記述します。

const LI_view = Backbone.View.extend({
  tagName: 'li'
});

この例では、tagNameプロパティの値に【li】を指定することでリスト要素を作成しています。

このようにオプションにはさまざまなプロパティが用意されており、主に以下のようなものがあります。

const LI_view = Backbone.View.extend({
  tagName: 'li',

  events:    //イベント処理
  template: //テンプレート
  render:    //レンダー
});

【イベント処理】を記述すると、ユーザーアクションによるインタラクティブなコンテンツを作成できます。

【テンプレート】を記述すると、画面にどのような形式で描画するかを手軽に作成できます。

【レンダー】を記述すると、どのデータを利用して画面に描画するのかを指定できます。

イベント処理について

Viewを利用して、どのようにイベント処理を作成していくのかを見ていきましょう。

基本的な作り方としては、【events】プロパティにイベントの種類と実際の処理を行う関数名を次のように記述します。

const viiew = Backbone.View.extend({
  tagName: 'li',

  events: {
    'click': 'clickEvent'
  }

});

この例では、イベントの種類を【click】にすることでクリックイベントを作成しています。プロパティの値として【clickEvent】という関数名を指定しましたが、名称は好きなもので構いません。

この関数名はViewのプロパティとして次のように記述することで、処理の中身を作成できるようになっています。

const viiew = Backbone.View.extend({
  tagName: 'li',
  events: {
    'click': 'clickEvent'
  },

  //イベント処理を作成
  clickEvent: function() {
    console.log('クリックされました');
  }

});

この例では、clickEvent処理として文字列をコンソールログに出力します。

画面への描画

Backbone.jsで画面へ描画する方法はいくつかあるのですが、テンプレート機能を利用した方法が便利なので合わせてご紹介しておきます。

まずはおさらいの意味を込めて、最初から実装をしていきましょう！

ModelとCollectionを次のように用意します。

const Person = Backbone.Model.extend({
  defaults: {area: '東京都'}
});
  
const Users = Backbone.Collection.extend({model: Person});
const users = new Users();
  
users.add({name:'次郎', age:28});
users.add({name:'花子', age:25});
users.add({name:'三郎', age:32});
users.add({name:'田中', age:25});

各データが共通で持っている初期データとしてModelに【area】プロパティを提供しています。また、各ユーザーデータについてはCollectionで追加しているのが分かります。

次に、テンプレート機能を使ってみましょう。

テンプレートはどのように画面へ情報を描画するかを事前に決めることができるのですが、今回は次のように設定しました。

scriptタグの【type】属性をtext/templateにすることでテンプレート機能を利用することができます。また、【<%- %>】で囲んだ中にモデルのプロパティ名を指定することで、その値が出力されるようになります。

このテンプレートを実際に使うにはViewの中で、templateプロパティから指定することになります。

const LI_view = Backbone.View.extend({
  tagName: 'li',

  //テンプレートを利用する
  template: _.template($('#user-template').html()), 

  render: function() {
    //テンプレートを出力する
    const template = this.template(this.model.toJSON());
    this.$el.html(template);
    return this;
  }
});

この例ではViewを利用してli要素を作成しているのですが、その中でテンプレートを利用するために【_.template()】メソッドを使っています。この引数に先ほど作成したscriptタグを指定すればいいわけです。

そして、renderプロパティを使ってテンプレートの中身を出力する処理を記述しています。このテンプレートにはモデルのデータを出力する必要があるので、【this.model.toJSON()】を指定するわけです。

今度はul要素を作りましょう！

同じようにViewから作成するのですが、renderの中身はCollectionを1つずつ繰り返す処理になります。

const UL_view = Backbone.View.extend({
  tagName: 'ul',
  render: function() {
    //Collectionデータを1つずつ処理する
    this.collection.each(function(data) {
      const li = new LI_view({model:data});
      this.$el.append(li.render().el);
    }, this);
    return this;
  }
});

ul要素の中に先ほど作成したli要素を1つずつ出力することになるので、renderの中でCollectionにあるデータ分だけ繰り返しています。

繰り返し処理の中身は、先ほど作成したli要素のViewをインスタンス化して出力していきます。

最後に、このul要素を画面に描画すれば完成です！

const ul = new UL_view({collection: users});  

$('body').html(ul.render().el);

ul要素のViewにはデータとしてCollectionを渡してあげるのを忘れないようにしましょう。

ここまでのサンプルデモを以下に掲載しておきますので、ソースコードと一緒に確認をしてみてください！

See the Pen Backbone.js Basic Sample by sato ken (@s_masato) on CodePen.

まとめ

今回は、Backbone.jsの基本的な使い方を学習しました。

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！