読者です 読者をやめる 読者になる 読者になる

Taste of Tech Topics

Acroquest Technology株式会社のエンジニアが書く技術ブログ

試して学ぶ Backbone.js 入門のまとめ

backbone.js javascript

皆さん、こんにちは。id:KenichiroMurataです。

f:id:acro-engineer:20131008001057p:plain:w600

今回はKnowledge Noteにて連載させて頂いていた 「試して学ぶBackbone.js入門」が全5回分公開されたため、そのまとめをしたいと思います。

記事のコンセプト

タイトルに含めた通り、実際にコードを書いて試してみることでBackbone.jsの理解を深めることを一番の目的としています。

なので、ぜひ実際に記事の中に出てくるコードを書いて、動かして、コンソールのログや動作を確認することをおススメします。

各記事の概要

第1回 試して学ぶBackbone.js入門

Backbone.jsの概要から、インストール方法、Model、Collectionの基本を説明しています。

目次
  • はじめに
  • セットアップ
  • Modelの基本
  • Collectionの基本
  • Collectionの便利な関数

f:id:acro-engineer:20131008004749j:plain:w400

第2回 試して学ぶBackbone.js入門2

Backbone.jsの優れた機能である非同期RESTful JSONインタフェースによる永続化について説明しています。また、余談として、jQueryのDeferredオブジェクトを使った非同期リクエストのフローコントロールについても紹介しています。

目次
  • Backbone.jsのRESTful JSONインタフェースによる永続化
  • 補足
  • Model単独での永続化
  • 余談:jQueryのDeferredオブジェクトを使ってajaxの非同期リクエストを順次実行する
  • ModelとCollectionによる永続化

f:id:acro-engineer:20131008004754j:plain:w400

第3回 試して学ぶBackbone.js入門3

Backbone.jsによるアプリケーションのアーキテクチャを決定づけるBackbone.Eventsについて説明しています。

目次
  • はじめに
  • Backbone.Events
  • イベントの監視設定/解除
  • 実際にイベントを監視してみる(add, change, remove, reset, sort)
  • 実際にイベントを監視してみる(request, sync, destroy, invalid)
  • optionsハッシュのsilent:trueとwait:trueについて

f:id:acro-engineer:20131008004758j:plain:w400

第4回 試して学ぶBackbone.js入門4

Backbone.jsのアプリケーションの画面表示周りを制御するBackbone.View(以降、View)について、Memoアプリケーションの作成を実例にして説明しています。

目次
  • はじめに
  • Backbone.View
  • Viewのプロパティとメソッド
  • 今回の画面のHTML
  • AppViewの定義
  • ListViewの定義
  • ItemViewの定義
  • まとめ

f:id:acro-engineer:20131008004804p:plain

第5回 試して学ぶBackbone.js入門5

Backbone.jsの最終回の今回は、Backbone.Router(以降、Router)について、Memoアプリケーションに改良を加える形で説明しています。

目次
  • はじめに
  • Backbone.Router
  • Routerの定義
  • navigateメソッドによるURLの変更
  • pushStateを有効にする
  • pushStateを利用する際の注意点
  • まとめ

f:id:acro-engineer:20131008004810p:plain

この先の公開予定について

Backbone.jsの入門としてはここで紹介した全5回で記事は終了になります。今後まだいくつか記事が公開される予定なのですが、その中でも第4回から取り上げているMemoアプリケーションを題材として、以下のようなものがあります。

  • jQuery Mobileを使ってモバイルアプリケーションにしたもの
  • CoffeeScriptによって書き直したもの
  • LocalStorageを使って書いたもの
  • Application Cacheを導入したもの
  • バックエンドをBaaSであるParseによって書き直したもの

今回のBackbone.jsの記事と比較しながら読むと理解がより深まると思いますので、ぜひご期待ください!

f:id:acro-engineer:20131224231252p:plain

広告を非表示にする