2021 年 5 月現在の Riot.js

Riot.js というライブラリをご存知でしょうか？

昨今、Web開発やフロントエンド周りの Twitter で飛び交っているツイート見る限り、React、Vue、Angular、Svelte あたりはフロントエンドの実装に使われる名の知れた位置にいる JavaScript ライブラリかなと思いますが、
Riot となると、最近出来た新しいライブラリだと思われていたり、逆に 「昔そんなのもあったねー」という消えていったライブラリ扱いになっていたり（昔の一時期の盛り上がりを知る人から見ればそういう扱いになっちゃうのはわかる気も🥲）しますが、Riot.js は今でもちゃんと開発が続いている現役のライブラリです。

最近は影が薄い存在になってしまっている Riot ですが、この記事ではあまり注目されてこなかった、バージョン 4 以降の Riot.js を、ごく個人的な振り返りを交えてご紹介できればと思います。

❤️‍🔥 Riot.js との出会い

いきなり個人的な話からスタートしますが、
2016年ころ、まだ Vue.js も今ほどメジャーじゃなかった頃、 Riot.js のバージョン 3 の頃に僕は Riot.js を使い始めました。

当時から、Web のデザイナー及びフロントエンド周りの実装者として、jQuery などで頑張っていた時に、何かの記事で知った Riot.js の 「カスタムエレメントが簡単に作れる」 というところに惹かれてさっと試してみたところ、簡単にパーツのカプセル化ができることに気がつきます。

これなら自分でも使えそう！がはじまり

当時から話題ですでにメジャーだった React などをまだ技術的にキャッチアップしきれていなかった僕は、「Riot なら自分でも使えそう！（そしてここから始めれば、いわゆるイマドキなフロントエンドにスイッチしていけそう）」と考えて、Riot.js を使うようになりました。

幸い、その当時は Qiita などにも日本語の Riot.js 入門記事がいくつかあったり、また Riot 自体も独自の構文やルールの様なものがとても少なかったため、比較的早く使い方を掴むことができました。

あとは、ぼく自身がある程度自由に書いてつまづきながら覚える方が性に合っているタイプというか、最初から「こう書くべき」というルールが少ない中で、自分なりに試行錯誤して失敗しながら覚えていく、という方が続くタイプ（＝概念的なことを理屈ですぐに覚えられない。触って失敗して後悔してやっと飲み込める、みたいな）だったので、そういう点も Riot が自分にフィットした理由だったと思います。

その当時は結構盛り上がっていた Riot.js

またこの当時、おそらくこの頃が過去一番 Riot.js 界隈が盛り上がっていて、当時の Riot のイベントにも結構人が集まっていましたし（今は年末のアドベントカレンダーすら過疎っていて悲しみ…今年はぜひみなさんご参加を🙏 逆に目立てるかもしれませんよ…！）、今考えると、ちょうど世間的な注目度のピークだった頃でした。
その影響もあってか、今現在も Riot.js が使われているプロダクトがいくつかあるのですが、そのほとんどがバージョン 3 だったりします。（個人的に観測する限りですが）

ちなみに、ぼくが Riot.js に出会う前のバージョン 2 以前については、正直あまり知りません。
それ以前にも色々と動きがあったそうなのですが、この記事ではぼくが知るバージョン 3 から振り返っていこうと思います。

🕰 Riot.js v3 のその後

そんなこんなでぼくが Riot.js に出会い恋をしてしばらくたったころ（2017年頃からじゃないかと思います）日本で Vue.js が流行り出します。（Vue はもっと前から流行ってたよ！という声があるかも知れませんが、あくまで僕の体感です。）

その一因として、Vue.js は当時からコミュニティも非常にしっかりされていて、公式の日本語のドキュメントもすごく丁寧に整備されていたことも大きかったように思います。（ぼくもこの頃にちゃんと Vue.js を触ってみて、ドキュメントの充実さに驚いたことを覚えています。）

