※これはVOYAGE GROUP エンジニアブログ：Advent Calendar 2013の7日目です。
@ajiyoshiです。
さる2013/11/27に、VOYAGE GROUPの子会社であり、学生と企業が「支援」でつながる でお馴染みの就活支援サービスを運営している株式会社サポーターズ 主催のライブコーディングイベントにありました（#ステマ）。
このイベントでコーディングしてみせる役をやらせていただきましたので、このときに私が作ったものをご紹介します。
今回のライブコーディングイベントでは、はやりのAngularJSを使ってライフゲームを作るというお題をやってみました。
クライアントサイドJavaScriptで動くので、DropboxにでもHTMLとjsを置くだけで動かしてみることができます。 ソースコードはgithubに置いてあります。
- ViewとControllerが疎結合に書ける
- Modelの更新がViewに即反映される かつ View側の変更でModelが即更新される
- 面倒で汚くなりがちなDOM操作を書かなくていい
- プロジェクトのテンプレートが用意されている
- テストしやすい
- プロジェクトのひな形に最初からテストのひな形も含まれていてすぐテストを書ける
- 今回は書かなかったが、DOMレベルのエンドツーエンドテストなども書ける
- XHRなどのテストしづらい部分をDIによりテスト時にモックに差し替えられるような仕組みが用意されている
- 今回は使ってない
プロジェクトのひな形からの差分は、テストコードも含めて200行程度です。 ViewにもControllerにも DOM操作コードとかありません。 これだけでちゃんと動いて、しかも以下の機能を実現できているとかちょっと感動的です
- 表示するグリッドの幅と高さを指定できる
- 入力すると即時反映される
- セルをクリックすると生き死にを切り替えることができる
- 世代管理
- 一世代分次に進める
- 自動的に世代を進める
- ポーズする
AngularJSは、日本語のドキュメントが少ないのと、割りとフルスタックなのでソースコード追っかけるのもちょっと大変だったりしますが、とてもかわいいのでみなさん触ってみてください。
明日の #vgadvent2013 は @TachibanaKaoru さんです。