スポンサーブース用の ruby.wasm くじを vibe coding した話

After RubyKaigi 2025 〜Qiita・OPTiM・メドレー〜 (https://increments.connpass.com/event/351891/) での発表資料です

Transcript

1. After RubyKaigi 2025 ~Qiita ・OPTiM ・メドレー~ Tomoya Chiba (@tomoasleep) スポンサーブース用の ruby.wasm くじを vibe coding した話 1
2. Tomoya Chiba Twitter: @nemunemu3desu その他: @tomoasleep Qiita 株式会社 シニアエンジニア pp self 2
4. Thank you for coming to Qiita Booth! 4
5. Thank you for coming to Qiita Booth! 5
6. Thank you for coming to Qiita Booth! 6
7. Qiita のブース出展は2 回目 エンジニア主導でブース設計 コンセプト ユーザーと運営との接点 Qiita の中について知れる アンケートや技術同人誌 (Tech Book) の配布 200 部持って行って完売 今回の Qiita ブース 7
8. が、今日のトピックは… 8
9. が、今日のトピックは… 9
10. 予算の都合上、一部のノベルティが少しだけに… 実物のくじ引きの調達も大変… ruby.wasm で作ればよいのでは？ くじ引きアプリを ruby.wasm で作った 10
16. ruby.wasm 向けの Virtual DOM 実装 同僚の @getty104 が作成 Cline に解説記事を投げ、Vibe Coding ... そんなにサクッと作れるの？ ruby-wasm-vdom と Cline のパワーでサクッと作る 16
17. ruby.wasm 向けの Virtual DOM 実装 同僚の @getty104 が作成 Cline に解説記事を投げ、Vibe Coding ... そんなにサクッと作れるの？ ruby-wasm-vdom と Cline のパワーでサクッと作る 17
28. ruby.wasm と ruby-wasm-vdom のコード例が少なく、LLM 側の理解が浅い 例: ruby.wasm から js コードを呼ぶ方法 例: JS オブジェクトの仕様 エラーメッセージを上手く理解できず、明後日な修正をしがち → 一緒に ruby.wasm を学びながら、デバッグ代行 コード例が少ない技術 × Cline はデバッグが苦手 → ドハマリが発生 28
31. デザインをいい感じにやってくれる Markdown にプロジェクトの情報をまとめれば、後は雑な指示でも OK トータルの制作時間は1 日かからない程度 全部手で作るよりは早い とはいえ… とはいえ、 AI のサポートは助かる 31
32. Cline, GitHub Pages 等で労力少なく作れた ちょっとしたデモも ruby.wasm 絡めたことで話のきっかけになった ( 適度に苦労するので Vibe Coding の題材としては良いかも) ruby.wasm のダウンロード等で時間を食いやすいので、導線設計が重要 ブース側でタブレット用意したりとか ローディング画面とか、訪問用の NFC タグとか用意しても良いかも 今回はテストパイロットなので、来年はもっといろいろ作ってみたい ruby.wasm 使ってみての振り返り 32
33. 今回の実装で ruby-wasm-vdom の不具合を見つけて Issue 報告 & 修正 来年は更に使いやすく！ 余談: 触りながら Contribute 33
34. どんどん OSS に触りながら Contribute Ruby の型にも、個人, Qiita として Contribute していきたい rbs-trace 入れたり 積極的に Steep, Ruby-LSP などを使ったり OSS 作ったり https://github.com/tomoasleep/yard_to_rbs_inline 作ってる 今後の RubyKaigi に向けてのやっていき 34
35. 楽しく Ruby を使って一緒に Qiita を良くしてくれる仲間を募集中！ We are Hiring! 35