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


Backbone.jsってどこから勉強をしたらいいの?
ModelやViewなどの基本的な使い方を知りたい
フレームワークを利用した効率の良い書き方を学びたい

古くから存在する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の作り方としては、次のように記述します。

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

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

実行結果

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

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

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

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

実行結果

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

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

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

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

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

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

実行結果

Collectionの基本的な作り方

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

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

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

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

コレクションのデータを削除するにはいくつかメソッドがあり、よく使うのは次のとおりです。

remove()メソッドはデータ要素を指定するのですが、その際に便利なのがat()メソッドです。これは配列のようにコレクションのインデックス番号を指定するだけで、目的のデータを削除することができます。

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

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

実行結果

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

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

実行結果

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

Viewの基本

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

Viewの基本的な作り方

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

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

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

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

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

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

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

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

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

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

イベント処理について

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

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

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

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

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

画面への描画

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

  • Backbone.jsはunderscore.jsとjquery.jsに依存しているので要注意
  • Modelは単一のデータ、Collectionは複数のデータ操作を行う
  • ViewはDOM要素の生成、イベント処理、画面描画を行う

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説