Riot.js試してみた

React likeでミニマムなRiot.jsがどんなもんか試してみました。DEMO(Herokuがよく寝ているので初回レスポンスがすごく遅いです)

ヤフオクのカテゴリ一覧がCSVで公開されていてこれが1.3MBほど。localStorageに全部入るぞ。これでサクサク検索してオークションIDがわかれば作業効率よくなるかもという会話をバイト先でしていて、じゃあRiot.js試すついでにという経緯で作りました。結局localStorage使っていないけど、それで満足している。

構成はsearch.taglist.tagmessage.tagがあって、search.tagで検索キーワードを入力してAPIに投げる。返って来たJSONをlist.tagに流し込んで一覧表示する。message.tagは打ち込んだキーワードやJSONに反応してメッセージを表示するだけ。

最初はapp.tagを作ってそこに全部ぶち込んでいたけど、それって再利用可能なWebコンポーネント的じゃないなと思って分割。再利用可能かはかわからない。でもタグ間の連携を考慮して設計することでDispatcher必要だなとか、Flux的なものが必要になってくるなという実感がわいた。独自タグを記述せずに既存のDOMを使える点、idname属性を設定しておけば簡単にアクセスできる点は気が利いている。styleはscopeが便利な反面、ちゃんとコンポーネントとしてスタイルを作り込むならscss等使いたいよなと思った。

雑感としては、ドキュメントみればすぐに使えるし、ファイルサイズも小さいのでGAMYの事例のように普通のWebサイト1に組み込んで使うのに良い。お手軽感がある。jQuery + Mustache(及び類似テンプレート)でJSONデータを表示するような用途の代替案でもいいなと思う。SEO気にするならServer-side Renderingもあるけど、Node.jsのサーバー用意する必要があって普通のWebサイトで使う分にはお手軽感が減る。

ビルドツールはgulpとBrowserifyでgulpfileはこんな感じ。gulpfile書いたり評価している時間がだんだん長くなってきている。最近budoを覚えたので、気軽に試したい場合はそっちを使おうと思っている。

Footnotes

  1. LAMP環境でWordpressを使っているようなWebサイト。

一覧へ戻る