ToDoDoDo

WEBとクリエイティブな何かについて

AngularJSについて 〜AngularJS ハッカソン#1に参加してきました〜

イベント JavaScript AngularJS

f:id:eiji_sm:20130204203933j:plain

AngularJSとは

AngularJSはグーグル製のJavaScript MVCフレームワークです。
僕はこれまでJavaScriptのフロントエンドMVCフレームワークとしてBackboneJSを愛用していました。BackboneJSは現在最も人気のあるフロントエンドMVCフレームワークです。MVCによるクラス分離はもちろん、柔軟な書き方とUnderscoreJSに支えられた便利な制御構文メソッド、そしてデータバインディングなどが特徴的です。
しかし、BackboneJSを触っているとデータバインディングをもっとスマートに書けないかな、と思うことがしばしば。
そこで最近注目度急上昇しているのが、このAngularJSだったりするわけです。
AngularJSの最も特徴的なこととしては双方向性のデータバインディングが挙げられます。

サンプル

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

これはAngularJS公式サイトのトップに載っているサンプルですが、htmlタグにおまじないを付け、それからbody内のタグなどにmodelを埋め込みます。
このサンプルの場合だとyourNameがmodelとなります。
h1には出力用のコードが埋め込まれています。{{ }}での出力表現はテンプレートエンジンのMustacheを連想する方も多いのでは。
inputの値を変更すると、同期的にh1タグ内が書き換えられます。
ng-modelの値はJavaScriptコードとも同期しており、HTML、JavaScript問わず値がすべて書き変わります。
この双方向性のイベントハンドラを利用することで、特にWebアプリケーションの構築などにおいて、これまで沢山のコードを書かなければいけなかったのが、AngularJSを用いることで劇的な改善が見込めると思います。

ハッカソンについて

Google製のプロダクトということもあり、東京のGoogleがイベント会場でした。名古屋勢は僕だけだったのかな？
実際のイベントレポートとしてはFumi's TravelblogさんによるAngular.js ハッカソン #angularjsがとても詳しくレポートされていますのでそこを見ていただければ。
ハッカソンでは少人数のグループをいくつか作り、それぞれAngularJSによるWebアプリケーションを短時間で開発しました。
僕のチームではYoutubeのサンプラーを作成しました。シュールな成果物については、上記ブログでのレポートを見ていただければ (；´∀｀)

さて、成果物について語るのは置いておくとして、ハッカソンでは普段とは違う開発体制ということでいろいろと気づいたことも多かったです。

ハッカソンではDropboxを使うと良い。というのが最近の通説らしい

実際にはGithubを使えるのであればそちらを使うべき。と感じました。
AngularJSはJavaScript（ロジック）がHTML（ビュー）から綺麗に分離されています。それはテストが非常にしやすいというメリットがあるのですが、一方でHTML（ビュー）はJavaScript（ロジック）に深く依存していると感じています。
AngularJSの場合、ハッカソンなどの少単位のプロジェクトにおいては、メインのHTMLファイルを複数人が編集することになると思います。なのでDropboxでの管理は非常に厄介。Dropboxを使うのであれば、一番はじめにきちんと設計を詰めて、各自モジュール単位での開発を徹底しないと厳しい。そしてこれは普段の開発にも通ずるところがあると感じました。
実際に業務で導入する前にこういうちょっとしたトラブルを経験できたのはありがたいです。逆に言ってしまえば、より厳密なモジュール単位での開発がしやすくなるフレームワークであると言えるので、とても興味深い。

まとめ

AngularJSでのインタラクティブなWebアプリケーション実装はとてもうつくしーです。
これまで非常にめんどくさいなーと思いながらFLASHライクな数々のWebアプリケーション実装を高速に開発できそうで今からとても楽しみです。
AngularJSについてのTIPSも今後どんどん溜めていきたいですね。