【JavaScript】JavaScriptフレームワークの実践的な使い方Vol.2 CoffeeScript/Require.js

読了: 約 5 分

JSフレームワークに関する概要を以前記事を書いたのですが、それの続編として、管理やリファクタリング・テストなどに使うのは何が良いか
などなど、それに必要な知識や参考書籍、情報をまとめておきます。

以前の記事
【JavaScript】これだけ見ればJavaScriptフレームワークの概要を理解できる、フレームワーク毎の利点・使い方まとめ

概要

1 目的
2 参考例
3 依存関係を解決するRequireJS
4 軽量フレームワークzepto.js
5 CoffeeScriptとは
- 5.1 Sammy.js
6 メモリリークを見つける

目的

console.log,alertなど意外のテスト
リファクタリングをするために
大規模開発のためのJavaScriptを学ぶための運用方法を学ぶため

参考例

サイボウズといえばJS界隈では知らない人がいないと思いますが、あまちゃんさんが元々いた企業です。サイボウズの開発ノウハウがつまった書籍。

Node.jsや最近のMVCフレームワークを中心に書かれていて、これから使うという方は必見の一冊。

サイボウズの開発ノウハウも──「JavaScript徹底攻略」が発売されました

WEBサービス関わっている方はこちらもあわせてどうぞ
こちらはどちらかというとデザインやフロントエンドの技術というよりかは、インフラ・サーバーの方の話になっています。
ただ、フロントの人にも分かりやすく書かれているので、サーバー側の話も知っておきたいという方におすすめです。
個人的にはクックパッドさんのインフラチームの200msでレスポンスは返すという話が面白かったです。
また、Yahoo!メールのUI設計チームのモーダルの作り方、その意図というのもフロントエンドに携わる者としては参考になりました。

依存関係を解決するRequireJS

非同期処理
非同期ローディングによって、レンダリングの邪魔をしないので高速化につながるということで、
スマホサイトやスマホアプリなどで使用しているケースが多いですね。
下記非常に参考になります。

RequireJSでTwitter Bootstrap（jQuery）を非同期ローディングしてみる

RequireJSにてBackbone.jsとMustache.jsを読み込む
現在関わっている案件でBackbone.jsを使っていますが、この方法はやっていなかったので試してみたい。
rubyの書き方でassetsのjavascriptsフォルダの中にjsファイルを分割して入れているとそれをminifyしてcompressしてくれるので、
あまり気になっていなかったのですが、Backbone.jsを使っていて処理の重さが気になるようになりました。
結局イベントを増やしたり、Modelの出番があまりなかったりするのでBackboneどうなのかなzeptoだけでいいんじゃないのかなとか
とはいえ、急にかえることも出来ないのでその中で高速化する手段としてbackboneの非同期ロードを模索してみようと思います。

参考
勉強会資料シェア Getting Started with RequireJS

enchant.jsを使用したときの参考
RequireJSによるコードの分割と最適化 for enchant.js

OPTIMIZER
http://requirejs.org/docs/optimization.html

軽量フレームワークzepto.js

jQueryとの互換性があるというzepto.js。
会社のJSエンジニアの中でも結構人気があります。
その理由は、jQueryは多機能だが重い。zeptoはjQueryの機能をすべて持っているわけではないが軽い。
といったようです。
http://zeptojs.com/

Zepto.jsは実用に耐えうるか
ポイント
・クックパッドさんは2011/8位からzepto.jsを使用している.
・サイズが小さく、古いiOSでもキャッシュされる
・jQueryとAPIが良く似ているので、学習コストが低い
・タッチイベント、CSSアニメーションなどWebKit向けの処理に対応している

・jQueryと互換性があるといっても、jQueryプラグインはそのままでは動かない
・jQueryと比べると小さいプロジェクトなので、将来性が不安
・Zepto.js では、 fadeOut() fadeIn() が無い
・zepto.jsはほぼjQueryだけど、IE対応とかを削って軽くしてる。スマホ向け。

参照

https://groups.google.com/forum/#!msg/html5-developers-jp/rh63mX6T7Zc/XjB5wsiFLHEJ

Railsでzepto.js(軽量jQuery)を使う
http://qiita.com/items/721b94879a079e8f939b

jQuery vs Zepto vs jQMobi – which one is the fastest?
jQuery vs Zepto vs jQMobi – which one is the fastest?
IEをのぞいてと書いてありますね。

Zepto (also called Zepto.js) aims to be smaller and load faster than jQuery. It supports both modern desktop browsers and mobile browsers (with the exception of Internet Explorer).

TEST RESULTS,DISCUSSIOMの箇所が結構面白いですね。
DOM操作がパフォーマンスには非常に関わってくるので、DOM操作を行う場合のフレームワークの選択は非常に重要です。
そして、全体的にjqMobiのパフォーマンスがjQueryやzepto.jsより良いように見えて、そこまで使われていない気がするのですが、
まだ出来たばかりで不安定だからあまり使われていないのでしょうかね…。

ポイント
・jQueryのminifyする前のコードのサイズ32KBに大して、jqMobiは5kbでスマホ用に使える軽量。

CoffeeScriptベストプラクティス集ブラウザ向けJavaScript編（1）