ASP.NET Web APIとknockout.jsによるSingle Page Application開発 (1)

Single Page Application とは？

• 文字通り、単一ページによるWebアプリケーション です。
• サーバーとのやりとりは REST などを使用して行います。

UIの作成

• Webアプリケーションなので、ユーザー インターフェースは HTML です。
• 単一ページなので、画面遷移は行われません。
  • サーバーから受信したデータを表示するためには、HTMLの要素 (D ocument O bject M odel, DOM) を JavaScript で頻繁に書き換える必要があります。
  • 全ての処理を自分でコーディングすることも可能ですが、通常はJavaScriptフレームワークを使用します。

代表的な JavaScriptフレームワーク

• backbone.js : JavaScriptフレームワークの草分け的存在。
• AngularJS : Googleが中心になって開発している。利用者も多い。
• Sencha : ExtJSという名前で、かなり昔からあったライブラリ。きれいなUIが特徴。
• knockout.js : Microsoftが中心になって開発している。IE6でも動作する。

上記以外にも大小様々なフレームワークが存在します。

それぞれ守備範囲が異なるので、プロジェクトにあったものを選択する (あるいは、採用したJavaScriptフレームワークの機能を考慮して設計する) 必要があります。

今回は比較的軽量な knockout.js を使用します。

• Ajax通信機能は含まれていないため、 jQuery と合わせて使用します。
  • HTMLへのデータ反映は knockout.js に任せ、jQuery では表示部分を触らないよう考慮して設計します。
    knockout.js と jQuery のHTML操作が混在するとカオスになります。
• UIのレイアウトには Bootstrapを使用します。
  • こちらも表示/非表示の切り替え等はknockout.jsで行います。

Knockout.js

knockout.js の MVVM

knockout.jsでは、以下の様な構成でコーディングします。

• M odel : サーバーから受け取ったデータ
• V iew : HTML
• V iew M odel : Modelを保持し、Viewとの仲介を行います。

MVVM は クライアントサイドMVC と呼ばれる事もあります。

• 参考
  • Knockout.JS本家
  • Knockout日本語ドキュメント

---

次へ