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
110
スポンサーブース用の 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
140
rbs-inline 生成してみた
tomoasleep
1
330
LiveShare で森羅万象を共同編集する(?)
tomoasleep
1
720
GitHub Actions による RSpec の時間を半分以上短縮した話
tomoasleep
2
1.5k
ts-morph と ast-grep でたくさんの TypeScript コードを書き換えた話
tomoasleep
4
4k
render 出来るオブジェクトの作り方
tomoasleep
0
250
Rails アプリを10年以上継続していくためのフロントエンドの底上げ
tomoasleep
3
1k
Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になって捗った
tomoasleep
4
3.1k
Sorbetやっていき(たい)宣言
tomoasleep
0
450
Other Decks in Technology
See All in Technology
Observability — Extending Into Incident Response
nari_ex
1
540
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
150
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
猫でもわかるAmazon Q Developer CLI 解体新書
kentapapa
1
100
知覚とデザイン
rinchoku
1
610
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
130
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
1k
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
Building a cloud native business on open source
lizrice
0
190
OPENLOGI Company Profile for engineer
hr01
1
45k
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
290
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Building Adaptive Systems
keathley
44
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Code Reviewing Like a Champion
maltzj
526
40k
Music & Morning Musume
bryan
46
6.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
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