「今年はunstatedがくる」と同僚が言っていたのでunstatedを使ってなにか作ってみようと思った。unstatedはReactのContextを使ってStateを簡単に管理できるモジュール。ソースコードは200行に満たないにも関わらずとても強力。
jamiebuilds/unstated: State so simple, it goes without saying
作ったもの
koirand/nixie-timer: Nixie tube style count down timer.
デモは こちら 。時間を設定して[Start]ボタンを押すとカウントダウンが始まる。カウントダウン中は時計以外が隠れるので、デザインスプリントやワークショップなどで、スクリーンとかモニタとかに映すと格好がよろしいかと。画像の素材は Photoshop ニキシー管風味カウンター素材 - trismegistuslabo トリメギ から拝借させてもらった。
unstated使ってみた感想
今いる会社はフロントエンドのエンジニアがそんなにいないのでReduxを社内で使っていくのは正直厳しいが、unstatedなら覚えることが少なくて大丈夫そうだと感じた。componentDidMountなどでStateを更新したい場合にHOCをかまさないといけないのが若干アレだけど慣れれば大したことない。
gh-pages
今回 gh-pages - npm を使ってデモページをデプロイしてみた。このモジュールもとてもお手軽で良かった。
"scripts": {
"predeploy": "yarn build",
"deploy": "gh-pages -d build -m \"[ci skip]\""
}
package.jsonにこのようにscriptsを書いておけば、yarn deployするとGitHub Pagesにデプロイできる。ちなみにCIをスキップするために、-mオプションでコミットメッセージに[ci skip]を入れるようにしている。