ruby-wasm-vdomで雑なオレオレツールを作った

作ったもの

https://sue445.github.io/annict-vod-search/

github.com

モチベーション

最近縁があって Annict の編集者*1 になって、気がついた時に各アニメの配信サイトの情報を登録しています。

その時にいちいち複数の配信サイトでアニメのタイトルを検索するのが大変なので一箇所で検索できるようにしたくて作りました。（製作時間は2〜3時間）

使った技術

いつもだとこの手の雑なページはVue.jsを使うことが多いのですが、今回は面白全部 *2でruby.wasmを使ってみました。

ruby.wasmで仮想DOMを扱うためにruby-wasm-vdomを利用しています。

ruby-wasm-vdomについては下記を参照。

github.com

qiita.com

感想

• 使い慣れたRubyで書けるのは便利
• ヒアドキュメントでJSXっぽく書けるのは面白い *3
  • しかし入力値をそのまま出力するとXSSが発生して こういう対応 を自前でやる必要があって大変。（Railsだとデフォルトでいい感じにしてくれるのであまり気にしてなかった）
• wasmの中でエラーが起きた時にどの行でエラーが出たかとかがぱっと分からないのでデバッグが大変だった
• あまりドキュメントがなかったけど https://github.com/getty104/ruby-brainfuck-interpreter が参考になった

*1:データベースにアニメ情報を自由に追加できる人

*2:面白半分の2倍

*3:https://github.com/sue445/annict-vod-search/blob/be8a262271f5e26f4cfe0618e41f9e7f8ba6e008/docs/src/app.rb#L24-L42