また Riot.js と Vue.js は当時からコンセプトが似ているところがあって、例えば、Riot.js はもともと単一ファイルコンポーネントという設計になっていて、コンポーネントに関係する HTML / CSS / JavaScript を一つのファイルにまとめて書くことができたのですが、Vue.js もこの辺りから単一ファイルコンポーネントで書けるようになるなど、両方をウォッチしていると「似てきてるな」と感じる状況がありました。

加えて、Riot は独自構文が少なく、実装時のアレンジはほとんど素の JavaScript を書いて解決するというスタンスでしたが、 Vue の方は、さまざまなディレクティブが用意されていて、JavaScript でゴニョゴニョしなくても用意されたディレクティブを使うことで効率的に実装できるというところも Riot に比べて Vue いいじゃん！という機運が強まった要因だったかも知れません。

そんなことも影響してか、当時 Riot.js で盛り上がりかけた熱は、ユーザーとともにその後段々と Vue.js やそのほかのライブラリに移っていったような気がします。
（Vue.js のせいで Riot.js が…みたいなことではなく、あくまでそういうタイミングだったな〜という個人の感想です😅）

また、Riot のドキュメントがあまり親切ではなかったことや、バージョン 3 当時はなかなか改善されないバグの存在、またパフォーマンスの課題もあったりして、そういうことも複合的に影響した結果なんじゃないかと思います。

この頃を境に Riot.js は段々と界隈で名前が上がることが減っていった印象があります。

🏃‍♂️ v4 以降の Riot.js の歩み

そうやってユーザーもなんとなく減ってきてしばらく経った頃に、当初のアナウンスよりだいぶ遅れていましたが、やっと Riot.js の v4 が登場します。
このバージョンでは、v3 でなかなか解決できなかったバグの解消や、大幅な速度の改善もあり、ぼく個人的には非常に嬉しいアップデートでした。

が、反面 API が変更され、公式サイトにある「Vue.js にインスパイアされた」という言葉の通り、API の一部は Vue.js に近いものになったり、IE11 が非対応になったり（実際には IE11 でも動かす方法はあるのだけど）、色々と破壊的な修正が入りました。

そのため、当時減りつつあったとはいえ引き続き Riot.js を使っていたユーザーの一部も、この破壊的な変更をきっかけに、別のライブラリを使うようになった方も少なくない数いたように思います。（Riot が書き方変わっちゃうなら、そもそもほかの使うという手も…！？ということはぼくも当時考えたことはあったのでなんとなくわかる気持ちもあります）

そのころは、日本語圏だけでなく、英語圏でも「前の Riot v3 がよかった！」という声をTwitter などで見かけました。
それだけ Riot v3 に慣れていたり、思い入れのある人が多かったということなのかも知れません。

実際のところ、ぼく個人の感じ方では、API が変わったとはいえ基本的な考え方や書き方はそんなに大きくは変わっていなくて、慣れてしまえばそれほど新バージョンへの移行の負担は感じなかったんですが、もともと手軽に使えるというところが一つの魅了だったところに、多少書き方の制約が増えてしまったことや、新たな API を学ぶことが必要になったことで、望んでいたものじゃないという反応をするユーザーもいたのかなと思います。

（もしくは、当時すでに変化に柔軟な人は、早々にほかライブラリに移行し始めたりしていて、結果的に変化に拒絶反応を示しやすい層が Riot ユーザーの中に相対的に多くなっていた時期だった、ということも若干あったんじゃないか、という邪推もしたり…全て想像ですが…🤔）

🎨 ロゴの刷新

ちなみに、このバージョン 4 の時に、ロゴも新しくしたいという issue が Github に立ったので、勢いでぼくが投稿したアイディアの一つが無事採用され🎉 現在のロゴになりました。

• Refreshing the riot logo · Issue #3 · riot/logo

🔧 広がらなかった v4。でも…人知れず改善されています。

そんな経緯もあって、Riot.js は実は今も精力的にメンテナーさんが管理・ブラッシュアップしているのにもかかわらず、世の中的にはいまだに v3 時代のまま認識が止まってしまっているような状況があり、いまいち最新版が世の中に知れ渡っていない感じがしています。

