さてフロントエンドエンジニアな私なので、もちろんぜんぶフロントでやってます。

コードはいつもどおりGitHubに全部あるしこれが全てなので、よければ覗いてみてください。

github.com



たったこれだけです。 HTML Canvas をよく知らない人は、サーバーレスでなんでこんなことが・・・！って感じかもですね。

React x flumpt

完全にやってみたかったドリブン技術選定です。

前にReactだけを使って後は適当に書くスタイルでアプリを書いたことがあって、結局ReactはPubSub機構なしには(= そしてFlux的に上からステートを流す)うまく使えないなーという結論だったので、今回ははじめからそれに準ずるものを使おうと思ってました。

こないだの翻訳記事でFluxするならReduxがオススメ！だって使ってる人多いから！ってのを書いた直後ですが、採用したのはReduxではなくflumptというものです。

↑の記事やサンプルコードを見てもわかる通り、ほんとに薄い実装でわかりやすーいライブラリです。

同じくEventEmitterだけあれば十分やろーって思ってましたが、他にも色々できてさすがの一品でございました。

おかげで迷うことなく(そもそも大した規模じゃないけど)使えて助かりました。

READMEの変数名にtypoがあったりイベント名が変わってたりするのはそのうちなおるでしょう( ˘ω˘)ｽﾔｧ

Reactのいいところ この程度の規模でReact語ってんじゃねーよって言われそうですが、まぁ一応。 個人的には、コードの書き方が一定になるので後から読みやすいのが一番かなーと思います。 中の細かいstateとかlifecycleEventとかのお作法はあれど、Reactはコンポーネントしか返さないのでrenderだけに集中して、

あとのロジックをReactのいないところで全部やる！それだけ！ っていうのがコードレベルで統一できるのは大変よろしいと思います。

Reactのわるいところ JSXのあと一歩足りない感。 <ul className= "tab-header" > { tabItems.map((item, idx) => { let isSelected = idx === selectedTabIdx; return ( <li className= { ` tab-header__item tab-header__item--type-$ { item.group } $ { isSelected ? 'is-selected' : '' } ` } onTouchTap= { () => { this .onClickTab(idx); }} key= { item.order } > <h2> { item.name } </h2> </li> ); } ) } </ul> もうちょっと綺麗にならんもんかなー。

classNamesみたいなモジュール使ってもいいけど、なんだかなー。 スタイル当てる系のライブラリも、いつまでたってもbefore/afterの擬似クラスは使えるようにならんしー。

その点まだVue.jsとかVueifyは良かったなー。