7月11日、第31回目の「HTML5とか勉強会」はmixiさんのオフィスをお借りして開催しました。 今回のテーマは前々回、前回に続くフレームワーク特集として、JavaScriptによるMVCフレームワークをテーマにセッションが行われました。

本稿では、今回のイベントについてレポートします。

Backbone.js

はじめに、NHN Japanの清水大輔さんより、Backbone.jsの特徴や使い方について、講演いただきました。

講演ではMVCの基礎と使うにあたっての考え方、Backbone.jsの詳細な使い方などを紹介しました。

最近ではHTML5やブラウザの高速化に伴い、Webアプリ上でもネイティブアプリに近いUXの実現が可能になってきています。特にJavaScriptで複数のViewを切り替えるようなアプリでは、コードが複雑になりがちです。その際、Backbone.jsなどのMVCフレームワークを使うことでより高品質で保守性の高いコードが書けるようになるのではないかと述べていました。

Backbone.jsの特徴としては軽量であること、豊富なAPIが用意されていることを挙げていました。また、Backbone.jsに関係するライブラリについても触れていました。

Bakcbone.jsに依存関係があるUnderscore.jsはJavaScript用のユーティリティライブラリで、多くの便利な関数を提供してくれるため、Backbone.jsを使わないとしてもUnderscore.jsは単体で使う価値のある非常に便利なライブラリだと紹介しました。

講演資料はこちらになります。

Spine入門

つぎに、Acroquest Technologyの村田賢一郎さんにSpine.jsについて講演いただきました。

講演ではSpine.jsの3つの特徴を挙げ、Spine.jsの使い方をわかりやすく紹介しました。

• SimpleなMVCモデルアーキテクチャ
• Lightweightなフレームワーク
  • ライン数：約500行
  • サイズ：約7kb
  • 依存ライブラリがない
• CoffeeScriptを使用している
  • Javaエンジニアにとっては簡潔でわかりやすい記述

Spine.jsはHemという開発用サーバ＆依存関係管理ツールを使うことで簡単にデバッグが行えるとのことです。*.coffeeや*.stylといったファイルをJavaScriptとCSSに変換してくれたり、ファイル更新の監視によってサーバを再起動することなく自動で反映してくれたりと、開発が非常に楽にできると紹介しました。

講演資料はこちらになります。

Playing With Ember.js

つぎに、サイバーエージェントの斉藤祐也さんにEmber.jsについて講演いただきました。

Ember.jsの大きな特徴の2つとして次のような点を挙げていました。

• Eliminates Boilerplate
  • 同じようなコードを何回も書かない
• Provide a standard application architecture
  • 標準的なアプリ構造の供給

アプリケーションがこういう構造を持っているべき、という考えからEmber.jsでは最初から標準的な構造を提供しています。標準で用意している物が多いことからEmber.jsのファイルサイズは他のフレームワークに比べて大きくなっているとのことです。

次に象徴的な特徴について3つ、次の点を挙げていました。

• 2-way binding
  • ModelとViewのそれぞれが双方向に変更を反映しあう
• Computed properties
  • 関数をプロパティのように扱える
• Auto-updating Template
  • 自動で更新するテンプレート

今回の講演のためにEmber.jsのドキュメントを翻訳されたとのことです。斉藤さんが翻訳された日本語ドキュメントはこちらになります。講演資料も合わせてご覧ください。

Angular.js

つぎに、Googleの北村英志さんにライブコーディングでAngular.jsの使い方と特徴を講演いただきました。

MVCフレームワークは使うのに事前知識が必要なことが多いですが、Angular.jsはすぐに使い始められる、ということを示すためにライブコーディングをすることにしたとのことです。

Angular.jsの良いところとして次の点を挙げていました。

• 初めての人にも手が出しやすい
• 双方向データバインディング
• DOM構造と直感的に結びつくControllerの継承関係
• テストがしやすい作りになっている

講演ではこれらの特徴の解説として、双方向データバインディングの方法、リストに対してのイテレーションなどを用いて非常にわかりやすく紹介していました。

北村さんが作られたAngular.jsの日本語ユーザーグループがありますので、興味がある方は是非ご参加ください。

講演資料はこちらになります。

JavaScript MVCフレームワーク 座談会

さいごに、講演をしていただいた4名の方々による座談会が行われました。モデレータはpublickeyの新野淳一さんに務めていただきました。

座談会ではセッションで紹介された4つのフレームワークについて、それぞれ質問を投げかける形式で行われました。特徴を上手く引き出す質問ばかりで、各フレームワークに対しての理解が深められること間違いなしの座談会でした。

座談会では次のような質問がありました。

• フレームワークを使うと遅くなるのか
• UIのバインディングがあるとないとで何か違いがあるのか
• フレームワークと他のライブラリの組み合わせ、依存関係について
• バックエンドとのデータのやり取りの方法
• それぞれのフレームワークをチーム開発で使った時の生産性と学習曲線について
• ドキュメントやコミュニティの状況、これからどうなっていきそうか

会場からの質問

• Viewの切り替えによるメモリリークなどの問題はあるのか
• Angular.jsはGoogleのプロダクトで使われているのか、Closure Toolsとの住み分けはどうなのか
• スマートフォンの上で動かしたときのパフォーマンスはどうなのか

それぞれの回答については是非講演動画にて確認してみてください。また、モデレータの新野さんが執筆された記事がありますので、こちらも合わせて参照してみてください。

最後に

レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどがありましたら、twitter（@nakajmg）まで気軽につぶやいていただければと思います。

本勉強会は、毎月第3水曜日、または第3木曜日に開催していますので、興味を持たれた方はぜひ参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5j.orgのMLで行われますので、こちらをご確認ください。また、コミュニティサイトhtml5j.orgも公開していますので、ぜひこちらもご覧ください。