Riot.js を使ってみた

少し前ですが、ちょっとウェブアプリケーションを作る機会があったので使ってみました。

Riot.js とは

http://riotjs.com/ja/riotjs.com

A React-like user interface micro-library の謳い文句通り React ライクなライブラリです。つい最近 v3 がリリースされたみたいです。私が使ったバージョンは v2.5.0 でした。公式のガイドで大枠を掴んだら examples で具体例を見ることができます。

Riot.js でウェブアプリケーションを作る

Riot は MVC でいう View のためのライブラリでありフレームワークではありません。アプリケーションを作る際には自分で枠組みを考える必要があります。

tag の分類

React (Redux) ではコンポーネントを Presentational components と Container components に分類する考え方があるようなのでこれを取り入れてみました。前者は表示のみを行うステートレスな (= 状態を持たない) コンポーネントで、後者はそれらに具体的なデータを与えるステートフルな (= 状態を持つ) コンポーネントです。

qiita.com

今回は各画面のルートコンポーネントのみを Container Components とし、残りはすべて再利用可能な Presentational Components として実装しました。

ディレクトリ構成

以下の構成としました。

    .
    ├── config
    ├── public
    │   ├── assets
    │   │   └── images
    │   │   └── js
    │   │       └── bundle.js
    │   └── index.html
    └── src
         ├── stores
         └── tags
             ├── components
             ├── containers
             └── mixins

  • src/

    Riot の tag は tags/ に配置しています。汎用的な機能はミックスインにしておいて各々の tag から利用しています。 stores/ にはバックエンドの API と通信を行う処理全般を配置しています。

  • public/

    画像などの静的ファイルを配置しています。 assets/js/bundle.js は src/ 配下のファイルをコンパイルしたものです。

  • config/

    config のための JSON を配置しています。

ビルド

ES5 で書いているのでトランスパイラ (Babel) は使っていません。タスクランナー には gulp.js を使用しました。

  1. config で config/ から設定を取得して src/stores/ 内の API の URL を置換
  2. riot で src/ 配下のファイルを public/assets/js/bundle.js にコンパイル
  3. superstatic でサーバを立てて public/ のファイルを配信
  4. run-sequence で 1 から 3 を 順番に実行

上記のような task を作って gulp run で実行できるようにしています。また、開発中は都度コンパイルするのが面倒なので gulp.watch() で src/ を監視して変更があったらリコンパイルするようにしていました。

感想

View のためのライブラリとして見たとき Riot は学習コストも少なく扱いやすい印象でした。 tag は見慣れた HTML / CSS / JavaScript が集合しただけのものなので、初見でも心理的抵抗が少ないように思います。共同で作業したデザイナ (非エンジニア) も 10 分ほどの説明ですぐに理解してくれました。ただウェブアプリケーションを作ろうと思ったとき参考になる情報が少なくて苦労する場面も多かったです。同じ View のためのライブラリである React には FLUX というアーキテクチャがあり、そのポピュラーな実装として Redux があります。 Riot でもそのあたりの話が多くなるとよりユーザが採用しやすくなるのではないかと思いました。