こんにちは！

toiroフリーランス編集部です。

初めてJavascriptのフレームワークを扱う人にもわかるように、Backbone.jsの基礎的な使い方を解説します。

Javascriptの基本的な構文や関数を理解していると分かりやすいでしょう。

また他言語にあるオブジェクト指向のクラスの概念やメソッド、変数のスコープも知っておくと便利です。


ライブラリの解説

Backbone.jsとは

CoffescriptやUnderscore.jsの作者である Jeremy Ashkenas 氏の作成した、Javascriptのフレームワークになります。

JQueryやUnderscore.jsに依存しており、それらを使いやすくした上位に位置するライブラリです。

必要不可欠なライブラリはUnderscore.jsのみになり、それを追加すれば動作します。

大きなアプリケーション開発よりも、小規模だけどデータ管理はしっかりしたいWebアプリケーションの開発に向いているでしょう。

また、jQueryと一緒に利用したり、データをModelオブジェクトとして保持したり、保守しやすいプログラムを書くことができます。

Todoリストを作りたいといった複雑なデータ管理もこれ一つで実現可能です。

Todoリストなどのサンプルコードは、公式サイトのExampleを見ると様々な実装例があります。

公式サイト: https://backbonejs.org/#examples

世の中にある多くのJavascriptライブラリの中でも比較的小さい規模ですが、単純なMVC形式で実装可能。

習得したら今まで以上にWebアプリケーションの開発に役立つことでしょう。


ライセンスはMIT License のため 商用利用可能

MIT Licenseの元で作られているため、商用利用では下記の著作権と全文を表記していれば問題ありません。

  • // Backbone.js 1.4.0
  • // (c) 2010-2019 Jeremy Ashkenas and DocumentCloud
  • // Backbone may be freely distributed under the MIT license.
  • // For all details and documentation:
  • // http://backbonejs.org

Underscore.jsも必要になります。

  • // Underscore.js 1.9.2
  • // https://underscorejs.org
  • // (c) 2009-2018 Jeremy Ashkenas, DocumentCloud and Investigative Reporters &
    Editors
  • // Underscore may be freely distributed under the MIT license.

jQueryも入れた場合は必要です。

  1. /*!
  2. * jQuery JavaScript Library v3.4.1
  3. * https://jquery.com/
  4. *
  5. * Includes Sizzle.js
  6. * https://sizzlejs.com/
  7. *
  8. * Copyright JS Foundation and other contributors
  9. * Released under the MIT license
  10. * https://jquery.org/license
  11. *
  12. * Date: 2019-05-01T21:04Z
  13. */

それぞれオープンソースで、比較的緩いライセンスのため権利表記さえすれば商用利用は可能です。


Model、View、Collectionの便利機能

Backbone.jsにはいくつかの機能があります。

Model、Collectionといった簡単にデータを扱える部分、ViewのDOM表示のカスタマイズやイベント処理まで対応可能です。

それぞれにおける便利な機能を表にしました。


Modelデータ管理、作成、検証、破棄、サーバへの保存
View表示管理
Collection配列データ管理


ModelとしてデータをJson形式に変換しやすくするためのライブラリがBackbone.jsに存在します。

Modelクラスから、toJsonして、JavascriptのJSON.stringifyを通せば、Json化がすぐに行えるのです。

そのため、データをすべてModelで管理していけば他のAPIへ保存が楽になります。

Viewは表示やDom操作、テンプレートなどの便利機能。Collectionは配列やModelデータの複数管理が可能です。

Backbone.sync関数があり、ローカルストレージの保存や、jQuery.Ajaxでのサーバー側との通信も可能な作りになっています。


ハンズオン:View、Modelの解説

学習のポイント

実際に手を動かして動作を目で確認しながら、ハンズオン形式で進めて行くことを推奨します。習得までの一番の近道です。

また、わからない点や疑問に思ったことは大手の検索サイト(Googleなど) を利用しつつ、解消していくとよいでしょう。


環境構築

Backbone.jsを導入するには、まず環境構築から始める必要があります。以下のフレームワークをダウンロードしてください。


フレームワーク

フレームワークのダウンロードURL

  • Backbone.js

URL:https://backbonejs.org/

バージョンがいくつか表示されますが、必ず最新版をダウンロードしてください。名前を付けて保存でダウンロードしましょう。

  • Underscore.js

URL:http://underscorejs.org/

Backbone.jsと依存関係にあるため、必須です。必ずダウンロードしてきてください。

  • jQuery.js

URL:https://jquery.com/

Backbone.jsと依存関係にあります。動作に必須では無いですが用意しておくとよいでしょう。


開発環境

  • Windowsでの開発

テキストエディタ―であれば何でもOKです。初心者には、Netbeansがおすすめです。

  • Mac、 Linuxでの開発

テキストエディタ―であれば何でもOKです。各自で用意してください。

サーバーとの通信がある場合は、PHPが動く環境が必要になります。各自でLamp環境を用意してください。


ライブラリの読み込み

最初のフロントエンド、まずはテンプレートです。