確かに、React、Vue、以外にも、最近は Svelte （これもまた Riot に似たところを持つライブラリですが）などが人気を獲得しつつあったりと、関連ツールや日本語の情報が揃った他ライブラリが増えつつある中で、Riot.js はユーザー数に比例して情報もあまり多くはなく、決して万人に Riot.js を勧められる状況ではないのですが、
とはいえ、Riot には v3 当時から「シンプル」で「独自の記法が少ない」という特徴があり、今の JS ライブラリの中でもその点は特筆できる点で、とくにカジュアルにカスタムエレメントを活用したいという状況など、スキルや環境によってはほかのライブラリよりもマッチすることがあるのではないか、と今でも思っています。

そこで、絶対的に情報が少なくなってしまった2021年（5月）時点の最新の Riot.js について、日々 Web サイトなどの受託制作の仕事で常用しているぼくが感じていることを、主にバージョン 3 の比較という観点で以下に書いてみたいと思います。

v3 から v4 への変更点を網羅するものではありません。
個人的に印象に残っている機能や変更点を独断でピックアップして書いています。

🐛 v3 で解決できなかった yield のバグは v4 の slot で解消

Riot v3 には yield という Vue で言う slot にあたる機能がありましたが、コンポーネントがネストした際に、この yield がネストすると正しく動かないという問題がありました。
これが v3 の間は解決できず、長い間次バージョンに持ち越しの問題になっていました。😇

v4 になってからは、yield は Vue と同じ slot という名前になり、このネストできない問題も解消されました。

厳密には、v3 の yield と、v4 以降の slot はただ上記のようなバグの解消だけでなく、挙動も若干異なる部分があります。
その辺りについて詳細や、v3 当時の yield により近い使い方をしたいという場合には、下記の記事が参考になります。

• 【Riot.js】<slot />と<yield />の差異を埋めるcode snippet | by たふみ | DE LIKER | Medium

🚀 パフォーマンスも最新版はそこそこ健闘してる模様

パフォーマンスチェックやベンチマークについては、シチュエーションや個別のケースによるところもあるのでしょうし、そもそもあまり僕自身がそういった比較の方法にそれほど詳しくないので、参考リンクとこれまでの経緯だけの話になりますが、
Riot は v3 の時には、一時期ほかライブラリに比べてパフォーマンス面で劣ると言われていた時期もあったのですが、v3 の最後の方や v4 以降になってからは順次最適化されて（人知れず）パフォーマンスも向上されてきました。

以下の最近の比較記事などを見ても、結果の数字だけを見る限りはほかのライブラリとも遜色なく、比較対象や比較箇所によっては、むしろ Riot が優っている結果も出たりしています。

• JavaScript Frameworks, Performance Comparison 2020 | by Ryan Carniato | JavaScript in Plain English
• All the Ways to Make a Web Component - May 2021 Update

📜 IE11 でも実は動く（Polyfill とかを使えば）

IE11 は v4 以降は公式に非対応となりましたが、それはモダンな JavaScript にフォーカスして作り替えられた結果であり、実はコンパイルの環境を工夫することで IE11 でも動きます。

公式のサンプルリポジトリの中にも、ひっそりと IE11 対応のサンプルが存在します。

• examples/ie11 at gh-pages · riot/examples

また以下は、あくまで非公式なやり方で、プリコンパイルが前提になりますが、ぼくの場合は、IE11 の対応が必要な場合は以下のポリフィルモジュールを import しています。

import 'core-js/stable'
import '@webcomponents/template'
import { register, mount, install } from 'riot'

...

（まあそもそも、もう IE11 を積極的に対応するのもどうなのよ…という感じはありますが。。仕事だと色々とのっぴきならない理由で対応せざるを得ない時もたまにあるとは思うので、そういうときにサクッと Polyfill とかで解決できるという点では重宝しています）

👀 observable は別モジュールに切り離されただけで今も使える

v3 の頃には observable という、コンポーネント間のやりとりを中継してくれる機能がありましたが、v4 ではこの機能が別モジュールに切り出されました。

別モジュールになっただけで、今も継続してメンテはされているんですが、v4 になってからは表立って機能としては紹介されず、v4 になってからの公式ページでも、マイグレーションガイドのページで少し言及されているくらいの扱いになっています。

