Tech Sketch Bucket of Technical Chips by TIS Inc.

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう!~ ②Backbone.js編 ~

Pocket

前回 は、Ruby on Railsを使ってサーバー側にRESTful APIを実装しました。
今回はBackbone.jsを使ったクライアント側の実装をみていきます。


はじめに

前回 に引き続き、Backbone.jsを使ってクライアント側の実装をしてみます。
Backbone.jsは最近流行りのJavaScriptフレームワークの1つで、サーバとデータのやりとりを行う「Model」やDOMの構築やイベントを監視する「View」、複数のモデルをまとめてリストとして扱うことができる「Collection」、ルーティング機能を提供する「Router」などの機能からなります。
また、Backbone.jsはJavaScriptフレームワークの中では比較的軽量であることや、必要なライブラリがUnderscore.jsのみであり、依存するライブラリが少ないことも特徴の1つです。

今回はBackbone.jsを使って前回作成したRESTful APIを使ったサーバとの通信と簡単な画面の作成をしてみます。

アーキテクチャ

Backbone.jsを使うと、クライアント側にMVC(的な)構造を持たせることが可能になります。
今回作成したサンプルアプリケーションのアーキテクチャは以下のようになります。

Backbone_Architecture.png

RouterはURLの変更を監視し、Modelの作成やViewの作成を実施します。
Modelはサーバとデータのやり取りを実施し、Viewはイベントの監視とDOMの構築やModelへの
データ登録/更新の指示を行います。

このように、Backbone.jsを導入することで各機能の役割分担が明確になりソースの見通しがよくなります。

環境構築

ここではクライアント側に必要な環境構築を実施していきます。
前回、Ruby on Railsを用いてサーバ側の環境は作成したので、
クライアント側に必要なモジュール等を足していきましょう。
サーバ構築の詳細については 前回 の記事を参考にしてください。

*今回作成したサンプルも こちら に置いてありますので参考にしてみてください。

使用するライブラリ/モジュール

今回新たに追加するライブラリやモジュールは以下のとおりです。

ライブラリ バージョン 備考
backbone-on-rails 1.0.0 Ruby on Railsでbackbone.jsを使うためのgem
backbone.js 1.0.0 Backbone.js
underscore.js 1.0.0 Backbone.jsを使うために必要なユーティリティライブラリ

フォルダ構成の作成

ソース用フォルダとライブラリ用フォルダを作成します。
前回作成したrestSampleをコピーして、新しくbackboneSampleを作成し、
そこに必要なフォルダを作成していきましょう。

コントローラーの作成

RailsのAssetPipeline機能を使うと、Asset配下にあるJavaScriptをまとめて読み込んでくれるコントローラーを作成することができます。
そのため、今回作成するJavaScriptファイルは「app/assets/javascripts」配下に格納します。
HTMLの中身はBackbone.js側で生成するので、ほぼ空のHTMLを返すコントローラを作成します。
サーバ側のREST APIと混在させたくないので新しく作成することにしました。

index.html.erb以外は使用しないため、ファイルを削除しておきます。

必要なファイルの準備

必要ファイルを準備していきましょう。

ライブラリの準備

まずは、JavaScript関係のライブラリをlibsフォルダに格納します。

main.jsの作成

main.jsを作成します。
今回のアプリケーションのグローバル変数などを定義しています。
また、Routerの準備と履歴の監視もここに実装しておきます。

application.jsの作成

読み込むJavaScriptファイルなどの定義をしています。

動作確認

ここまで準備できたら、下記URLにアクセスしてみましょう。

http://example.com/backboneSample/

topImage.png

このように真っ白な画面が表示されていればOKです。

network.png

また、このページをGoogle Developer Toolsなどで見ると、JavaScriptファイルが読み込まれていることがわかると思います。

実装

作成するアプリケーションの機能

それではBackbone.jsを用いて実際に画面を作成していきましょう。
今回作成したアプリケーションはCRUD機能を持ったシンプルなブログのようなものです。
そのため、以下のような機能を持たせています。

・一覧表示
・新規作成
・詳細表示
・編集/削除

Model

まずは、Modelから見ていきましょう。

backboneSample/app/assets/javascripts/src/models/blog.js

とても簡単ですね。
URLルートを記載しておくだけで、RESTful APIを使ってサーバとの連携が可能になります。
Modelには他にも、バリデーションチェックなどの機能を持たせることも可能です。
詳細は 本家サイト をご参照ください。

Router

次はRouterを見てみましょう。

backboneSample/app/assets/javascripts/src/router/blogs_router.js

Router機能はURLの変更を監視し、変更があった場合には
対象となっている関数に振り分ける機能を持っています。

今回は、以下のようなルールで振り分けルールを作成しました。

  • blog : index (一覧)
  • blog/new : new (新規作成)
  • blog/id : show (詳細表示)
  • blog/id/edit : edit (詳細編集)

そして各メソッドの中で、以下の処理を実行しています。

  • Modelの作成とfetch()
  • Viewの作成とrender()の実行
  • HTMLファイルにDOMを追加

View / Template

では、View と Templateを見ていきます。
今回はeditを見ていきます。TemplateにはJSTを使用しました。

/backboneSample/app/assets/javascripts/src/views/blogs/edit.js

render()が呼び出されると、テンプレートを呼び出し、
モデルの値を埋め込んだHTMLファイルを作成します。

/backboneSample/app/assets/templates/blogs/edit.jst.ejs

Collection

一覧ページのように複数のデータを取得/表示したい場合にCollectionを使います。
ここではindexを例にCollectionの使い方を見ていきましょう。

まずはCollectionの定義です。

/backboneSample/app/assets/javascripts/src/collections/blogs.js

CollectionはViewで呼び出しをします。

/backboneSample/app/assets/javascripts/src/views/blogs/index.js

「index.jst.ejs」に全体のHTMLを記述し、「_item.jst.ejs」に繰り返し用のHTMLを記述しています。
この_item.jst.ejsにCollectionをマッピングすることで、一覧ページを作成しています。

実行結果

作成したアプリケーションはこのような感じになりました。

画面遷移.png

上図を見ていただくとわかりますが、単純な追加/参照/更新/削除の機能は持っていることがわかると思います。
見た目に関しては何もしていないので、とてもシンプルですね。

おわりに

今回は、Backbone.jsを使って簡単なCRUD機能を持つWebアプリを作成してみました。
Backbone.jsを使うことで、クライアント側のViewとModelを切り分けることができました。ただし、CSSなどには全く手を入れていないため、見た目が美しくありません。

そのため、次回はjQuery Mobileを使ってWebアプリの見た目をネイティブっぽく変更していきます。

お楽しみに!

エンジニア採用中!私たちと一緒に働いてみませんか?