emo の React 実装をつくった

http://e-jigsaw.github.io/emo-react/

Riotjs でつくった emo っていう絵文字検索システムを React で再実装してみた。ちょっと前に react-patterns っていうドキュメントを見つけて、「オレが求めていたのはコレだったんだ...!」という気持ちになったので。

オリジナルの方で絵文字のデータまわりの準備はできていたので、ajax でデータをとってきて実装するだけでよかった。コードは https://github.com/e-jigsaw/emo-react に。Riotjs 版の方では Fuse というファジー検索ツールを使ってみていたんだけど、精度がイマイチというか、思ったような結果が出にくいなあとおもったので適当に Immutable.js の List に検索する文字の組をコンマ区切りにしてぶっこんで正規表現の search で検索するようにしたら体感早くなったし良かった。ちなみに得られた知見として正規表現でユーザの入力した文字列を検索する際には正規表現のメタ文字をエスケープする必要があった。

r = new RegExp @state.keyword.replace /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'

デフォルトでなんかできるのかとおもったけど、意外と泥臭く書く必要があった。

さて、React なんですがだいぶどういう風に書いていけばいいのかも分かってきたし、先述の react-patterns の後光もあって結構よいなと思ってきた。ここ数日「やっぱ Elm じゃね！？」ってなってたけど、いざ自分のほしいものを作ろうとしたときにまだスッと手が動かないので難しい。具体的にいうと、Ajax でデータをとってくるところで大いに消耗した(公式にいまいちパッとしたドキュメントがない & サンプルの Flickr アプリが壊れてる)のでうーむ。あと、調べていくにつれて Elm でも DOM のあれこれを書くサンプルがちょいちょい出てきて、結局そこ書かなアカンのかい！となったのもある。

この絵文字検索、通信もあるしそれなりにインタラクションも多いので題材としてちょうどいい(し、アセットも既に揃っている)と感じてきたので次は Mithril あたりで書いてみたい。