• マイグレーションガイド · Riot.js

実際のところ、シンプルなものであれば Props を使ったバケツリレーで済んだり、複雑なストア管理が必要というなら別のそういったライブラリを持ってきた方がいいのでは、というのもあり、observable は Riot v4 にとってはちょっと中途半端な存在だったのかなと感じていて、個人的には別モジュールに切り分けたのはよかったと思っていますが、
observable 自体は確かにちょっとしたコンポーネント連携に便利だったので、v3 でこの observable を便利に使っていた人たちの中からは、v4 がリリースされた当時、「observable 本体から消えちゃったのか〜」という落胆もあったんじゃないかなと思います。

こうやって書いていくと、やはり v4 は v3 に慣れ親しんだ人にとっては、文字通り「破壊的」な変更が多かったんだなーと改めて思いますね。😅
今となっては必要な変更だったと思いますが。。。

🔗 v4 で削除された親コンポーネントへの参照（parent)

v3 では parent を使って親コンポーネントを参照して、子供が親のメソッドとかを直接呼べる、という機能があったんですが、これはコンポーネントのネスト構造に依存したコードが子供に書かれることになるしあまりよろしくないよね、という感じで（言い方は結構ぼくの解釈が入っちゃってますが）削除されました。

これも v3 に慣れていると、「親が参照できなくなった！使いづらい！」となるポイントだったんじゃないかなと思いますが、parent に変わる親子の連携の方法については、当時 v4 の RC が出ていた時にメンテナーさんに issue で質問したところ、以下のような回答をもらいました。