HTMLファイルを作成してください。index.htmlと名前を付けて保存します。

  1. <html>
  2. <head>
  3. <script src=”underscore.js”></script>
  4. <script src=”jquery-3.4.1.js”></script>
  5. <script src=”backbone.js”></script>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

<script src＝”xxx.js”></script> の部分は、外部にあるJSファイルを読み込んでいる処理です。

  1. <script src=”backbone.js”></script>
  2. <script src=”underscore.js”></script>

上記のソースのように、underscore.js の後に Backbone.js を読み込まないと、extendのundefinedエラーが発生しまうのです。

そのため、underscore.jsを読んでから Backbone.jsを読み込むような形で処理しましょう。この順番は必ず守ってください。

今回はWebアプリケーションの開発を想定しているため、このindex.htmlファイルのみで完結します。


Event

早速、下記の処理を追加してみてください。

  1. <script>
  2. _.each([1, 2, 3], alert)
  3. </script>

アラートで1、2、3と表示されるはずです。

こちらはunderscore.js の Collectionになっています。

Helloworldの表示処理をBackbone.Events経由で呼び出す処理を示しましょう。

  1. var object={};
  2. _.extend(object, Backbone.Events);
  3. object.on(“alert”, function(msg){
  4. alert(“Hello ” + msg);
  5. });
  6. object.trigger(“alert”, “world!”);

実行するとAlertでHello world!が表示されます。

こちらの動作は、コールバック関数をオブジェクトにバインドしたものです。

トリガーイベントを呼び出すだけで、オブジェクトの専用の関数が呼び出されます。

同様に off関数も存在して、バインドされた関数を削除も可能です。


Modelの基本

Modelは、データとロジック部分を含んだ機能です。下記のソースコードを入力してください。

RPGのデータ管理

  1. const Hero = Backbone.Model.extend({
  2. defaults: {
  3. name: ‘dummy’,
  4. hp: 10,
  5. atk: 2,
  6. def: 1
  7. },
  8. showStatus: function () {
  9. console.log(‘name:’ + this.get(‘name’) + ‘ hp:’ + this.get(‘hp’) + ‘ atk:’ + this.get(‘atk’) + ‘ def:’ + this.get(‘def’));
  10. }
  11. });

試しにデータを作成して、メソッドを呼び出すと

  1. var h1 = new Hero({ name: ‘taro’});
  2. h1.showStatus();

Consoleログを確認すると

  • name:taro hp:10 atk:2 def:1

と表示されます。

同様に別のデータで

  1. var h2 = new Hero({ name: ‘hanako’, hp:5, atk: 1, def: 2 });
  2. h2.showStatus();name:hanako hp:5 atk:1 def:2

という感じに、データが表示されるでしょう。

二つの別々のデータ管理ができる上に同じメソッドを使いまわすことができるため、クラスのような扱い方が可能です。


Viewの基本

最初の一歩

