関Javaのフロントエンド勉強会でRiot.jsの発表をしました。 #kanjava

2017/02/19   #IT勉強会  #JavaScript 

2017/02/18(土) 開催の下記のイベントで、Riot.jsを紹介するLTをやりました。

[関ジャバ] フロントエンド初心者勉強会 in 大阪 - connpass

Quiver のプレゼンモードで発表したためSpeakerdeckなどへのアップロードができないので、発表内容はこの記事に直接載せておきます。

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)
  • ルーティング
  • サーバーサイドレンダリング

感想

  • 直感的で使いやすいとおもいました。(小並感)
  • デザイナーさんが「読める!!」と喜んでいた。
  • 意外と使っている人がいて、ググると結構情報がでてくる。

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

補足

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

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

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

勉強会自体の感想

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

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

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