Reactでビデオサンプラー作ってみた
使い方は↓
16進数4文字で一小節のパターン指定する。
4小節までできる。
- 四つ打ち:
0x8888 - 16分連打:
0xFFFF - BAD APPLE!のイントロ:
0x888F888A 0x888F8888
Reactの感想
ReactはDOMをJSXで書くんだけど、書きたくないじゃん？
平易なJSで書くために、react-kupなどのラッパーがある。
今回は、もっと楽がしたかったので、自分でspacepenっぽいラッパー書こうとしたけど無理そうだった。
結局、JSX、一人で書く分にはそんなに悪く無いと思い始め、JSXで書いた。
パフォーマンスなどは知らん。
もっとDOMをたくさん生成するフィードリーダーとかじゃないとわからないと思う。
イベントの書き方とか決めてくれるので、書くのは楽。
flux
ReactはMVCのV相当だけど、Reactを主軸に据えた設計パターンとしてfluxってのがある。 今回はfluxのtutorialやって、それ見ながら実装した。
http://facebook.github.io/flux/
Action, Store, Dispathcher, Componentって単位で実装していく。
- Action: eventを発行する方法
- Store: BackboneでいうModel, Collectionの役割 実際Controllerっぽい事もする
- Dispatcher: イベントがどこ由来なのかを管理
という感じ。 イベントの管理にはEventEmitterを使ってる。
globalなイベントをどこからでも発行できると大変なので、fluxではActionでイベントのインターフェイス？？的なものを決めて、他の所ではActionを呼ぶ。 たとえばTodoのViewから他のTodoになんかしたいとき、Todo -> Action -> (Dispatcher) -> Store -> Todo という事になる。 コード量は割と増える。
flux、どこみても「MVCを誤解してる」とか叩かれてるし、お通夜感ある。
Reactだけ普及できればいいけど、DOMをJSファイルに書かないといけないReactがどこまで普及するか分からない。
Reactみたいな仮想DOMを使うアプローチ、ElmとかMercuryで使ってるらしい。
Mercuryよさそう、普及してほしい。
(参考: http://efcl.info/2014/08/28/mercury/)
成果物について
- 既存の何かをReactに移行するのはめっちゃダルそう
- videoタグ重いのか、setTimeoutでパカパカ動かすのは厳しいことがわかった
- videoパカパカするのoFとかじゃないとだめか…
