第一回 太一にモダンJSを教える会

と言う会が品川某所で、2011/10/05にヒッソリと開催されました。
お客様は主催者たる僕のみで、それ以外の参加者は基本的に講師という大変贅沢な会です。
それなりに話はあっちこっちしていたし、
話題に上がった重要そうな部分で、僕が覚えている事を補足しながらメモ書き。


妥当でない部分があったので、変更。


スケールするUI(by @monjudoh)

イベントを遅延ディスパッチする。ドラッグ&ドロップは実装が難しいかも。


イベントリスナは、より広い範囲で受ける。
例えば、一覧データなら、カラム内で受けるより、行で受ける方が良いし、それよりもテーブルで受ける方が良い。
これにはいくつか理由がある。
- 動的にデータが変更される中でイベントリスナの配置漏れによって適切に動作しない様なケースを避ける。
- イベントリスナのオブジェクトのインスタンス数を減らす。
- イベントリスナは登録処理が重いのでその回数を減らす。*1
- イベントの発火は巨大なforループなので、イベントの伝搬処理のコストを落とす。


Pjaxを使う場合、同じ結果になるテンプレート処理をクライアントとサーバでそれぞれ用意する必要がある。
mustache を使えば同じテンプレートをクライアントとサーバで共有出来る。極めて多くの言語で実装がある。
但しロジックをテンプレート内に記述出来無いので使い辛いかもしれない。
http://mustache.github.com/

Closure Templatesもまたクライアントとサーバでテンプレートを共有出来る。
但し、サーバはJavaかJSに限定される。
http://code.google.com/intl/ja/closure/templates/


DOMの構築をJSでどこまでやるのかをある程度きちんと決める事が大事。
要は、bodyタグの中にどれだけDOMエレメントを記述するのか?
Jsが動いていないcssとhtmlだけの状態で、どれだけの情報を人間が読み取る事が出来る状態にするのか?と言う事。
例えば、Ext.jsを使うとdivタグ一つだけになったりする。JSが動いていなければ、最悪画面には何も表示されない。
Closure Libraryの場合、どちらでも出来る。decorateするなら元のDOMを生かしつつ振る舞いだけ足す事が出来る。
jQueryはDOMスクリプティングする為のDSLと捉え、全てをjQuery上で賄うと考えない方が幸せになれる。
Closure LibraryのDOMをクエリする部分や属性を変更する部分だけjQueryを使う等と考えてはどうか?(要検証)

テストについて

テストの自動実行では、ランタイムとしてPhantomJS 使え
http://www.phantomjs.org/


PhantomJS+Closure Libraryのテストは、rokujyouhitomaのコードが参考になる。
https://bitbucket.org/rokujyouhitoma/closure-sample/


テストカバレージ取るなら、JSCoverage 使え
http://siliconforks.com/jscoverage/


QUnit-TAPによって膨大なPerlコミュニティの資産に相乗りせよ。
http://d.hatena.ne.jp/t-wada/20100604

Closure LibraryでQUnit-TAPを使う
http://d.hatena.ne.jp/cheesepie/20110620/1308515763
https://github.com/waka/js-closurelibrary-unittest-tap

CoffeeScriptに関して

エラーが起きた時のトラッキングが何だかんだで面倒そう。


積極的に対応したツールや環境が揃うまで待っても良いのではないか?


テストコードだけCoffeeScriptで書くというのはどうか?


Closure Library対応したCoffee Scriptコンパイラは存在する。
http://bolinfest.com/coffee/
「Closure: The Definitive Guide」を書いた人が実装した。

その他

prototype.jsについて
つい最近までRailsのデフォルトだったので、利用者は意外と多いのではないか?
今、なおメンテナンスが続いている。
少し古いprototype.jsは、ECMAScript 5とコンフリクトするので要注意


ES5じみたjsを書くのであれば、es5-shimオススメ。
https://github.com/kriskowal/es5-shim


ブラウザで動作するエディタUIコンポーネント

CodeMirror 2
http://codemirror.net/
対応している言語が多い


ACE
http://ace.ajax.org/
対応している言語は少ないがより高機能


次回以降は、モノが出来ている状態でそのコードをレビューしたり、
そのコードを書く中で太一が考えた事を披露したりする中で、マサカリをバンバン投げ合う感じにします。
凡そ、一か月から二か月以内に次回を開催したいと考えています。


特に大人数集めるつもりがありませんで、参加者を広く募ったりはしません。
どちらかというと、太一がお願いして来て頂く会になります。