Riotで同人イベントの告知ページを作ったよという話

まえがき

Riot良さそうなんだけど触る機会なかなか無いしなあと思ってたところで、
制作を依頼された同人イベントの告知サイトを制作した事例メモです。

なぜRiotなのか

• React / Vuejsなどのフレームワークは触ったことはないけれど、なにか触ってみたい
• 触りやすそうなフレームワークって何だろう→Riotだと学習コスト低そう
• （Reactも良さそうなんだけど、JSXのコードがエグいなあって思ってしまい敬遠…）
• HTMLそのままで書けるんだ、なんならpugでも書けるの良いね
  （とはいえemmet使ってHTML書いた方が速いかなあと思いました。tag使い回せば良いし。）
• CSSもsassで書けるじゃん、JSも当然のようにES6で書けるのね
• でも要件としては特に必要無いんじゃない？
  →「技術触ってみたい」は魔法の合言葉

制作の流れ

• HTML/CSSコーディング
  普段と同じ感覚ですね。共通部分は子タグで共通化できるのでちょっと楽できる感じ。
• コンテンツの中身はJSONで書いておいて読み込み（さすがにAPIとか用意するほどではなかった）
• 適当にロジック書いていく
• アニメーションなど追加したり

observableの利用

疎結合を維持できるので便利だなあという感想。

具体的に言うと、アニメーション連携あたり。

1. アクセス時にはローダー画面を表示させておく(z-indexで最前面に設定した状態)
2. 画像ロード完了時のハンドラーをobserverに登録しておく
3. ロード完了したら（ローダー周りの処理で）observerを叩く
4. observerは登録されているハンドラーを叩く
5. tag内のアニメーションイベントが走る

という流れです。

ハマりどころ

というか正直公式のドキュメントが読みづらく感じるのは僕だけでしょうか……

JSONからHTML要素を書き出そうとしてもテキストとして出力されてしまう

XSS対策とかセキュリティ的には正しい選択なのだけれど、何も考えないで組むと躓きますね…

答えは公式ドキュメントにあった。
子タグを呼び、そこを通してinnerHTMLを書き換えてもらう感じ。

raw.tag

<html-raw>
<script>
//※データの都合上、文字列 or 文字列を適宜分割した配列を想定
opts.content = (typeof opts.content == 'string') ? opts.content : opts.content.join('');
this.root.innerHTML = opts.content;
</script>
</html-raw>

感想

Riotを使用したメリット

さすがにSPAライクなページじゃないと真価を発揮していない感はある。
けれど、ペライチのWebページでもセクションごとにtag分割したり使い回して書けるので、
比較的コードの見通しがよくなりやすいなあという感じ。

特に、見た目にこだわりたい案件ではエフェクトも複雑になりがちで、
アニメーション周りのコードがクッチャクチャになりやすい……。
ので、関係するtag内でコードが完結できるのは大きなメリットかも。
今回はやらなかったけど、スタイルも1つのtagにまとめて書けるしね。
うまくやれば、ローダーみたいな部品はtagひとつコピーするだけでコードに手を入れず使い回しできるので後々楽そう。
このへん他のフレームワークだとやりづらそうなので、Riotならではなのかな？

後々のページ追加のタイミングではあまり時間が無かったため、
別案件の使い回しHTMLを用意してしまった、ので、Riotでやったメリットが薄れてしまった結果に。
次回以降はrouterなんかを使って上手いことやりたいです。

Observableの利用で、イベントのハンドリングが楽

複数タグまたぎでもイベントのハンドリングが容易。なので上述のようなイベント連携が書きやすい！
……とはいえ、これは僕がObserverパターンを知らなかっただけなので、べつにRiotのメリットではないですね。

ノウハウの集積

React / Vue あたりと比べるとユーザーが少ないので、あまりノウハウが転がってないなあというのが一番苦労したポイントかなあとは思います。
学習コストは低いのかもしれないけど、流石に全くフレームワークを触ったことがない状態だと、サンプルとかあまり見ないで触ろうとするとツラいですねー……。
あと公式のドキュメントがイマイチ読み辛いのがしんどかった。。

とはいえ触ってて楽しいは楽しいので、別の案件でも使ってみようかなとは。