必要条件

この記事に必要な予備知識

JavaScriptの基礎の理解

サンプルファイル:

ユーザーレベル

すべて

原文 作成日: 2012/3/19

Backbone.js Wine Cellar tutorial – Part 1: Getting started

JavaScriptを使用した基幹Webアプリケーションの開発における課題の1つに、JavaScriptが非宣言的な言語であるため、そもそもコードを構造化できない(基礎構造(backbone)の欠如)という点があります。JavaScriptで記述すると、多くの場合、結束性が弱く関連性のないコードブロックが多数生み出され、コードのロジックと構成に意味を持たせることがすぐに困難になってしまいます。

軽量フレームワークであるBackbone.jsは、JavaScriptを多用するWebアプリケーションを構造化することで、この問題を解決します。

組み込みのビルディングブロック

Backbone.jsには、Model、Collection、View、Routerなどいくつかのクラスが用意されており、それらを拡張してアプリケーションのビルディングブロックを定義することができます。Backbone.jsでアプリケーションを開発する場合、まずアプリケーションのModel、CollectionおよびViewを作成します。次に、ディープリンクが可能なURLのセットでアプリケーションのエントリポイントとなるRouterを定義して、これらのコンポーネントを実装します。

Backbone.jsを使うと、コードを組み込みの各エンティティ(Model、Collection、View)ごとに整理できます。つまり、コードブロックの結束性と関連性の欠如という問題を解決できます。

データバインディング

Backbone.jsでは、ViewとModelをバインディングすることで、Modelのデータが変更されたときに、そのModelにバインディングされているすべてのViewが自動的に更新されます。Backbone.jsを使えば、複雑なUI同期コードを書く必要がありません。

スマートなREST統合

Backbone.jsでは、RESTfulサービスを無理なく魔法のように、スマートに統合できます。純正のRESTful APIを介してバックエンドデータを表示させる場合、Backbone.js のシンプルなModel APIを使用すると、モデルの取得(GET)、作成(POST)、更新(PUT)、削除(DELETE)の操作が驚くほど簡単になります。

ワインセラーのサンプルアプリケーションについて

この3部構成のチュートリアルでは、ワインリストの表示と、ワインリストへのワインの登録、更新、削除ができるワインセラーアプリケーションを作成します。

読み取り専用のワインセラーアプリケーションのコードの解説

第1部の読み取り専用アプリケーションの動作は、ここをクリックするとご覧いただけます。

backbone.jsのコードを以下に示します。以降の説明を理解しやすいように、ソースコントロールサイトからコードをダウンロードすることをお勧めします。このアプリケーションのダウンロードサイトへのリンクは、上記の「要件」のセクションに記載されています。

コードの説明:

  1. WineModel(2行目):このコードでは、属性(名前、国、年など)は明示的に定義されていません。検証、デフォルト値などを追加できます。これについては、「第2部:CRUD」で詳しく説明します。
  2. WineCollection(4行目~7行目):modelはコレクションの種類を示します。urlは、RESTFul APIのエンドポイントです。この2つの情報だけで、BackboneのサンプルのModel APIでワインを表示、登録、更新、削除することができます。
  3. WineListView(10行目~25行目):render()関数がコレクションを反復処理し、コレクション内のワインごとにWineListItemViewのインスタンスを作成してwineListに追加します。
  4. WineListItemView(27行目~38行目):render()関数がmodelのデータをwine-list-itemテンプレート(index.htmlで定義されている)に統合します。リストの項目ごとに個別のViewを定義しておけば、対応するmodelが変更された場合に、リスト全体を更新せずに、変更の影響を受けるリスト項目のみを簡単に更新(再表示)できます。これについては、「第2部:CRUD」で詳しく説明します。
  5. WineView(40行目~49行目):Wineフォームにワインの詳細情報を表示するビューです。render()関数が、index.htmlから取得されたwine-detailsテンプレートにmodelデータ(個々のワイン)を統合します。
  6. AppRouter(52行目~71行目):このコードは、(ディープリンクが可能な)URLのセットを使用してアプリケーションのエントリポイントを指定します。2つのルートが定義されています。デフォルトのルート("")はワインのリストを表示します。wines/:idルートは、個々のワインの情報をワインフォームに表示します。第1部では、このルートはディープリンク不可にされています。したがって、まずデフォルトのルートを指定してアプリケーションを起動した後に、個々のワインを選択する必要があります。個々のワインへディープリンクする機能は、「第3部:ディープリンクとアプリケーションの状態」で実装します。

次のステップ

次の「第2部:CRUD」では、このアプリケーションに機能を追加する方法を説明します。