新しいjsのライブラリやら何やらが出るたび、使うの？使わないの？と悩めるフロントエンド寄りの皆様、こんにちわ。

先日、運用中のサイトにて、riot.jsをはじめて導入しました。

以前にも記事を書いていたのですが、実案件で使うのははじめて！ということで、導入のきっかけから、導入してみて感じた事をまとめてみます。

 

riot.jsを採用するに至った経緯

そもそも、なぜ採用したのか、というところなのですが、4ページも5ページも遷移し、ajaxによって取ってくる内容（json）が変化するキャンペーンページを作る事になったことがきっかけ。

もう、1ページ目がこれで、2ページ目がこれで、あわわわわ！変えたいところ探すの結構大変・・・。となってしまうのでした。

HTML全体のコード、そもそもサイト全体で使っているjqueryベースのコード、ページのためのコード、などなどの見通しを確保したいなあ、HTML部分はWEBコンポーネントかなあ、でも動作ブラウザ不安だな。なんてことを考えていた際、とりあえずriot使ってみるかな！と思い至ったのです。

jQueryを使っていても、コンクリフトさえしなければ別のフレームワーク使っていいじゃないか！という話

普通に考えれば、外部に用意したHTMLを普通に読み込んでも良い気がしますよね。

jQueryだって外部のHTMLを読み込むこと自体はできます。

でも、読み込んだHTMLにいろいろ埋め込むとなるとjsのほうがイケてない感じになってしまうのです。

$('#selector .hoge').text('hogehoge');
$('#selector .fuga').attr('src', json.img);
$('#selector .foo').html('<section class="'+json.status+'">'+json.var+'</section>');
// 似たようなものが続く・・・

もうなんか、最低な感じです。

何かしらの方法で、もうちょっといじりやすくしたい！（デザインの差し戻し回数も尋常じゃないしね！）

というわけで、ReactでもPolymerでも、angularjsでも、なんでもいいから使おう！一番（ドキュメントのボリュームも）軽いRiotでいいやん。と、Riotで試してみる事にしました。

 

そんなわけで使ってみた。

結論から言うと、使ってよかったRiot。という印象でした。

今回は、jQueryのclickイベントや$.ajaxで通信をした結果でriotのtagファイルに変数を渡しながら展開という形をとっています。（遷移が3つくらい少なかった時、jQueryだけで書いていたのです。）

$.ajaxのsuccessのところだけ、すごーくざっくり書くと、

success: function(json, textStatus, xhr) {
opts = json;
riot.mount("#layout","tpl",opts);
},

このくらいで書けてしまいます。

元のHTMLには

<section id="layout"></section>
<script src="http://cdn.jsdelivr.net/g/riot@2.2(riot.min.js+compiler.min.js)"></script>
<script src="tpl.tag" type="riot/tag"></script>

といったように、riot本体、分割したファイル、レンダリングするための要素を配置。

読み込むtpl.tagにはいい感じに書いたHTMLの変数で書き換えたいところをいじって・・・

<h1>{opts.title}<small>{opts.subTitle}</small></h1>

こんな感じで変数を指定するだけでOK。面倒なコードが削減されます！

実際使ってみてのお話

一番怖かったのは、jQueryとぶつかってエラーがたくさん！という状態が怖かったのですが、何も事件が起こらずに動いてしまいました。

今の所はあまり心配しなくても良いようです。

9KB程度という小さいサイズなので、jQueryのプラグインを使うのとそう変わらない気もしています。

追加のCSSまわりやJSなど、まだ使っていない機能もたっぷりですが、attr()地獄やhtml()地獄の皆さんは一度使ってみると良いかもしれません…！