Riotという単語には「暴動・大混乱・とても面白い」という意味がありますが、日本語の公式ドキュメントでは反乱と訳されています。

名前を聞いたことがないという方も多いでしょう。

本記事ではRiot.jsとは何かをメリットやデメリットと共に解説していきたいと思います。

また他のライブラリとの比較を通して、おすすめの理由や活用シーンについてご紹介しましょう。


Riot.jsとは



Riot.js（ライオット ジェーエス）はMITライセンスに基づき公開されているオープンソースのJavaScript製軽量UIライブラリです。

Riot.js

Riot.jsの開発理念は現在のフロントエンドの流れに異を唱え、シンプルなAPIと分かりやすい文法を提供することにあります。

jQueryなどのJavaScriptライブラリからクライアントサイドの開発を始める場合と比べ、そのハードルは少々高いものになっていました。

React.jsやVue.jsではまずプロジェクトの雛形を作成し、決められた作法に則りファイル作成やコーディングを行わなければなりません。

Riot.jsはこれらの用意された複雑さに反旗を翻し、反乱を起こさんと開始されたプロジェクトです。


Riot.jsの特徴



Riot.jsの特徴はプロジェクトが目指すシンプルさに起因するものでしょう。


コンポーネントベース

コンポーネント指向では機能ごとに部品を切り出し1つの単位として扱います。

フロントエンドにおいてはUI部品ごとに分割されたものをコンポーネントと呼ぶことが多いです。

Riot.jsではHTML・JavaScriptを組み合わせ、再利用可能なコンポーネントとして定義したものをカスタム要素・カスタムタグと呼びます。


軽量かつシンプル

Riot.jsの全ては約10KBに収まる容量です。このためダウンロード速度が速く、メンテナンスコストも低く済みます。

にもかかわらず基本的な機能は全て揃っているという凄いライブラリです。

  • CLIツール・タグコンパイラ
  • ルーター
  • レンダリング
  • ホットリロード・ハイドレート
  • HTMLパーサー
  • テンプレートエンジン
  • カスタム要素の実装


Riot.jsのメリット



Riot.jsのメリットについて見ていきましょう。


学習コストが低い

コードの総量が少なく文法もシンプルなため、学習量自体が他のライブラリと比べて低く抑えられています。

またテンプレートディレクティブはif・each・isの3種類のみの上、Riot.js独自の構文や文法も少ないです。

後ほど使い方の項で簡単なソースコードに触れますが、HTMLコーダーであれば触れたことがあるような慣れ親しんだコードでしょう。


従来通りの開発フロー



ReactやAngularなどのJavaScriptフレームワークを扱うには、フロントエンドエンジニアのような別の種類のスキルが必要でした。

HTMLコーダーやデザイナーが触れるJavaScriptといえば、素のJavaScriptかjQuery程度であり開発手法も異なります。

Riot.jsで必要なのはHTML・CSS・JavaScriptの知識であり、カスタム要素も似たような記法で書くことができるので簡単です。

インブラウザ・コンパイルを利用すればビルドやコンパイルなどの知識がなくても、ブラウザ上で表示確認を行えるでしょう。


Riot.jsのデメリット



Riot.jsにはいくつかのデメリットがあります。


大規模開発向きではない

軽量なライブラリなのでAngularのようにフルスタックではありませんし、データバインディングの機能もありません。

データバインディングとは内部のプログラムで扱うデータと、画面に描画されている情報を同期する仕組みです。

Riot.jsでは双方向データバインディングがサポートされていないため、自力で調べて実装する必要があります。

またCoC（設定より規約）のような明確な書き方のルールが存在しないため、チーム開発の場合は属人化しないよう注意が必要でしょう。


シェアが少ない

他のライブラリやフレームワークに比べるとシェアが低く、ブログ記事や実装例となるサイトはまだまだ少ない状況です。

学習コストの低さやシンプルさ、公式ドキュメントが日本語に対応している点を考慮すれば、開発初期の影響はあまりないと思われます。

開発中に少々込み入った実装を行いたいときには、英語のドキュメントなどから自力でコードを書けるくらいのスキルは必要でしょう。

将来性を考えるともう少しシェアを伸ばしていきたいところです。


jQueryとの比較



jQuery・Reactとの比較を通じてRiot.jsのメリットを再確認していきましょう。

ちなみにBackbone.jsやAngularはJavaScriptフレームワークであり、jQueryやReactはJavaScriptライブラリです。

分類的には別物ですのでご注意下さい。


学習コストとドキュメント

学習コストはjQueryよりもRiot.jsの方が高いと考えられます。

jQueryは既に多くのWebサイトで利用されており、導入事例・カスタマイズ関連のブログ・コピペ可能なコードまで豊富です。

Riot.jsは参考になる記事そのものが少ないため、学習方法はどちらかというと最新のJavaScriptフレームワークに似ています。

具体的には最新のソースコードをGitHubで確認したり、英語の公式ドキュメントを読んだりなどが考えられるでしょう。


jQueryとの共存が可能

比較といいつつRiot.jsはjQueryと共に使用することができる仕様です。

従ってjQuery単体で書いたときと比べてどのように変化するか、という観点からも考察を行いたいと思います。

Riot.jsを使用するとコンポーネントとしてカスタム要素を定義し、より再利用性の高い単位でjQueryを記述することが可能です。

注意が必要なのはDOM要素を操作するときで、Riot.js内のDOMにアクセスさせる場合はイベントの発生順序を考慮する必要があります。


Reactとの比較



次はReactについて同様に比較を行いましょう。Riot.jsとReactなどとの比較記事は豊富なので、検索してみるのも良いかもしれません。


DOMの処理方法の違い

コンポーネント初期化時にReactが仮想DOMを生成するのに対し、Riot.jsはDOMツリーを解析するだけです。

