Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

今年1年真剣にRiot.jsと付き合ってきたので振り返ってみた

Riot.js JavaScript プログラミング

Riot.js Advent Calendar 2016の1日目です！（初トップバッター！） 今回はあまりテクニカルなプログラミングの話はせず、基本ばかりなので、その点ご了承ください（笑）

qiita.com

はじめに

Riot.js（以下riot）は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。（ここまでテンプレート）そして今一番ホット（筆者比）なJavaScriptのライブラリでもあると思います！

2016/11/22、ついについに、ずっと待ち望んでいたメジャーアップデート「v3」がリリースされました！ おめでとうございます！ありがとうございます！ そしてつい先日！riotのSlack（日本ユーザ）も立ち上がりましたー！ 皆さんご自由に参加して発言していって下さい！

まずはざっくり振り返ってみる

主に触ってきたのはv2系、特に2.4.*です。自分が初めてriotに触れたときのバージョンは2.2.＊でしたね〜。 当時のriotは今よりももっと軽かったのと、公式サイトのURLがhttp://muut.com/riotjs/でした。

初めて触ったときは、他のフレームワークやライブラリと違い、なんて簡単に書けるんだろう！と感動しました。 勢いで社内の勉強会でも発表もしたくらいです。（前職の時のスライドです。コード例の画質が酷いのと、ちょこちょこ使い方間違ってますね…）

www.slideshare.net

そこからどんどん新しいバージョン（マイナーアップデート）が来て、キャッチアップするのがちょっと大変でしたが、 楽しかったです。

　
あとは、日本語訳や、exampleのリポジトリにも ほんの少しですが貢献させていただきました。（人生初の公式リポジトリへPR！）

　
最後に、今年ついに日本でriotの勉強会がサイバーエージェント社で盛大に開催され、自分も参加してきました。 コミッターの@cognitomさんも参加され、かなりいい感じの第一回riotjs勉強会だったと思います。 第二回の開催もslackで話が出ているので、今から凄く楽しみです♪

使ってみて感じた良いところ

コミッターの@cognitomさんも仰ってましたが、いやー、もうこれで良いんじゃないか（笑） 全体的に気に入ってますが、個人的にriotの気に入っているところは以下の点です。

1. コンポーネント指向

コンポーネントに切り分けるという思想が好きで、riotはそのコンポーネントごとに完結しているところが魅力です。 一部だけデザインを変えたいとかここに機能を加えたい、となったときに、対象のコンポーネントを触れば良いので、 ScopedCSSもそうですが、影響範囲が限定されるのが本当に素晴らしい。

2. observable（特にこれ！）

いろんな方が絶賛されているように、私もriotのobsevableには大変満足していて、多大にお世話になっている次第です。 使い方も非常に簡単で、以下のようにインスタンス生成→イベント取得時の処理→イベント発火の順に書けばすぐに使えます。

// 親子で使う場合は親でインスタンスを生成
var obs = riot.observable()

// hogeイベント発火時の処理
obs.on('hoge', function(e) {
   // 何らかの処理
})

// hogeイベントの発火
obs.trigger('hoge', { foo: 'bar' })

親子関係がなく、同じタグ内 or 同じクラス内（厳密にはクラスではないですが）であれば、 上記は以下のようにthisで使うことができます。

// インスタンスを生成しthis（マウントされたタグオブジェクト）に付与
riot.observable(this)

// hogeイベント発火時の処理
this.on('hoge', function(e) {
   // 何らかの処理
})

// hogeイベントの発火
this.trigger('hoge')

他にもいろんな機能があるので、詳しくは公式サイト見てみてください！ 本当に、凄く便利なので！

3. eachメソッド

これ以上ないくらい簡潔なメソッド名、それでいて分かりやすい。 そうですLoop処理のメソッドです。こんな感じで使います。

<ul>
  <li each="{ key, item in items}">
    <div class="col-xs-2" data-for="hoge_{ key }">
      <input type="checkbox" id="hoge_{ key }" name="hoge[]" value="{ item.maker_code }">
       <div class="fuga col-xs-10">{ item.maker_name }</div>
    </div>
  </li>
</ul>

ちょっとだけ落とし穴もあるのでこちらも参考にしてみて下さい。

