JavaScript MVC座談会。遅くならない？ それぞれの特徴は？ サーバとの通信は？（後編）
JavaScriptでの大規模アプリケーション開発を支援する「JavaScript MVCフレームワーク」がいくつも登場し、注目され始めています。7月11日に開催された「第31回 HTML5とか勉強会」では、このJavaScript MVCフレームワークがテーマとなり、主なフレームワークの紹介と座談会が行われました。
それぞれのフレームワークがどんな特徴を持ち、何に向いているのか。非常に勉強になる内容でしたので、この記事では座談会の内容を紹介したいと思います。
（本記事は「座談会：JavaScript MVC、遅くならない？ それぞれの特徴は？ サーバとの通信は？（前編）」の続きです）
写真左から新野、清水氏、村田氏、斉藤氏、北村氏ローカルのモデルをサーバに保存するには？
新野 ここまでは主にビュー側の話をしてきましたが、次はモデルについてです。それぞれのフレームワークで、モデルとしてローカルに持ったデータをサーバに送って保存したいと、そのときはどうすればいいのか、といったあたりを教えてください。
北村 AngularJSはバックエンドとの接続は疎になっているというか、モデルに入れると自動的にサーバに送られるといった実装にはなっていないんです。HTTPのサービスがあるので、それを使ってRESTfulなリクエストを投げる機能があるので、あとは（プログラマが）ご自由に、という使い方ですね。
斉藤 Emberもすごく似ていて、それほどサーバと仲がいい感じは正直しないのですが、Railsに非常に似た形になっていて、Railsが持っているRESTful APIみたいなものを叩けばデータがとれる、みたいな形式です。
また、いまEmber Dataという、パーシステントデータを持つ専用のライブラリが追加予定になっていて、絶賛開発中です。
村田 Spineは先ほどの説明にも書いたように、モデルのエクステンドで（HTML5の）Local Storageに保存するかAjaxにするかを選べるので、Ajaxにした場合はRESTfulインターフェイスでJSONデータをサーバに送るようになっています。
また、ローカルに保存するようにモデルを定義して、ある程度データがたまったらサーバに移したいというシナリオもあると思うのですが、そういう場合には多分独自にサーバサイドと同期すると仕組みを作る必要があるのではないかと想像します。
清水 Backbone.jsもそんなに変わらないんですが、Backbone.syncという機能でRESTful APIを提供しています。ほかのフレームワークもそうなんですが、Railsの影響を受けていて、Backbone.jsもバックエンドにはRailsを使うと相性がいいですよ、といったことがドキュメントに書かれていたりします。
各フレームワークの学習曲線は？
新野 ここからは少し話題を変えて、各フレームワークの学習曲線やチーム開発での利点などがあれば、ご自身の経験なども含めて教えてもらえませんか。
清水 まずMVCフレームワークを使う前提としてMVCがどういうものか理解している必要があると思いますが、それが理解できているのであればBackbone.jsは比較的学習が楽なんじゃないかなと思います。
逆に、AngularJSは別の勉強会でちょっと触ったことがありまして、自動バインディングとか簡単なのはすぐできるのですが、細かいことをやろうとすると結構調べるのが大変だなと思いました。
村田 Spineはいまのお話の通り、MVCの理解は必要というところと、やはりCoffeeScriptでソースが書いてあるので、その知識は最初に必要かなと思います。
ただ、例えば私はJavaをやっていてJavaScriptをごりごりやっていた人ではないので、そういう見地からはCooffeeScriptで書いたコードは見やすいので、個人的な感想なのですが、そういうところからは学習しやすいかなと思います。
また、（Spineでは）やっていることがシンプルなので、どういう風に動いていて何をしなければ行けないのかが分かりやすく、みんなで学習する点でも分かりやすいかなと思っています。
斉藤 Ember.jsは、ある特定のルールに従って書きましょう、というものになっているので、それが分かっていないと使いやすいとは言えないですし、それを覚えるのには時間がかかるかなと。ただ、複数人で開発をするうえでは、同じ方法をみんなで共通して持つ点はプラスになるかなと思います。
北村 Angularについては、最初のハードルが低いというのが大きいと思います。清水さんが言ったように、ちょっと細かいことをやろうとしたときに調べるのが大変というのは間違ってなくて、たしかに僕はそこは苦労しました。
例えば実際に使った機能にはドキュメントになかったものもあって、それはサンプルコードを見ながら学んだりしました。学習曲線としては、まあ人によるっていうところはありますけど（笑）、僕個人の話をすれば、そんなに大変ではなかったという印象です。
チーム開発でいえば継承関係があるので、分かりやすいチーム分けが可能なんじゃないかなと思います。コントローラの部分で、例えばオレはここを作るからほかは作って、というとき、ここはこれを継承するから、っていうコミュニケーションはすごくやりやすいのではないかなと思います。
コミュニティとドキュメントの状況、そして展望
新野 最後はコミュニティやドキュメントの状況についてお話しいただこうと思います。そして、フレームワークの展望などもしあればあわせて教えてください。
北村 コミュニティの状況などですが、AngularJSのサイトを見ていただくと、ドキュメントがすごく充実しているというのがありますが、ただし日本語は残念ながらまだないんですね。でもサンプルコードなども多いのでそれらを参考にできると思いますし、メーリングリストも活発に議論されているので、そういったところでも英語なんですが質問してもらえればと思います。
また、もしご興味がある方がいれば、日本のAngularJSのコミュニティみたいなものを作ってもいいかなと思っているので、メーリングリストぐらいになるかもしれませんが、立ち上げたいと思っているので、そういう人がいたら教えてください。（その後、AngularJS Japan User Groupのメーリングリストができたそうです）
斉藤 Ember.jsのコミュニティはGithubの中でかなり活発にやりとりがされています。ドキュメントについては、先ほど日本語に翻訳したという話もしましたが、自慢するほどの量ではなくて、少ないです。なので、ソースコードを読んで調べなくてはいけないことも多々あるというのが現状かなと思います。
村田 Spineに関しては、やっぱりドキュメントは英語しかないのですが、ドキュメントやサンプルは結構あるので、それらを見ながら覚えていく感じかなあと。ただコミュニティの現状については私はあまり詳しくなくて。
今後は、Spine Mobileというモバイル向けの機能やリアルタイム向けのものも出てきているので、まだまだ発展する余地があるのかなと思っています。
清水 Backbone.jsのドキュメントはやはり英語しかなくて、日本のコミュニティもなくて。ただ海外だとコミュニティはBackboneConfなどのイベントも開催していて、コミュニティは活発なようです。
Backbone.jsは非常に小さいフレームワークなので、ドキュメントを読むよりソースコードを読んじゃった方が早いかな、というのが個人的な感想です。
今後の展望は、Backbone.js自体には大きな機能追加はなく、小さいフレームワークを保ったままいくのではないかと思っています。
北村 今後の展望を言い忘れたので追加で。いまWeb Componentsという標準化の動きがあります。この仕様を引っ張っているチームがグーグルの中にあって、AngularJSのチームと密接にやりあっているので、AngularJSにWeb Componentsを将来的に取り込んでいこうという動きがあります。
会場からの質問。メモリリークやスマートフォン対応について
新野 時間が10分ほどありますので、会場から質問があれば。
会場 画面が動的に切り替わるコンセプトのフレームワークで、メモリリークというか、画面が切り替わったときにイベントが残ってしまうとか、そういう問題はないのかと。ビューがないとそういう問題はないのかなと思うので、ビューがあるフレームワークでどうなんでしょう。
新野 では、AngularJSで北村さん、Ember.jsで斉藤さん、どうでしょう？
北村 分からないです。（後日、北村氏から補足情報「AngularJSチームはメモリリークについては専用のテストケースを用意していることに加え、開発者が特に意識することなくメモリリークを防ぐ仕組みを設けているとのこと。他のフレームワークとの差別化要因と位置づけていると言っておりました」）
斉藤 そんなには分からないんですけれども、ゾンビになるようなイベントが発生しづらくなっています。というのも、Handlebarsの中ですべてのバインドが行われていくものなので、消し忘れがなくて、そこが意見のあるフレームワーク、Opinionated Frameworkと言われているのですが、そういう作りになっています。
村田 Spineのコントローラで、Releaseという関数がありまして、それをちゃんと使うとモデルに対するイベントのバインディングというか、ちゃんと回収してきれいにしてくれる機能があります。
ある記事で、Backbone.jsからSpineへ移った理由、という記事があるのですが、理由の1つにReleaseメソッドがあげられていました（参考： 10 reasons why I switched to Spine）。
会場 北村さんに質問です。グーグルでAngularJSが使われている例はありますか。また、Closure Toolsとの使い分けについて何かあれば。
北村 ダブルクリックのサイトで、どの部分かは分かりませんが使われているそうです。AngularJSのサイトに出ています。
それからClosureとの使い分けなのですが、うちの会社の中でもみんな好きなことをやっている感じなので、多少カニバっても（共食いしても）あまり気にしないというところはあると思います。
会場 スマートフォンで使った際に、それぞれのフレームワークはどういう感じか教えてもらえませんか。
北村 AngularJSについては、ドキュメントを読んだかぎりモバイル向けに何かやっている、ということはないようです。
斉藤 Ember.jsは、やはり42kbという大きさなので、これで多分0.3秒くらいかかります。でjQueryを呼ぶとさらに0.3秒くらいかかって、これで0.6秒くらいパーになるので、基本的にはモバイルにはあまり向いていないのかなと現状では考えています。
村田 さっき少し紹介しましたが、Spine Mobileというモバイル向けのフレームワークが存在しています。ただし私はいじったことがないので、どこまでできるか、何ができるかまではここではお答えできないです。
清水 Backbone.jsは特にモバイル向けに何かやっているわけではないのですが、モバイル向けjkQuery互換フレームワークのXeptoとの組み合わせは、Backbone.js自体も小さいので、わりとモバイルで実用的に使えると思います。
北村 Twitterの方で「（AngularJSで）HTMLにng-属性を使うのはNGじゃねーの？」っていう質問がありまして。
実はAngularjsではHTMLのxmlnsで宣言すれば、ng-でなくng:って書くこともできますし、data-ng-という宣言をすればできますので、どれでもできます。AngularJSチームとしては、慣習としてng-を使っていると言っていました。
新野 ありがとうございます。以上で終了です。
以下が座談会の動画です。
JavaScript MVCフレームワーク関連記事
あわせて読みたい
