Riot.js の新しいブランディングロゴのご紹介（前編）
この記事は 2022 年 Riot.js アドベントカレンダー 2 日目の記事です！
昨年、2021 年 5 月現在の Riot.js という記事を書いてから、あっという間に1年半も時間が経ってしまいました。
（その理由については、個人的な話題で主題から外れるので記事の最後におまけとして少し書かせていただくとして…）
Riot.js はその間にも着々とメンテナンスされており、kkeeth さんのアドベントカレンダー初日記事にも書かれている通り、バージョンもメジャーバージョンアップをして 7 に上がりました。
（メンテナーさんには本当に感謝しかありません）
その間、僕が実質的に Riot.js に貢献できたことといえば、issue へのバグ報告・質問と、あとは Twitter などに少しでも Riot.js について話題を増やすために地道にツイートする…くらいでしたが、
今年はそれに加えて、元々 v4 からの新しいロゴをデザインさせてもらった流れで、Riot.js のブランディングロゴを提案させてもらいました。
すでにいくつかは公式リポジトリにマージされ、追加分の PR ももうすぐマージされるのではと思いますので、この記事では、その新しいブランディングロゴについて、経緯やロゴに込めた思いについて書かせていただこうと思います。
発端は公式の Discord チャンネルでの会話
Riot.js には公式の Discord チャンネル があるのですが、その中で今年の6月ころ、メンテナーの方から
「animote （という、Riot.js で anime.js というアニメーションライブラリを手軽に利用できるモジュール）のリファクタリングに着手を検討してるよ！」
という主旨の発言がありました。
僕はもともと anime.js もアニメーションライブラリとしてお気に入りでしたし、またアニメーションが手軽になるモジュールは Riot.js に改めて興味を持ってもらうためのきっかけになるので、メンテナーさんには、ぜひ改善着手してもらいたい！という思いがありました。
また、そういった公式の関連モジュールというかプラグインみたいなものがあることもあまり知られていないのももったいないなと常々思っていたので、「自分が出来る範囲で貢献できそうだし、関連モジュールのロゴとかも作ってみるか！」と思い立ったのが始まりでした。
まずは、個人的に知ってもらいたい公式モジュール 8 つのブランディングロゴを制作
Riot.js のロゴは、もともと、Riot の R と、「Riot = 暴動」から転じて、こぶし（✊）の形をメインに、何となく炎（🔥）っぽく見えるシェイプにした、比較的コンセプトや作りがシンプルなロゴだったので、当初作った時から「ほかの形にも展開できるよな〜」とは思っていました。
また、昔 Riot.js とよく比較されていた Vue.js は関連ツールのロゴも Vue の緑の三角形のロゴを展開したものが多く、コミュニティ全体的として関連ツールが豊富に見える（というか実際にめちゃめちゃ豊富なのですが💦）のが羨ましいなという気持ちもありまして…
だったら自分で作ろう！ということで、個人的に「こういうのもあるんだよ」と知ってもらいたいモジュールについて、ブランディングロゴ案を作成して PR を投げました。
以下がその 8 つのモジュールのブランディングロゴです。
メンテナーさんからも早速「いいじゃん！」ということになり（ほかのメジャーなライブラリではこう簡単にはいかないとは思いますが 😅、良くも悪くもいまやマイナーなライブラリで小さなコミュニティであるがゆえの面白いところですね）、その後、程なくして公式のブランディングリポジトリにマージされました。
せっかくなので、先行して作成した 8 モジュールの簡単なご紹介
riot/observable
Riot.js の v3 の時代には外部モジュールではなくライブラリそのものに内蔵されていた機能で、異なる複数のコンポーネントを連携させる時に便利なモジュールです。
Riot.js v4 で外部モジュールとして切り出されたことで、一部ユーザーからは「オブサーバブルがなくなった…」という悲しみの声があがるくらい、多くのユーザーがお世話になっていたであろう機能で、実は外部モジュールにはなりましたあともちゃんとメンテナンスはされているので v4 以降でもちゃんと使えます。
riot/animore
前述した、anime.js というアニメーションライブラリをラップしたモジュール。
Riot.js のライフサイクルイベントに連動したアニメーション処理などを簡単に設定できます。
ちなみに結局、その後メンテナーさんはライブラリの別の機能の拡充（ランタイムスロットという機能でこれもまた別記事で紹介したい）に着手したりした関係（だと思う）で、このモジュールのリファクタリングや改善はまだ出来ていない模様🦒 {くびをながくしてまってます
riot/route
シンプルなルーティングライブラリです。
Riot.js と一緒に使えば <route> や <router> というコンポーネントが使えますし、スタンドアローンのルーティングライブラリとしても利用できます。
riot/ssr
サーバーサイドレンダリングを実現するためのモジュールです。
僕はこのモジュールをローカルで動かして、Riot.js のファイルを静的な HTML に変換したりする時に使っています。（pug や ejs、nunjucks のような使い方）
riot/cli
コマンドラインから .riot という Riot.js のコンポーネントファイルを JavaScript にコンパイルするためのモジュールです。
自分はこれを使って普段は .riot を JavaScript モジュールにコンパイルしたものを、ブラウザが読み込む用の JS ファイルに import して esbuild を使ってバンドルするという感じの環境を作って使っています。
riot/lazy
これは、Riot.js のコンポーネントを遅延ローディングするためのモジュールです。
じつは自分はこのモジュールちゃんと使った事ないんですけど、パフォーマンスの改善にも使えそうなので今後上手く使っていきたい…と思っています。
riot/hot-reload
ページのロードをせず、またコンポーネントの State などの情報もそのままに Riot.js のコンポーネントを更新するためのモジュールです。
実はこれも自分はあまり使った事ない…んですが、開発用にホットリロード実現したい、と言うケースはあると思うので、そういうモジュールもちゃんとあるよ！というアピールはしたい、と思ってつくりました。
（公式に webpack の loader とかも用意されていて、たしかそこの中でこれが使われてるはず）
riot/custom-elements
これは、Riot.js のコンポーネントを Web 標準の Web Components としてコンパイルするためのモジュールです。
Riot.js はもともと Web 標準の Web Components を意識して設計されていて、これはその象徴的なモジュールだなと思ってロゴを作成しました。
ちなみに実験的開発段階のモジュールなので、その点を区別するために色は黒くしています。
後編につづきます
上記、8つのブランディングアイコンは、前述の通りすでに riot/branding というリポジトリにマージされて、メンテナーさんも各モジュールの README.md ファイルに画像を貼るなどちょっとずつブランディングとして利用してくれているみたいです。🤘
後半の記事では、まだマージされていない提案中のロゴなどについて書きたいと思います。
Riot.js、最近はさほど注目度は高くないですが、意外と古株のライブラリで適度にこなれている部分もありますし、何より機能もシンプルで覚える事もすくなく使いやすいので「なかなか最近の JavaScript のライブラリ難しくて手が出せない〜」という方の学習のきっかけや、比較的小規模な制作であれば今でも十分「使える」ライブラリだとおもっています。
また、長年 Riot.js にお世話になっていながら、Riot.js のコードそのものにはまだほとんどコミットできていませんが、デザイナーとしてロゴの提案などで微力ながらライブラリに貢献できるということの楽しみも感じていて、Riot に限らずこうしたコントリビュートに興味を持つデザイナーが増えたらよいなとも思っています。
この記事がもしだれかのそういったきっかけになったら嬉しい限りです！
（そしてやっぱりなにより、Riot.js に興味を持ってくれる人も増えますように！✊🔥）
最後に、ちょっとだけ個人的なこと…
最初に少し書きましたが、去年に Riot.js の記事を書いてから、しばらく仕事で忙殺される日々でしたが、今年に入ってからは実は長年勤めた制作会社を退職する方向で調整もしている中で、先月11月に会社が急遽倒産・廃業となり、2022年12月現在、突然、野生の弾き語りおじさん兼Webデザイナー・フロントエンドエンジニアになってしまいました…🦓
現在は色々あって、前職の後処理や諸々の自身の行政手続きなどしながら、一旦フリーランスとして仕事をする準備をしていますが、長期的な今後のキャリアは少し落ち着いて時間をかけて考えよう…と今のところ思っています。。。
もし、こんな Riot.js に興味ある方や企業様（今どき珍しいと思いますが…）などいらっしゃいましたら、下記 YOUTRUST などにプロフィールなど掲載していますので、カジュアル面談などお話できたらありがたいです。
…最後は、自分の宣伝みたいになってしまいましたが、
ここまで読んでいただきありがとうございます！
まだマージされていない追加ロゴのデザインについての後半記事や、その他、最新の Riot.js の推し機能についても、近々記事を書こうと思いますので、どうぞよろしくおねがいします。
Discussion