GWなのでReact.jsでイベントサイトを作った

tech

http://jam-navi.herokuapp.com/

イベントといっても音楽関係でしかもジャムセッション縛りという割とニッチなサイトを作った。

ざっくり

とりあえずリリースすることが最優先だったのでサーバサイドレンダリングとかはなし。Fluxとかも知らない。けど、「投稿したものがタイムラインで流れてくる」というのはReact.jsと相性が良さそうだと直感して使ってみた。
ルーティングはreact-router使ってる。が、ログイン画面からホーム画面への遷移とかは window.location.href = "/" みたいにして全画面読み込みしてる。子供から子供への遷移がうまくいかなかった。
サーバサイドはNode.jsで、バックエンドとしてParseを使っている。
Node.jsでのアプリは２つ目で、ちょっとずつ慣れてきたところ。

Javascript書いててハマったポイント1: this

みんな言ってるけど、thisがすぐ迷子になる。
あーハイハイって言ってbindすればいいんだけど、thisよ。。という気持になる。
これはRegister Success! って1度出して3秒後に（突如）消す、というコード。 .bind(this) がないとsetStateなんてfunctionはねえ！と怒られる。 セミコロンはなくてもいいんダネ！

    var successDialog
    if (this.state.postSuccess) {
      successDialog = this.getPanelInfo("Register Success!")
      var timeID = setInterval(function() {
          this.setState({postSuccess:false})
          clearInterval(timeID)
        }.bind(this), 3000)
    }

Javascript 書いててハマったポイント2: 依存関係の解決方法

「よーし、サーバサイド脳だ！」という頭で var hoge = require('hoge') などと書いたらブラウザで動かなかった。
requireはブラウザでは使えないんだって。どうやら、browserify とかいうのをかませればrequireで解決した依存関係をなんとかしてくれるみたいだ。

結局今回は親のhtmlに<script>を貼ってスコープ内にクラスを展開したけど、これって全クラスに対してフルオープンになってしまっていて微妙なんだと思う。
それとも、browserify使っても一緒なのだろうか。ちゃんと調べ切れていない。

React.js でハマったポイント1: jsxの記法

例えばclass属性を指定したい時、このように書かなければならない。

<div className="col-lg-6">

そしてstyle属性を指定したい時、このように書かなければならない。

<div className="panel-heading" style={{float:'right'}}>

jsx記法でclass="hoge" と書くと変換する時に無視される。
「ここはこのソースコードコピペでいけるはず！よし！」とかやってたらうまくスタイルが適用されなくて実はclass属性がjsxに無視されてたとか何度かやった。

もちろん、React.jsの生のソースを書いてもいいわけだが、このあたりhtmlと混同するし、例えばデザイナーとの分業みたいなことも難しいというか無理だと思った。

まあ弊社でデザイナーさんとコードレベルで連携することはこれまでなかったので個人的には別にいいのだけど。

一方例えばロジックをhtmlに埋め込むみたいなことは直感的にできたので、これは使いやすいなと思った。

<div className="hoge">
  <foo />
  {successDialog ? successDialog : null}
</div>

このようにsuccessDialogに値がある時だけタグを吐き出す、という書き方ができる。
これは別にこうしろとどこかに書いてあったわけではないけど、ちょっとしたダイアログの出しわけみたいのはこれでいいやと思ってやってる。

まとめ

Reactっぽいのはイベントの登録と取得の部分。
2秒ごとにpollingしてるので、イベントがどこかから登録されると自動的に一覧に反映される。
ページングとかまだ入れてないのでほんとまだよちよち歩き状態。

一覧と登録の機能だけなので、ほとんどチュートリアルを見ながら作れたけど、React.js は思ったよりは学習にコストがかかることがわかった。
どこかの記事でRiot.js 簡単でいいよとか書いてあった。

ちなみにParseの無料枠には 1秒間に30リクエストまで という制限がある。
2秒に1回pollingしてるということは、例えば60個くらい同時に窓を立ち上げられたらこちらはお手上げである。
読者諸君の良識ある行動に期待している。