次に、基本的なViewを追加する例を示します。まず下記のソースコードを入力してください。

  1. <html>
  2. <head>
  3. <script src=”jquery-3.4.1.js”></script>
  4. <script src=”underscore.js”></script>
  5. <script src=”backbone.js”></script>
  6. <script>
  7. $(function() {
  8. var View1 = Backbone.View.extend({});
  9. var mView1 = new View1();
  10. $(“#main”).append(mView1.el);
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <div id=”main”></div>
  16. </body>
  17. </html>

上記のindex.htmlを起動すると

  1. <div id=”main”>
  2. <div></div>
  3. </div>

このような形で、Divタグがmainの中にあります。DOM要素を自由に変更するための機能がViewなのです。


Clickイベント処理

View1の中身を以下のように変更します。

  1. tagName: “li”,
  2. events: {
  3. click: “onClick”
  4. },
  5. onClick: function() {
  6. console.log(“click!”);
  7. }
  8. });

そうすると<li></li>タグ表示がされており、クリックすると Consoleのログに click! と表示されます。

ブラウザのログを確認する場合は、ChromeではF12キーを押しましょう。

開発ウィンドウの中にConsoleというウィンドウがあり、そこでログ見ることができます。

この場合のソースコードの全体は下記の通りです。

  1. <html>
  2. <head>
  3. <script src=”jquery-3.4.1.js”></script>
  4. <script src=”underscore.js”></script>
  5. <script src=”backbone.js”></script>
  6. <script>
  7. $(function() {
  8. var View1 = Backbone.View.extend({
  9. tagName: “li”,
  10. events: {
  11. click: “onClick”
  12. },
  13. onClick: function() {
  14. console.log(“click!”);
  15. }
  16. });
  17. var mView1 = new View1();
  18. $(“#main”).append(mView1.el);
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <div id=”main”></div>
  24. </body>
  25. </html>


テンプレート要素

  1. templateを使用できます。
  2. var View1 = Backbone.View.extend({
  3. template: _.template(“こちら <%= key%>”),
  4. initialize: function() {
  5. this.render();
  6. },
  7. render: function() {
  8. this.$el.html(this.template({ key: “バックボーンJS !” }));
  9. }
  10. });

実行結果は、「こちらバックボーンJS !」と表示されます。

ソースコードの全体は下記の通りです。

  1. <html>
  2. <head>
  3. <script src=”jquery-3.4.1.js”></script>
  4. <script src=”underscore.js”></script>
  5. <script src=”backbone.js”></script>
  6. <script>
  7. $(function() {
  8. var View1 = Backbone.View.extend({
  9. template: _.template(“こちら <%= key%>”),
  10. initialize: function() {
  11. this.render();
  12. },
  13. render: function() {
  14. this.$el.html(this.template({ key: “バックボーンJS !” }));
  15. }
  16. });
  17. var mView1 = new View1();
  18. $(“#main”).append(mView1.el);
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <div id=”main”></div>
  24. </body>
  25. </html>

 


Collectionの基本

配列用の便利機能がBackbone.jsにはあります。


Json形式に変換する

  1. var ary = new Backbone.Collection([
  2. {name: “goblin”, level: 5},
  3. {name: “slime”, level: 2}
  4. ]);
  5. alert(JSON.stringify(ary));

AlertでCollectionのデータがJson形式で表示されます。


Modelと組み合わせて使う

モデルを作成して、Collectionに入れることが可能です。

  1. const Hero = Backbone.Model.extend({
  2. defaults: {
  3. name: ‘dummy’,
  4. hp: 10,
  5. atk: 2,
  6. def: 1
  7. }
  8. });
  9. var h1 = new Hero({ name: ‘taro’});
  10. var h2 = new Hero({ name: ‘hanako’, hp:5, atk: 1, def: 2 });
  11. var ary2 = new Backbone.Collection([
  12. h1, h2
  13. ]);
  14. alert(JSON.stringify(ary2));
  15. });

AlertでCollectionのデータがJson形式で表示されます。別の関数を組み合わせて、様々なデータを配列化して加工することが可能です。


この後にするべきこと

ここまでやり遂げたならBackbone.jsについて、少しだけ入門できたといえます。

あとは、サンプルソースが公式サイト（https://backbonejs.org/#examples）にあるため、そちらを参考にしていく学習スタイルがベストでしょう。

ソースコードを眺めていき、解析しながら実力を伸ばしていってください。


まとめ

Backbone.jsについて解説しました。

シンプルですがModel､View、Collectionと学習コストの少ないもので、データ管理が便利になるツールが集まっています。

そのため、Webアプリケーションのサイト制作にすぐ取り掛かれるライブラリです。


実務で使う場合

Backbone.jsは素早くデータ管理と実装を進めていけるため、簡単なアプリでも強固なソースコードの作りにできることでしょう。

行き詰まったときは各ブログサイトにある先人の作った解説サイトも参考にするのがおすすめです。

自分で同じソースコードを打ち込むことも勉強になります。学んで吸収していってください。

そうすればソースコードの組み方がわかり、色々な開発に役立つことでしょう。


Backbone.jsの完全理解に向けて

Backbone.js だけでなく、jQueryとUnderscore.jsの使い方も身に着けてください。

そのうえでさらに完全に理解するためには、ライブラリの中身を追ってみないと本質的な部分というのは理解が難しいでしょう。

そのため、是非ともDevelopmentのソースコードをダウンロードして、処理を追っていくことをおすすめします。

深いところまでソースコードを読んでいけば自ずと理解が進むでしょう。


ライブラリに頼らず開発するスタイルも時には必要

ライブラリは便利な機能がたくさんあり、それに依存して開発することもできます。

ただ、それ特有の機能を理解して使うにはそれなりにコストがかかるものです。

実際に自分で勉強してみて使えるか判断し、その上で開発にとりかかった方が後々のコストが掛かりません。

Backbone.jsなども一度使い方を学び自分のスキルとして身に着けてしまえば、ある程度スピード感を持って開発に取り組むことが可能です。

ただ、ITは刻一刻と状況が変わる業界であり、新しいライブラリやフレームワークがどんどん出てきます。

また、そちらのフレームワークで学習するコストが発生してしまうのです。

そのため、フレームワーク以前にJavascriptやHTMLの基礎的な部分をしっかり身に着けていくことが重要となります。

フレームワークやライブラリはそれを使う技術者の裁量に掛かっていますが、無くても開発できます。

結局はBackbone.jsにこだわるより、自分にとって一番扱いやすいライブラリやフレームワークを採用していくべきです。



toiroフリーランスはフリーランスエンジニア向けのSHIFTグループ案件・求人情報サイトです。

プライムベンダーだからこそ、商流が深い多重下請けや不要な中抜きは一切なく、高単価・適正単価で業務委託案件をご案内しています。

アカウント登録後には、さまざまなサービスや機能を無料でご利用いただけます。

  • 登録面談にてキャリア相談や案件マッチングのコツ、市場トレンドや耳寄りな情報をお伝えします
  • 本サイトでは公開していない非公開案件をすべて確認可能
  • ご希望条件に合うエージェントおすすめの案件を随時ご案内

個人事業主やフリーランスで活躍されている方、これから目指している方、少しでもご興味がある方はぜひお気軽にお問い合わせください！