AngularJS ハッカソンに参加しました #angularjsjp

この土曜日は、Movablle Type LOVE な方々は、MTDDC Meetup KYUSHU 2013 で盛り上がっていたと思います。そんな中、私はグーグルさんが開催した AngularJS ハッカソン #1 に参加し、刺激的な1日を過ごすことができました。関係者のみなさん、一緒に参加したみなさん、ありがとうございました。

さて、AngularJS をご存知でない方もいらっしゃると思うので、簡単にご紹介します。Publickey の記事: グーグル製のJavaScript MVCフレームワーク「AngularJS」、正式版が公開 が一番わかりやすく整理されていると思いますが、フロントエンド側の JavaScript フレームワークの一つです。

最近、「ウェブサイトのアプリ化」が言われているなか、データ処理のすべてをサーバーサイドで実施するのではなく、サーバーサイドではフロントエンドからのリクエストに応じてデータのみを出力し、フロントエンドの JavaScript でデータを利用するということが普通におこなわれています。処理の複雑化、高度化といっことから、フロントサイドでも MVC フレームワークが必要とされてきていることもわかります。

そんな流れの中で、ハッカソンが開催されるということ、また初心者でもモチベーションが高ければ OK ということから勇気をもって参加しました。本当に参加してよかったです。

AngularJS は Movable Type 的な JavaScript MVC フレームワーク

jQuery に代表される JavaScript では DOM やイベントハンドラ等が必要となり、HTML 内に JavaScript コードが入ったり、その逆も発生したりします。すなわち、データ処理と表示が分離していないといえるわけです。

Movable Type が採用される理由の一つに、テンプレートとデータが独立して管理されている点があげられます。テンプレートタグを使うことで、データベースに格納されているデータを透過的に利用できるというものです。

AngularJS も同様の機能を有しており、HTML テンプレートに JavaScript によるロジックが含まれないため、Model (データ処理) と View (フロントエンドでの表示) が適切に分離されているといってもよいでしょう。実際にさわってみると、そのシンプルさに感動しました。

ハッカソンだからちゃんとコードを書く

午前中は、テストツール Testacular のメイン開発者である Googler @vojtajina さんに簡単なデモや解説を聞いた後に、チームを編成。昼食後に3時間でコードを上げて発表という流れでした。

AngularJS 初心者ということで、午前中のデモの内容を復習しながら「ダイエット TODO」アプリを、チームで作りました。「ダイエット TODO」は、自分が今日やる運動メニューを選択して TODO リストを作成し、それを完了させると「ご褒美」がもらえるというものです。実際にどんなののかというのは、山崎富美さんのブログ Angular.js ハッカソン #angularjs を見ていただきたいのですが、自分なりにがんばりましたw 成果は、Chrome なラッピングシール をいただきました。AngularJS な T シャツも選択できたのですが、サイズ的にね....

ダイエット TODO のコードを自宅で再復習

刺激的な一日が終わり、忘れずに再復習してみた コード を添付しておきます。AngularJS の特長の一つである 2-way データ・バインディングを利用しており、JavaScript の配列にデータを表示している中で、データを追加したら自動的に反映するというものです。ソースをみていただくとわかりますが、本当にロジック部分がシンプルなんですよ。 Google の北村さんもおっしゃっていましたが、これだけシンプルだと最初の取っ掛かりはいいですね。

懇親会のときに、北村さんにやりたいアイデアみたいなことを話したら、「それ AngularJS で OK 」といわれたので、MTDDC で発表すべく時間を作ってやってみようと思います。 また、ドキュメントの翻訳プロジェクトがスタートしたので、そちらもお手伝いしたいなと思います。

たまには新しい技術触ると、刺激的でいいね。本当に楽しかった。