Reactは変更検知の仕組みを有しています。複雑な同期アルゴリズムによってプログラムと画面描画とを一致させる仕組みです。

Riot.jsはDOMツリーからテンプレート内の変数を取得し、配列に格納しておきます。

配列内のテンプレート変数が変更されるとDOMの値との比較が行われ、変更されていれば値が更新されるという仕組みです。

テンプレート変数はキャッシュされているため、この処理は非常に高速に実行されます。


独自の状態管理システム

Reactには数多くの状態管理ライブラリが存在するので、技術選定に苦労されている方も多いでしょう。

代表的なReact+Reduxの構成をはじめ、Mobx・React Context API・Unstated Nextなど多岐に渡ります。

一方、Riot.jsにはReactのような独自の状態管理ライブラリはありません。

Reduxなどの他のライブラリを使用することはできますが、公式にサポートされた手法やアーキテクチャはまだないのが現状でしょう。


Riot.jsの活用シーン



大規模なフロントエンドの開発プロジェクトでは、状態管理ライブラリを使用することも多くRiot.jsには不向きです。

Riot.jsが得意とするのはデザイナーやHTMLコーダーが作成するような、複雑なシステムやバックエンドを持たないWebサイトでしょう。

単純なAPIでデータを取得し描画するような表示中心のサイトにおいて、ReactやAngularなどのフレームワークは多機能過ぎる面があります。


Riot.jsのセットアップ



ここでは「Hello, world!」を表示する小さなアプリケーションのプロジェクトを作成するための準備をしましょう。

前提としてNode.jsをインストールしておいて下さい。本記事のソースコードは以下の環境で動作確認を行いました。

  1. $ node -v
  2. v12.14.1
  3. $ npm –version
  4. 6.11.3

インブラウザ・コンパイルの例ばかりで、プリコンパイルに関する情報が少ないのであえてWebpackを使用する方法を実践してみます。

これができれば個人開発の本番環境でも採用しやすくなると思いますので、右も左も分からない方は参考にしてみて下さい。


プロジェクトの初期化

新しいディレクトリを作成し移動しましょう。

  1. $ mkdir riot-example
  2. $ cd riot-example

「npm init」コマンドでpackage.jsonを生成します。特に変更がなければ全てEnterで構いません。

  1. $ npm init


Riot.js・Webpackのインストールと設定



Riot.js自体はnpmやyarnでインストール可能です。

  1. $ npm install –save riot
  2. + riot@4.12.2

またWebpackを使用してコンパイルを行うために必要なライブラリをインストールしておきます。

  1. $ npm install webpack webpack-cli webpack-dev-server –save-dev
  2. $ npm install @riotjs/webpack-loader @riotjs/hot-reload @riotjs/compiler –save-dev

これらはホットリロード機能を有するRiot.jsの開発用のサーバーを立ち上げるために利用するものです。


Riot.jsの使い方



Riot.jsのCLIコマンドが対応しているのはコンパイルのみで、プロジェクトの雛形は自分で作成しなければなりません。

最初のRiot.jsファイルの作成

以下の3種類のファイルを作成しましょう。

  • src/app.riot
  • src/main.js
  • index.html

src/app.riotは以下です。

  1. <app>
  2.   <p>{ props.message }</p>
  3. </app>

src/main.jsは以下のようになります。

  1. import * as riot from ‘riot’
  2. import App from ‘./app.riot’
  3. const mountApp = riot.component(App)
  4. const app = mountApp(
  5.   document.getElementById(‘root’),
  6.   { message: ‘Hello, world!’ }
  7. )

index.htmlは以下です。public/main.jsはビルド後に生成されるファイルで、次の項で設定を行います。

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4.   <meta charset=”utf-8″>
  5.   <title>Riot Example</title>
  6. </head>
  7. <body>
  8. <div id=”root”></div>
  9. <script src=”public/main.js”></script>
  10. </body>
  11. </html>


Hello, world!を表示する



webpack.config.jsへの設定は以下です。

  1. const path = require(‘path’)
  2. module.exports = {
  3.   entry: ‘./src/main.js’,
  4.   output: {
  5.     path: path.resolve(__dirname, ‘public’),
  6.     publicPath: ‘/public/’,
  7.     filename: ‘main.js’
  8.   },
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.riot$/,
  13.         exclude: /node_modules/,
  14.         use: [{
  15.           loader: ‘@riotjs/webpack-loader’,
  16.           options: {
  17.             hot: false,
  18.           }
  19.         }]
  20.       }
  21.     ]
  22.   }
  23. }

またpackage.jsonに開発サーバー起動用のコマンド「npm run start」と、ビルド用のコマンド「npm run build」を定義しましょう。

  1. “scripts”: {
  2.   “start”: “webpack-dev-server –inline –watch –hot –colors -d –port 3000”,
  3.   “build”: “webpack”
  4. },

開発用サーバー起動後は、以下のようなURLにアクセスすることで表示の確認ができる筈です。

  • http://127.0.0.1:3000/
  • http://localhost:3000/webpack-dev-server/

今回生成したファイルの一覧を載せておきます。

  1. riot-example
  2. ├src
  3. │├app.riot
  4. │└main.js
  5. ├index.html
  6. ├package.json
  7. ├package-lock.json
  8. └webpack.config.js


おわりに



Riot.jsの勉強をスムーズに進めるなら、以下のリポジトリのサンプルアプリケーションを参考にするのがおすすめです。

GitHub > riot/examples

基本的なTodoアプリケーションから、Redux・GraphQLなどを利用した本格的なものまで一通り揃っています。

また日本語の記事が少ないのでブログを書くならチャンスかもしれません。少しでも興味を持たれた方は挑戦してみてはいかがでしょうか。