4. onmount, onupdated

これも地味に活用しています。onmount（マウント時）とonupdated（マウントとアップデートが完了した時）に処理をさせることが多く、 これらのタイミングで処理が書けるのは助かってます。他にもタグのライフサイクルの各タイミングで処理が書けるようにイベントが用意されているので、 もし複雑なアプリを開発しなければならなくても、riotなら書けるかもしれませんよー！

5. Named elements

v2：id属性やname属性が付いているタグはthis.hogeでアクセスできます
v3：ref属性が付いているタグはthis.refs.hogeでアクセスできます

これも結構助かってます。jQuery使って$('#hoge)と書いてもいいですが、 せっかくthisオブジェクトでアクセスできるのなら使わない手はないですね。（jQueryの機能が使いたいのであればそれでもいいですが、ではないのであればthisで良いかなと。）

難点

その1：速度

手前味噌ですが、QiitaにRiot.jsの落とし穴まとめという記事を投稿させていただいたので、 こちらを参考にしていただければと(ﾟ∀ﾟ)

この中でも特に困ったのは、「速度の問題」ですね。riotだとeachメソッドを使って簡単にループが書けるのですが、 例えばliタグが多すぎると描画速度がガクンと落ちてしまいます。

自分の場合は、以下のようにビューに渡す前にテキストベースでタグを生成して、 最後にガツンとinnerHTMLでセットする形をとったりしてますが、色んな意味でよろしくない…orz

<app>
  <ul id="maker_list"></ul>

  <script>
    // 非同期でデータをAPIから取得したとします
    var items = result
    var dom   = ''

    items.forEach(function (item, key) {
      dom += '<li><div class="col-xs-2" data-for="hoge_' + key + '">'
          +  '<input type="checkbox" id="hoge_' + key
          +  '" name="hoge[]" value="' + item.maker_code + '">'
          +  '<div class="fuga col-xs-10">' + item.maker_name + '</div>'
          +  '</div></li>'
    })

    // ulタグに反映
    this.maker_list.innerHTML = dom
  </script>
</app>

速度が問題なのでJavaScriptでループ回すより、サーバサイドのAPIの方でDOM作成して、それを返すほうが速かったですね。 3.0.0以降では現在のv2系の最新2.6.7より速度は上がっている（らしい）ですが、まだ試していないので後日検証してまた書きたいです。

その2：mixinの使い所

チームでriotを使ってみて振り返りをした時の意見として、mixinの使い所があまりなかったなと言う点が上がりました。 「別にmixinにしなくても、クラス作ってprototypeに各メソッドを定義して、そのクラスをnewすれば良いのでは」という意見に、 自分も反論できませんでした。強いていうなら、mixinにすればriotの機能も使えるよ、くらいかなと。

　

その3：データバインディング

やっぱりデータバインディング機能があれば嬉しかったなーと思ったことが何回かありました。 データバインディングっぽい実装も、riotでは簡単に書けてしまうので、逆にこれは良い点かもしれません(^^)

その他

後は、

  • yieldを使ってタグの共通化
  • ルーティングを使ったSPAを簡単に実装

等もありますが、前者はあまり自分が使ってなく恩恵を受けてないため言及しませんでした。 またルーティングですが、いろんなフレームワーク・ライブラリも同様にSPAを簡単に実装できるよ！って主張していて、 おそらくそれは正しくて、あまり差がなさそうなので除外しました。もちろんriotのSPAもとても簡単に実装できますよ(ﾟ∀ﾟ)

おわりに

半分くらい、長々とriotの紹介して終わってしまった（笑） 　

今自分が関わっている案件でも導入していて、導入決定した当時のバージョンが2.4.1だったのでちょっと古いですが、 もうちょいでリリース（と言っても確実に来年になると思う…）なので、リリース後に別途twitterなどで報告させていただきます！ 正直そんなテクニカルな使い方をしたわけではないので、ちょっと恥ずかしいですが、日本の導入事例を増やす意味でも公開したいなーと(ﾟ∀ﾟ)

2日目は@omiendさんの「Riot.js を利用してTODOアプリケーション構築のハンズオンを作成しました #riotjs」です！お願いします！