Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
スポンサーブース用の ruby.wasm くじを vibe coding した話
Search
Tomoya Chiba
May 14, 2025
Technology
0
18
スポンサーブース用の ruby.wasm くじを vibe coding した話
After RubyKaigi 2025 〜Qiita・OPTiM・メドレー〜 (
https://increments.connpass.com/event/351891/
) での発表資料です
Tomoya Chiba
May 14, 2025
Tweet
Share
More Decks by Tomoya Chiba
See All by Tomoya Chiba
東京Ruby会議12ヘルパー楽しかった✌
tomoasleep
0
84
rbs-inline 生成してみた
tomoasleep
1
280
LiveShare で森羅万象を共同編集する(?)
tomoasleep
1
610
GitHub Actions による RSpec の時間を半分以上短縮した話
tomoasleep
2
1.3k
ts-morph と ast-grep でたくさんの TypeScript コードを書き換えた話
tomoasleep
4
3.8k
render 出来るオブジェクトの作り方
tomoasleep
0
220
Rails アプリを10年以上継続していくためのフロントエンドの底上げ
tomoasleep
3
920
Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になって捗った
tomoasleep
3
3k
Sorbetやっていき(たい)宣言
tomoasleep
0
430
Other Decks in Technology
See All in Technology
Scale Security Programs with Scorecarding
ramimac
0
390
会社員しながら本を書いてきた知見の共有
sat
PRO
3
680
AIに実況させる / AI Streamer
motemen
3
1.4k
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
17
13k
AIのための オンボーディングドキュメントを整備する - hirotea
hirotea
9
2.2k
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
190
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
460
初めてのGoogle Cloud by AWS出身者
harukasakihara
1
730
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
100
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
24k
ProductZine Day 2025 Assuredのプロダクトディスカバリー
kechol
0
100
それでもぼくらは貢献をつづけるのだ(たぶん) @FOSS4GLT会#002
furukawayasuto
1
260
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
RailsConf 2023
tenderlove
30
1.1k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Into the Great Unknown - MozCon
thekraken
38
1.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Language of Interfaces
destraynor
158
25k
Transcript
After RubyKaigi 2025 ~Qiita ・OPTiM ・メドレー~ Tomoya Chiba (@tomoasleep) スポンサーブース用の
ruby.wasm くじを vibe coding した話 1
Tomoya Chiba Twitter: @nemunemu3desu その他: @tomoasleep Qiita 株式会社 シニアエンジニア pp
self 2
3
Thank you for coming to Qiita Booth! 4
Thank you for coming to Qiita Booth! 5
Thank you for coming to Qiita Booth! 6
Qiita のブース出展は2 回目 エンジニア主導でブース設計 コンセプト ユーザーと運営との接点 Qiita の中について知れる アンケートや技術同人誌 (Tech
Book) の配布 200 部持って行って完売 今回の Qiita ブース 7
が、今日のトピックは… 8
が、今日のトピックは… 9
予算の都合上、一部のノベルティが少しだけに… 実物のくじ引きの調達も大変… ruby.wasm で作ればよいのでは? くじ引きアプリを ruby.wasm で作った 10
11
12
13
14
15
ruby.wasm 向けの Virtual DOM 実装 同僚の @getty104 が作成 Cline に解説記事を投げ、Vibe
Coding ... そんなにサクッと作れるの? ruby-wasm-vdom と Cline のパワーでサクッと作る 16
ruby.wasm 向けの Virtual DOM 実装 同僚の @getty104 が作成 Cline に解説記事を投げ、Vibe
Coding ... そんなにサクッと作れるの? ruby-wasm-vdom と Cline のパワーでサクッと作る 17
18
19
20
21
22
23
24
25
26
27
ruby.wasm と ruby-wasm-vdom のコード例が少なく、LLM 側の理解が浅い 例: ruby.wasm から js コードを呼ぶ方法
例: JS オブジェクトの仕様 エラーメッセージを上手く理解できず、明後日な修正をしがち → 一緒に ruby.wasm を学びながら、デバッグ代行 コード例が少ない技術 × Cline はデバッグが苦手 → ドハマリが発生 28
29
30
デザインをいい感じにやってくれる Markdown にプロジェクトの情報をまとめれば、後は雑な指示でも OK トータルの制作時間は1 日かからない程度 全部手で作るよりは早い とはいえ… とはいえ、 AI
のサポートは助かる 31
Cline, GitHub Pages 等で労力少なく作れた ちょっとしたデモも ruby.wasm 絡めたことで話のきっかけになった ( 適度に苦労するので Vibe
Coding の題材としては良いかも) ruby.wasm のダウンロード等で時間を食いやすいので、導線設計が重要 ブース側でタブレット用意したりとか ローディング画面とか、訪問用の NFC タグとか用意しても良いかも 今回はテストパイロットなので、来年はもっといろいろ作ってみたい ruby.wasm 使ってみての振り返り 32
今回の実装で ruby-wasm-vdom の不具合を見つけて Issue 報告 & 修正 来年は更に使いやすく! 余談: 触りながら
Contribute 33
どんどん OSS に触りながら Contribute Ruby の型にも、個人, Qiita として Contribute していきたい
rbs-trace 入れたり 積極的に Steep, Ruby-LSP などを使ったり OSS 作ったり https://github.com/tomoasleep/yard_to_rbs_inline 作ってる 今後の RubyKaigi に向けてのやっていき 34
楽しく Ruby を使って一緒に Qiita を良くしてくれる仲間を募集中! We are Hiring! 35