Riot.jsでbrowserifyとTypeScriptが使いたい!上手くやる方法は?

以前から気になっていた、Riot.jsを使ってみました。

ReactやAngularのような重めではなく、手軽という印象をもっていたけれど、なかなか使うには及んでいなかったんだよね。

今回Riot.jsを使ってみたの、個人的な感想。

Riot.jsとは

htmlファイル(Riot.jsではtagファイル)にテンプレート、スタイル、処理を記述することができるUIライブラリ。 軽量で小さく、学習コストはかなり低め。

下記公式より。

フロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたに見えたものの、重大な弱点を残している点、それをRiotは解決します。 だから——私たちには新しいライブラリが必要なのです。

 
Riot.js — Simple and elegant component-based UI library · Riot.js

BrowseriryでTypeScriptを使いたい

Riot.jsは前々から興味はあったけれど、使うことに乗り気しない理由があった。

それはTypeScript(tsファイル)が使えないんだよね。

Riot.jsのコンパイルシステムにTypeScriptがあるので、使えないと書くと語弊があるけれど、開発は基本的にbrowserifyを使って、モジュール管理している。

browserifyをRiot.jsを使う場合はriotifyを使うのが、一般的かと思う。

GitHub - riot/riotify: browserify plugin for riot tag files

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.と書かなくてはならない: 不正なサーバリクエストを防止するため
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みたいな仕組みの、ライブラリがあると良いのだけどね。

コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
目次
    Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発