SCRIPTY #02 に行った

SCRIPTY#2　〜フロントエンド紳士・淑女のための勉強会〜
http://scripty.connpass.com/event/10345/

セッション

• JSコードの品質 - platoの紹介 by @mwakkiy
• JavaScriptでトゥイーンアニメーション入門 by @wemra
• Flux + React.js入門 by @pirosikick
• Dockerを使ったWordPressテーマ開発、Selenium Serverについて by @moongift
• Meteorフレームワークについて @rukiadia
• ライブコーディングのすゝめ by @shamabe

僕は遅刻して「JSコードの品質 - platoの紹介」はちょっとしか聞けなかった。
個人的に面白かったものをいくつか紹介します。

わかってない所とか多々ありそうなので、間違っているところは遠慮なくPicaxe投げてもらえると有りがたいです。
あと、一応ですけど、なにか問題があったら教えてください。

JavaScriptでトゥイーンアニメーション入門

まずはCSS Transition、CSS Animation周りが辛いって話。

Transitionだと状態Aから状態Bへの直線的な変化しか表現できない(できないこともないけど)。
かといって、@keyframeをポチポチ打ってanimation書くのは辛いねって話で、そういう仕事は、できれば機械にやってもらいたいと思っている(やってる人ごめんなさい)。

で、次がjQuery.animate()の話で、まあこれも死ぬ。
Javascript触りたての頃にjQueryでモバイル向けのWebサービスのJS書いたことあったけど、とくにモバイルだとパフォーマンスが悪い。

原因は2つあって、

ひとつは「レイアウトスラッシング」と呼ばれる現象が起こることで、DOMに対してリフローを伴うようなスタイルの変更をした時、強制的に同期レイアウトを行うらしい。
結果、スタイルの読み出し(算出)と変更を交互に繰り返した場合、スタイルの読み出しの際には前の「スタイルの変更」を待つので、パフォーマンスが悪いように見える。

もうひとつは、リクエストアニメーションフレームを使用していないということ。
jQueryのアニメーションはsetTimeout()で表現されていた(requestAnimationFrame()が一時期入ったらしいけど、相性が悪い処理があったらしく、すぐsetTimeout()に戻ったって経緯があった。今はわからん)。

で、CSS Transition/AnimationとかjQuery.animate()とかの問題を解決するには、そういうの対応してるライブラリ使えばいいって提案が話のひとつ。

• velocity.js : 多機能
• tween.js : シンプル・軽量
• TweenMax : Flasher向け・有料

まああと、Webkit系ブラウザのみならWeb Animation APIもあるよ、って感じ。

Flux + React.js入門

ちょうどReact触ってたので、色々熱かった。

Reactの話は@mizchi先生あたりにでも聞いた方がよほど参考になるので、そちらを見てください。

なぜ仮想DOMという概念が俺達の魂を震えさせるのか
http://qiita.com/mizchi/items/4d25bc26def1719d52e6

あなたがReactを使うべき理由
http://mizchi.hatenablog.com/entry/2014/09/02/201728

• VirtualDOM
  • JavascriptでDOMを仮想表現する
  • 差分を計算した上で、DOMに反映 (この辺を勝手にやってくれるのがVirtual DOM)
  • DOMの変更コストは高いので、単純なデータバインディングよりよい
• データフローの見通しがいい
  • 基本的に親子構造の親が子にデータを渡していく(this.props経由とか)ので、ぐちゃぐちゃしにくい
  • データを書く場所がHTMLのattributeっぽいので、どこに書いてるのかもルール化されている
• propTypesってオブジェクトの中でthis.propsのバリデーションが書ける
  • これも見ようによってはルール化されてよい
• ライフサイクルメソッドが豊富で、API的にもわかりやすい(componentDidMountとか)。
• 再renderされる前に呼ばれるライフサイクルメソッド(shouldComponentUpdate)もあるらしく、return falseするとrenderingをキャンセルできるらしい。かっこいい。

けっこう駆け足だったのでメモが漏れた(Fluxの話とか完全に)。でもReact楽しい。

ライブコーディングのすゝめ

このタイトル見た時に、ああもうこれ名物になるんだろうなと思った。

前回(#1)でも同じタイトルのセッションがあって、今回もなかなかのバケモノライブコーディングをしていた。

10分でWeb RTCを利用したニコ生的なものを作るって感じで、相変わらず守備範囲が広い。用意してきてるにしても。

そんな感じで、僕がReactにとり憑かれた一日でした。