ruby.wasmとPicoRuby.wasmに対応した仮想DOMライブラリを作ってる話 #kaigieffect_kaigi

KaigiEffect Kaigi 2026 の発表資料です

Transcript

1. pixiv Inc. ruby.wasmとPicoRuby.wasmに対応 した仮想DOMライブラリを作ってる話 KaigiEffect Kaigi 2026 https://andpad.connpass.com/event/395551/ sue445 2026/07/13
2. 2 2 sue445 Engineer 自己紹介 • Go Sueyoshi a.k.a sue445 • ピクシブ所属 (2018/07〜) • インフラとかインフラ以外とか色々 • Past RubyKaigi Speaker ◦ 2019, 2023, 2025
3. 大切なご報告 3
4. 4 4 sue445 Senior Tech Lead シニアテックリード (2026/07〜) 🆕 • クラウドネイティブ分野全般 ◦ AWS, Google Cloud, Kubernetes • 普通のテックリードを通り越してシニア テックリードなので 2階級特進 😇
5. Agenda • 今作ってる https://github.com/sue445/rb-wasm-vdom の話 5
6. きっかけ • 元々はRubyKaigi 2026のLTネタで作ろうと思ってた • 本編のタイムテーブル見てたら内容がhasumiさんの話 (https://github.com/picoruby/funicular)と被ってそうだったので作るの を断念した • Partyかなんかでその事をhasumiさんと話した時に「両方あっていいん じゃない？（意訳）」みたいなことを言われたので作った(KaigiEffect) 6
7. sue445/rb-wasm-vdom • https://github.com/sue445/rb-wasm-vdom • ruby.wasmとPicoRuby.wasmの両方に対応した仮想DOM(人生初npm) • npmの中にRubyのソースコードがガッツリ含まれてる 7
8. Features: Vue.jsっぽい記法 8
9. Features: テンプレート内でのメソッド 呼び出し 9
10. Features: #if 10
11. Features: #each with Array 11
12. Features: #each with Hash 12
13. Demo • https://github.com/sue445/rb-wasm-vdom#examples 13
14. 詳しいこと • ruby.wasmとPicoRuby.wasmの両方で動く仮想DOMライブラリを作った - くりにっき • https://sue445.hatenablog.com/entry/2026/07/02/185143 14
15. 導入事例：地域.rbカレンダー 15 https://sue445.github.io/regional-rb-calendar/
16. jsonを読み込んでいい感じに表示 16 https://sue445.github.io/regional-rb-calendar/
17. 地域.rbカレンダーなのでフロントエンド もRubyで実装しなおした 17 https://github.com/sue445/regional-rb-calendar/pull/429
18. Before: Vue.js 18 https://github.com/sue445/regional-rb-calendar/blob/4d921077/docs/js/app.js#L16-L27
19. After: rb-wasm-vdom 19 https://github.com/sue445/regional-rb-calendar/blob/65333d61/docs/src/app.rb#L55-L63
20. おまけ:ruby.wasmとPicoRuby.wasm の雑比較 20
21. PicoRuby.wasmの方がファイルサイズ が小さいので起動時間が早い • @ruby/head-wasm-wasi@latest (Ruby 4.1.0) ◦ ファイルサイズ:8.84MB ◦ wasmファイルをDLしてRuby VMを起動するまでの時間:平均 863.12ms、中央値890.7ms • @picoruby/wasm-wasi@latest (Ruby 3.4) ◦ ファイルサイズ:0.52MB ◦ wasmファイルをDLしてRuby VMを起動するまでの時間:平均 157.46ms, 中央値155.9ms • c.f. ruby-wasm-startup-benchmarkを作った - くりにっき ◦ https://sue445.hatenablog.com/entry/2026/05/31/215753 21
22. ruby.wasmの方が使えるライブラリや メソッドが多い • 下記はPicoRuby.wasmだと使えなかった ◦ cgiライブラリ ◦ Enumerable#flat_map ◦ Enumerable#each_with_object ◦ require_relative, Dir.glob, __dir__ などのファイルシステム系 • これらを使いたければ別のメソッドを使うか自作するかruby.wasmを使う 必要がある ◦ __dir__ はPicoRuby.wasmでは使えなかったけど File.expand_path は PicoRuby.wasmでも使えた 22
23. ステマ • このスライドは https://github.com/k1LoW/deck を用いて作成していま す 23