• How can I access parent tag method from child tag?(Riot@4RC1） · Issue #2671 · riot/riot

自分はこれを参考に、子供のコンポーネントで何か起きた時に、親コンポーネントのメソッドを実行したい、みたいな時には、

1. 親のメソッドを props を通して子供に渡す
2. 子供は props から渡された親のメソッドを実行

みたいな方法を使っています。（いわゆるバケツリレーです）

👉 v3 にあった　ref に代わる新たな機能 $() と $$()

v3 のときには、

<h1>Riot.js v3</h1>
<input ref="input" value="テキスト">

<script>
  this.on('mount', () => {
    console.log(this.refs.input.value) // -> テキスト
  })
</script>

というふうに、ref という属性をつけた要素を、 refs から参照できる機能がありましたが、この ref 属性は v4 では削除され、代わりに、 $() と $$() という、そのコンポーネントのテンプレート部分だけにスコープが閉じた querySelector() と querySelectorAll() のショートハンドの様な機能が追加されました。

<h1>Riot.js v4</h1>
<input data-ref="input" value="テキスト">

<script>
  this.onMounted = () {
    console.log(this.$('[data-ref="input"]').value) // -> テキスト
  }
</script>

💎 v4 からの新機能 install()

https://riot.js.org/ja/api/#riotinstall

全てのコンポーネントに対して、任意の機能や情報を加えることができます。
ゆくゆくは、この install() を使ってプラグインのような感覚で Riot で作るコンポーネントの機能を拡張することも考えて用意された機能のようです（ただ、まだそういったプラグインと呼べるものは出てきていません😇 誰か作って〜！→自分で作れ😳）

全てのコンポーネントに共通のデータや処理をサクッと install() で渡せるので、作法的には影響範囲が大きくて微妙に感じる方もいるかも知れませんが、ちょっとしたものを作っているときには結構便利です。

🚏 新しい Router モジュールは Riot なしの単体でも使えるものに刷新

• riot/route: Simple isomorphic router

元々 v3 のときから別のモジュールになっていた router も v4 リリース後に新しくなり、シンプルな機能のこの router モジュールは、Riot.js がなくても使えるものになっています。

• Riot.js v4に対応したルーター、Riot Routerのbeta版がリリースされました！ | フロントエンドBlog | ミツエーリンクス

⚙️ SSR用のモジュールも登場

サーバーサイドレンダリング用のモジュールも用意されました。

• riot/ssr: Riot.js node Server Side Rendering

ちなみに、ぼくはこの SSR 用のモジュールを、Pug や EJS の様な感じで .riot ファイルからローカル環境に HTML ファイルを生成するのに使っています。

• Riot.js でローカルに HTML を生成する環境を作ってみた。 - Qiita

🇯🇵 日本語の解説本も登場

日本で Riot.js のコミュニティも運営されている Keeth さんが Riot の本を執筆されました。

• Amazon.co.jp： Riot.jsで簡単Webアプリ開発 eBook: 桑原聖仁: Kindleストア

Riot.js にとっては本当に貴重な情報源です。（しかも日本語）
表紙には「v4 対応」と書いてあって、Riot.js の最新バージョンは 5 （多分もうすぐ 6）なので、数字だけ見ると本の内容は古いバージョンの情報かな？と思ってしまうかもしれませんが、Riot.js は v4 以降は今のところ API には変更はない（※）ので、実質、本の内容は2021年5月現在も最新版に対応した内容になっています。

※
v4 → v5 の変更は、確かパフォーマンスのために DOM のレンダリングエンジンを変更したとか内部的な変更だったので、API は以前と変わっていません。

🍄 TypeScript 対応のさらなる改善ももうすぐ

2021年5月17日現在、まだ PR の状態ですが、.riot ファイルの中の script の中に TypeScript が書けるように改善されている最中です。

• Improved typescript support by GianlucaGuarini · Pull Request #2912 · riot/riot

📕 独自の構文が少ない=覚えることが少ない、というメリットは今もそのまま

Riot は v3 の頃から現在の最新版も、いわゆるライブラリ固有の構文などがとても少なくて、それ以外は全て普通の HTML / CSS / JavaScript です。

ディレクティブと呼ばれる、HTML のタグの属性値として設定する独自の機能は if と each と is だけしかありません。

あとは .riot の中の HTML タグの中に書く { } の中が素の JavaScript の式として評価されるので、そういった特性を活かして、<script> タグの中に書くロジックとテンプレート部分（HTML部分）を連動させる、という普通の HTML と CSS と JavaScript の関係性がそのまま .riot ファイルの中に収まるような設計になっています。

なので、Riot.js 固有の何か、を覚えるのは最小で、あとは HTML と CSS と JavaScript でカスタムエレメントを作る、ということがしやすいライブラリです。
（その分、JavaScript のちょっとした応用的な書き方が必要だったり、ほかのライブラリに比べて少しだけ冗長な書き方になる部分もありますが、JavaScript をちゃんと書いて覚える、という意味ではむしろ Riot のような薄いライブラリを使うことはメリットにもなるんじゃないかと思っています）

🧩 WebComponents の様なカスタムエレメントを使ったコンポーネントベースの制作を始めやすい Riot.js

公式サイトでも、

Riot.js は誰でも使えるWeb Components です。

と書かれている通り、Riot.js は使い勝手として Web Components に近いものになっています。
（最近は Lit など Web Components の Polyfill から進化したツールがあるので、「Web Components です。」と言ってしまうとちょっと語弊があるかもしれませんが😅 一応、Riot.js でネイティブな Web Components を実装するためのモジュールも存在します）

カスタムエレメントとしてパーツを小さく作って、それを組み合わせて大きなものを作っていく、ということが、すぐにできるライブラリ。それが Riot.js です。

また、Riot.js、実は以外と長く続いているライブラリで、最近はバージョンのメジャー番号がどんどん上がっている（4 → 5 → もう直ぐ 6）ので、破壊的な変更が入っているっぽく見えますが、バージョン 4 以降は基本的に API に変更はなく、個人的な所感になっちゃいますが、かなり動作も安定している印象です。

📐 UI ライブラリもある

• Semantic UI Riot

Semantic UI という UI ライブラリを Riot コンポーネントとして使えるようにしたものです。
v3 の頃からあって、日本の開発者の方によってメンテされています！

• riot-material/riot-material: Material design components for RiotJS library

Material Design の UI を Riot のコンポーネントにしたもの。
v4 のリリース後にできたものなのか、ロゴも v4 からの Riot.js のロゴを踏襲したデザインになっています🙂

🤝 昔、Riot.js 使ってたよ！という方へ（感謝）

ぼくが Riot.js 使い始めた当時、僕よりももっとつよつよな方々がすでに Riot を使われていて、ぼくは当時そうした方々の発信してくれた情報のおかげで Riot を理解して、今日まで日々常用するまでになりました。
最近はもうあんまり Riot 使ってないなーという人も多いと思いますが、今更ですが、当時 Riot を盛り上げてくれていた方々には本当に感謝しています。（ありがとうございます！）

ここまで読んでいただいた方で、もし Riot.js を以前使われていたよ！という方がいましたら、

• 当時の Riot.js をどう使ってたか（昔話でも！
• 現在の開発環境（今はこのライブラリ使ってるなど
• 最新版 Riot.js への印象や、触ってみた感想など

などなど、なんでも構いませんのでコメントいただけたら嬉しいです！（Mac の前で「フォォーーォゥウッ！✊🔥」といって喜びます）

🤘 Riot.js 今も使ってるよ！という方へ

2021年に稀有な方！（自虐）
ぜひ Riot の情報交換しましょう〜！！

🙌 Riot.js 初めて聞いたよ！という方へ

最近は、Webの制作や開発の仕事に、他業種から飛び込んでくる方も増えた様に思います。
ぼくも元々はグラフィックのデザイナーだったので、プログラミングのバックボーンがあまりない状態で独学で JavaScript を仕事をしながら勉強してきたタイプなのですが、現在のフロントエンドは領域がより広がっている分、必要とされる知識やスキルもどんどん幅広くなってきていて、これから勉強する方は、何から手をつけていいかわからなくなる気持ちもわかります。

ライブラリとしては、メジャーな React や Vue は勉強のための情報も多く、環境としては学びやすいと思いますが、反面、ライブラリの守備範囲の広さや機能の多さから、入門から高度な応用の情報までさまざまな情報があり、これも人によってはどこからどこまでを覚えるべきか迷ってしまうこともあるのではないでしょうか？

Riot は良くも悪くも、必要最小限の機能しかない小さなライブラリです。
HTML / CSS / JavaScript という Web の基本の知識を活かしながら、コンポーネントベースで何かを作ってみる、という目的にはフィットすると思います。

また、たまに普段勉強しているものと違う別のライブラリを触ってみることで、メインで使っているライブラリや JavaScript に対する理解が深まるということもあるので、Riot を今まで知らなかったあなたにも、気分転換やサイドプロジェクト的に触ってみていただけたら、きっと何か発見があるのではないかと思います。

そしてもちろん、万が一（というのはちょっと稀すぎるのでせめて百が一、十が一くらいになると嬉しいですが😅）Riot があなたの肌に合えば、メインのライブラリとしてガッツリ使ってみるということもありだと思います！
そんなときはぜひ　Riot の使い方などについて情報交換できたら嬉しいです。

今回の記事では、ぼくが最初に知った v3 から現在の最新バージョンまでの経緯や、その改善差分などにフォーカスして、半ば衝動的に一気に文章を書いたので、初めて Riot.js をさわる方向けの解説やコード例などはほとんど省略してしまいましたが、
もしこの記事を読んで Riot.js に少しでも興味を持っていただけた方がいれば、次回はそういった最新の Riot.js の入門記事を書いてみようと思っています。
ひとことでも感想などコメントいただけたら、今後のモチベーションに変えていきますのでぜひ感想いただける嬉しいです。

最後に

また、よりつよつよなエンジニアさんから、逆に Riot ってこういうとこだめだよねーとかのご意見ももしありましたらコメントください！（ながらくシェア減らしてきている Riot ですので、そういうコメントもこれまでちょくちょくあったので全然 Welcome！…でも筆者自身はガラスのハートなので出来たら優しめに書いてくれたら嬉しいです🥺

Riot.js、昨今はなかなか日の当たらない境遇ですが、今もシンプルで便利な JS ライブラリとして、ひっそりと、着実に開発続いているので、これからも応援していきたい、という思いで記事を書いてみました。

以上、長文を最後まで読んでいただきありがとうございました！