読了: 約 5 分

JavaScriptのフレームワークが増えてきて、なにがどう使えて今までとなにが違うのか、
開発の流行等纏めておきます。
大規模開発、ゲーム開発等規模や用途によって使い分けられるようにメモしておこうと思います。

JavaScriptフレームワーク

最近よく聞くようになったフレームワークを挙げてみました。

  • Backbone.js
  • SproutCore
  • Sammy.js
  • Spine.js
  • Cappuccino
  • Knockout.js
  • Javascript MVC
  • GWT
  • Google Closure
  • Ember.js
  • Angular.js
  • Batman.js
  • enchant.js

enchant.jsとは

enchant.jsは日本のユビキタスエンターテインメント社が開発した
ゲーム開発用のフレームワークです。
このサイトでもご紹介しましたが、ゲームスタート、ゲームオーバー時の処理など
簡単に作る事が出来て、非常に便利なものです。

enchant.js – HTML5+JSのゲーム事例と使い方 –

MVCモデルパターンとは

JavaScriptでのMVCというものですね。
色々な記事を見ていると、大規模ならBackbone、小規模ならKnockoutをおススメという事がありますが、
果たしてどうなのでしょうか。一先ず今回はBackboneと最近人気のAngular.jsについてまとめていきたいと思います。

概要を理解するためにおすすめの参考書籍

  • 1章　 MVCとクラス
  • 2章　イベントと監視
  • 3章　モデルとデータ
  • 4章　コントローラと内部状態
  • 5章　ビューとテンプレート
  • 6章　依存性の管理
  • 7章　ファイルの操作
  • 8章　リアルタイム Web
  • 9章　テストとデバッグ
  • 10章　アプリケーションのデプロイ
  • 11章　 Spineライブラリ
  • 12章　 Backboneライブラリ
  • 13章　 JavaScriptMVCライブラリ
  • 付録 A　jQuery入門
  • 付録 B　CSSの拡張
  • 付録 C　CSS3リファレンス

JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ

Backbone.jsの非常に参考になる解説記事

大規模なjsアプリケーション開発になった時に、jQueryではなく、より洗練されたデザインパターンである
MVCモデルを使用すべきだという内容の元書かれております。
自分もCakePHPを少しやっていて、サーバーサイドプログラミングでは普通に使われていたものなのですが、
JSでという事で、非常に分かり易いです。
Backbone.jsを利用したクライアントサイドMVCの導入についてそろそろ書いておくか
Qiitaにも7回に分けた解説記事がありますのでそちらも合せて。

Backbone.jsの解説スライド

そもそも大規模開発の設計とは

CoffeeScriptとは

参考書籍

JavaScriptの良いパーツだけを使おうという本。

Angular.js

HTML5の書籍など書かれている小松氏のブログから非常に簡単な使い方など
サンプルソースコードもあって分かり易いです。

AngularJSとは、HTMLをテンプレートエンジンとして積極的に活用することでこれらの問題を解決してくれるフレームワークです。
JavaScriptでDOM操作する時に、複雑になりがちなソースコードを綺麗に保つ事が目的です。
個人的にはphpでいうsmartyのような形で出来るので、デザイナーやマークアップの人でも分かり易く、使い易い気がします。

クールなMVCを実現するフレームワーク Angular.js の紹介

Angular.jsのメリットが分かり易い記事

特に、STEP 4 – ROUTING　URLによってTemplateを切り替える
これかなり使えますね！

app.js

angular.module('colorset', []).config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/colors', {templateUrl: 'color-list.html',   controller: ColorListCtrl}).
      when('/colors/:colorId', {templateUrl: 'color-detail.html', controller: ColorDetailCtrl}).
      otherwise({redirectTo: '/colors'});
}]);

controller.js

function ColorDetailCtrl($scope, $routeParams){
  $scope.colorId=$routeParams.colorId;
}

index.html

<html ng-app="colorset">
<head>
  ...
  <script src="app.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

ANGULAR.JSのここがアツい！！

Angular.jsのデメリットは

デメリット

  • 機能を分けずに1ファイルに書いているので
  • 再利用できない
  • 分業できない
  • テストできない
  • 規模が大きくなりすぎて管理できない

参考資料

【開催レポート】第2回.js系勉強会

発表資料

JavaScriptステップアップのための書籍