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
66
スポンサーブース用の 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
110
rbs-inline 生成してみた
tomoasleep
1
300
LiveShare で森羅万象を共同編集する(?)
tomoasleep
1
660
GitHub Actions による RSpec の時間を半分以上短縮した話
tomoasleep
2
1.4k
ts-morph と ast-grep でたくさんの TypeScript コードを書き換えた話
tomoasleep
4
3.9k
render 出来るオブジェクトの作り方
tomoasleep
0
230
Rails アプリを10年以上継続していくためのフロントエンドの底上げ
tomoasleep
3
950
Rails のブラウザテストを Playwright で動かすようにしたらデバッグが簡単になって捗った
tomoasleep
3
3k
Sorbetやっていき(たい)宣言
tomoasleep
0
440
Other Decks in Technology
See All in Technology
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
120
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
170
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
160
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
410
alecthomas/kong はいいぞ
fujiwara3
6
1.4k
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
400
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
430
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
890
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
280
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
We Have a Design System, Now What?
morganepeng
53
7.7k
BBQ
matthewcrist
89
9.8k
Why Our Code Smells
bkeepers
PRO
337
57k
Documentation Writing (for coders)
carmenintech
73
5k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building Applications with DynamoDB
mza
95
6.5k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Speed Design
sergeychernyshev
32
1.1k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Thoughts on Productivity
jonyablonski
69
4.8k
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