Riot.jsでbrowserifyとTypeScriptが使いたい！上手くやる方法は？
以前から気になっていた、Riot.jsを使ってみました。
ReactやAngularのような重めではなく、手軽という印象をもっていたけれど、なかなか使うには及んでいなかったんだよね。
今回Riot.jsを使ってみたの、個人的な感想。
Riot.jsとは
htmlファイル（Riot.jsではtagファイル）にテンプレート、スタイル、処理を記述できるUIライブラリ。
軽量で小さく、学習コストはかなり低め。
下記公式より。
フロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたに見えたものの、重大な弱点を残している点、それをRiotは解決します。
だから——私たちには新しいライブラリが必要なのです。
BrowseriryでTypeScriptを使いたい
Riot.jsは前々から興味はあったけれど、使うことに乗り気しない理由があった。
それはTypeScript(tsファイル)が使えないんだよね。
Riot.jsのコンパイルシステムにTypeScriptがあるので、使えないと書くと語弊があるけれど、開発は基本的にbrowserifyを使って、モジュール管理している。
browserifyをRiot.jsを使う場合はriotifyを使うのが、一般的かと思う。
riotifyで用意されているコンパイル可能な言語は「coffeescript、cs、 es6」
つまりTypeScriptは使うことができない。
Riot.jsでTypeScriptが使える方法を模索
なんとかしてbrowserifyを使いつつ、TypeScriptが使えないものかと試してみた。
TypeScriptで記述してriot.tagメソッドで登録
テンプレートとTSファイルを分けて、riot.tagで手動で登録する方法。
できる、できないだけで言うと、すべてTypeScriptで記述できた。
だけど、めちゃくちゃめんどくさい！
手軽にUIコンポーネントが作りたいから、Riot.jsを使用しているのに、やりすぎなような気がしてならない。
これならReactを使ってしまおうかという気分にもなるし。
他にもriot.tagを使うと、機能が制限されてしまうのも、乗り気しない理由。
下記、公式より。
1.自己閉じタグ
2.コーテーションなしのテンプレート変数: value={ val }の代わりに、value="{ val }"と書くこと
3.真偽値属性: checked={ flag } の代わりに__checked="{ flag }" と書くこと
4.ES6のメソッドの省略記法
5.＜img src={ src } /＞は＜img riot-src={ src } /＞と書かなくてはならない: 不正なサーバリクエストを防止するため
6.style="color: { color }"はriot-style="color: { color }"のように書かなくてはならない: スタイル属性がIEでも動作するように
7.Scoped CSSのプリコンパイル
TypeScriptを諦めた
色々試行錯誤してみたものの、しっくり来る方法がなかったので、最終的にはTypeScriptを使わないで、tagファイルを作る一般的な方法で実装することにしてみました。
お手軽でわかりやすい
tagファイルの作成は公式の推奨方法だけあって、本当に手軽にUIコンポーネントができてしまう。
これまで、React、Angular、Knockout、Mithrilで似たようなものを作ってみたりもしたけれど、tagファイルにテンプレート・スタイル・JSが記述されているのが、ダントツでわかりやすい！
TypeScriptを使うのを我慢してでも、使うのはありかなと感じた。
コンポーネントの細分化
使いやすいさには感動する反面、コード量が増えた際に、やっぱり不安が残る。
TypeScriptを使っていれば、browserifyで読み込んでいるモジュールもわかりやすいけど、TypeScriptに慣れてしまっているから、JSだとわかりにくい。
コンポーネントに関しても、いかに小さくできるか。
極力小さくしておいて、疎結合できるようにしておかないと、やはり型がないからバグの温床になりそうな気がした。
さいごに
Riot.jsを使うか使わないかは、規模による。
これが現状の僕の判断かな。
規模が大きくないものでなければ、TypeScriptなしでも頑張ることでRiot.jsの使いやすいさを存分に感じられる。
逆に規模が大きくなってきたらやはりTypeScriptは必須でしょ、というわけでReactかAngularを使う選択になりそう。
TypeScriptが使えて軽量のRiot.jsみたいな仕組みの、ライブラリがあると良いのだけどね。
Discussion