Riot.js

自己紹介

Abe Asami “きの子 ”
フリーランスプログラマ
http://nocono.net/
@aa7th
Scala、Andorid(Java/Kotlin)

今日の内容

今の案件でRiot.jsを使っているので紹介します。

採用の経緯

Webアプリの動的な部品をちょっとだけ作りたい
JQueryでゴリゴリ書きたくない
大げさなJSフレームワークは使いたくない

そこで試してみたのがRiot.js

http://riotjs.com/

スクリーンショット 2017-02-18 16.04.54.png

Riot.jsとは

Simple and elegant component-based UI library (公式サイトより)
サイズが小さい
- riot.min.js – 10.18KB (gzip)

例

スクリーンショット 2017-02-18 12.34.51.png

↓

スクリーンショット 2017-02-18 12.34.56.png

カスタムタグ作成

help.tagファイル作成

<help>
    <button type="button" onclick="{toggle}">
        {opts.title}<span if="{!visible}">を見る</span><span if="{visible}">を隠す</span>
    </button>
    <div if="{visible}" class="help-contents">
        <yield/>
    </div>
    <script>
        var self = this;
        self.visible = false;
        self.toggle = function() {
            self.visible = !self.visible;
        };
    </script>
    <style>
        .help-contents {
            padding: 10px;
        }
    </style>
</help>

タグを使う

必要なファイルを読み込む -> カスタムタグを記載 -> マウントする

  <help title="説明文の入力例">
    <div class="...">
      説明文説明文
    </div>
  </help>

  <script type="riot/tag" src="help.tag"></script>
  <!-- コンパイラ付き  -->
  <script src="https://cdn.jsdelivr.net/riot/3.2/riot+compiler.min.js"></script>
  <script>riot.mount('help');</script>

プリコンパイル

riot コマンドで事前にtagファイルをプリコンパイルすることができる

riot.tag2("help",'<button type="button" onclick="{toggle}" class="uk-button uk-button-default uk-button-small"> {opts.title}<span if="{!visible}">を見る</span><span if="{visible}">を隠す</span> </button> <div if="{visible}" class="help-contents"> <yield></yield> </div>','help .help-contents,[data-is="help"] .help-contents{ padding: 10px; }',"",function(e){var t=this;t.visible=!1,t.toggle=function(){t.visible=!t.visible}})

その他の機能

プリプロセッサの利用が可能
- Babel, TypeScript, Less, Pug...
タグ間連携 (Observable)
ルーティング
サーバーサイドレンダリング

感想

直感的で使いやすいとおもいました。(小並感)
デザイナーさんが「読める！！」と喜んでいた。
意外と使っている人がいて、ググると結構情報がでてくる。
- Slackチャンネルもある。
- https://riot-jp-slackin.herokuapp.com/

当日発表した資料は以上となります。

補足

資料中にもある通り、動的な部品だけちょこちょこ作って組み込んでいきたかったというのがまずあります。でもReact.jsだと大げさすぎる気がするしVue.jsを使ってみるのがいいのかなぁと悩んでいたところで目を付けたのがRiot.jsでした。

公式でもうたっている通り、シンプル&コンパクトで気に入っています。今回はタグ間連携やルーティングは利用しておらず、本当に基本の機能だけ活用していますが、それでも十分便利です。そこそこの規模のSPAを作るとなるとRiotでいいかどうか考えないといけないのかも？と思いますが、そうでなければ必要十分であると感じました。今後更に使いこんでいきたいです。

(ところで正式名称は「Riot」と「Riot.js」のどちらなんだろう。)

勉強会自体の感想

興味深い発表だらけでしたが、特に@ken_zookieさんの「JSフレームワーク選定の勘所」は「おぉおおなるほどJSフレームワークそんなことになっていたのか」と個人的に面白く感じました。

Riot.jsについても私が全く触れる気がなかった大事な部分(コンポーネント指向の説明)をしてくださっていたので、大変助かりました。

運営のみなさま、会場提供の楽天さん、よい会をありがとうございました。