Reactとかgulpとかfirebaseとか色々いじってみた
色々一気にやりすぎてちょっとパンク気味ですが、以下のリポジトリにおいて最近興味があったものを色々試してみました。 iOSやAPIサーバの仕事ばかりやっている間に大きく遅れてしまったWebのフロントエンド技術にキャッチアップしたいというのが狙いです。
satococoa/react-firebase-chat · GitHub
今できているものは単純なチャットアプリみたいなものです。ページングとかは手を抜いています。
試してみたこと一覧
Reactは最近流行りのJSのライブラリですね。最近仕事でVue.jsを導入してみてとても良い感触を得ているのですが、それと比べてどうなんだろう？という比較もしたいと思い。
FirebaseはいわゆるMBaaSの一つで、だいたいParseと同等の機能があるようですね。FirebaseがGoogleに買収されたことから興味を持ったのでした。
Web Starter KitはGoogleが公開しているWebのベストプラクティス集であるWeb Fundamentalsを元にした静的Webサイトのテンプレート(boilerplate)ですね。HTMLのテンプレート+UIコンポーネント+gulpタスクって感じです。
BourbonはSASSのフレームワークです。仕事ではCompassとかBootstrapとかを使っているのですが、他のものも一応知っておきたいなと思い。
感想
React良さそう
コードはほとんど Tutorial | React にあるものを真似てサーバとのやりとり部分をFirebaseのAPIに置き換えただけのものなのですが、それだけでもReactいいなぁという感触を得ました。特に以下のあたりが好みです。
唯一気持ち悪いと思うのが、JSのrenderメソッド内にべたっとHTMLを書いちゃうところですが、コンポーネントを構成するロジックとviewとが一箇所でカプセル化されていると考えればまぁ、アリなのかもしれません。
JSXのコンパイルとか既存ライブラリとの共存とかが難しそうなので、ガッツリJSでガリガリ動くアプリを書くときはReact、そうではなくて便利なViewModelが欲しいだけならVue.jsといった使い分けが個人的にはしっくりきています。
Firebase良さそう
特にはまりどころもなくすんなり使うことができました。提供されている機能はほぼParseと同等ですが、料金体系が結構違うのでアプリの性質によって使い分けるのが良さそうです。Parseはリクエスト数による課金、Firebaseは同時接続数による課金というざっくりしたイメージです。
今回作ったサンプルプロジェクトはfirebaseのhosting機能を使ってデプロイしています。静的ファイルを置くだけだからかもしれませんが、全くハマることなくすんなりデプロイできました。
Bourbon良さそう
Compass と比べても遜色ないと思います。ドキュメントもわかりやすく、機能的にもFlexboxとかAnimation、Modular Scaleなんかもサポートしているので十分使えそうです。
また、Bourbonベースで作れらたneatというグリッドフレームワークやbittersというスタイル集もbootstrapほど何でも揃っている感じではありませんが、自前でスタイルをある程度頑張るつもりであれば足がかりとして使えそうな印象を持ちました。
gulpつらい
Web Starter Kit には最初からgulpのタスクが付いています。そのまま使うのなら良いのですがデフォルトで既に秘伝のタレ化していて、理解するのが若干辛かったです。具体的にはJSXをコンパイルするタスクを挟み込むのに結構苦労してしまいました。 middlemanとかを使ってrubyのasset pipelineに逃げたくなりました。 調べれば調べるほど、webpackだとかbrowserifyとかいろんなツールが出てきて大混乱でした。実際、今回のサンプルプロジェクトを作るにあたってFirebaseやReactでは全くハマらず、gulpで無駄に時間を費やしてヤクの毛刈りしている気分でした。
個人的には npm run を使う方法の方が gulp のお作法を覚えるよりもシンプルで unix 的だなーと今のところは感じています。 参考: npm で依存もタスクも一元化する - Qiita
