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
Rust+WebAssemblyでWebアプリは作れるのか
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Nobuhito Ibaraki
May 22, 2018
Technology
650
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Rust+WebAssemblyでWebアプリは作れるのか
Nobuhito Ibaraki
May 22, 2018
More Decks by Nobuhito Ibaraki
See All by Nobuhito Ibaraki
ノーコード編集と配信パフォーマンスを両立するコンテンツエディタの開発
niba1122
1
400
フロントエンドの動向 From Google I/O 2018
niba1122
0
3.2k
potatotips_48茨木.pdf
niba1122
0
920
Activityの背景をぼかす
niba1122
2
1.5k
Other Decks in Technology
See All in Technology
Bet AI Day 2026丨AIを「使う」から、AIが「働く」へ ― LayerXが進める「組織AI」の社会実装
layerx
PRO
3
2.6k
JAWS-UG初心者支部#88わいわい初心塾(夏休みの宿題やったかGit編)
otsuki
0
150
KPIだけでは評価できないプロダクトが考えるべき Evalsという第二の評価系 / Beyond KPIs: Evals as a Second Evaluation Framework for Products #PdEConf
aki_iinuma
4
3.7k
いかに伝えるか 〜新卒エンジニアの教育のための、ライトノベル活用の一例
ikedon
1
220
KAEN Company Deck
kaen
PRO
0
320
リージョンの壁を越える、 ちょっと変わったAWSサービスの話
falken
PRO
0
260
Benchmarking Vector Databases: pgvector vs. LanceDB
tsho
0
140
AI活用の現在地、 ちゃんと見えてますか?/XPfest-2026
visional_engineering_and_design
0
160
Guerilla InnerSource in enterprises, during the AI hype
onenashev
PRO
0
150
コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする
classmethod_kaz
0
240
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
visional_engineering_and_design
2
1.6k
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
visional_engineering_and_design
1
180
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
210k
HDC tutorial
michielstock
2
850
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
970
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
510
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Site-Speed That Sticks
csswizardry
13
1.5k
Facilitating Awesome Meetings
lara
57
7.1k
Building an army of robots
kneath
306
46k
The agentic SEO stack - context over prompts
schlessera
0
900
Product Roadmaps are Hard
iamctodd
55
13k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
What's in a price? How to price your products and services
michaelherold
247
13k
Transcript
Rust+WebAssemblyで Webアプリは作れるのか Meguro.es #15 Nobuhito Ibaraki @niba1122
Rustとは • Mozilla が開発 • 高速 • 安全 • 2016
年、 2017 年の Stack Overflow Developer Survey で「最も愛されて いるプログラミング言語」 で一位 (Wikipedia)
Rustとは • WebAssembly と連携 ◦ WebAssembly への コンパイルをサポート → emscripten
不要 ◦ cargo web で 簡単にビルドできる (https://github.com/kout e/cargo-web)
これだけじゃないんです
強力なマクロ • パターンマッチングを使いながら 自在に構文を拡張可能 • マクロでテンプレートエンジン を作れたりする! (maud とか )
maud (https://maud.lambda.xyz/) マクロ 言語の機能で JSX のような構文拡張が可能
Client Sideを扱う強力な ライブラリ:stdweb • Rust の中に JavaScript 風のマクロを 記述できる •
JavaScript の API を扱う インターフェース (alert とか query selector とか ) 簡単に DOM やイベントを扱える
JSXのような 構文拡張 DOMの 操作 +
Rust+WebAssemblyの フレームワークを作れるのでは?
世界初かもしれない・・・
そう甘くはなかった • 変数のライフタイムとの戦い ( コールバック実行時に変数の 生存を保証させるのが難しい ) • DOM のレンダリングと状態更新は
なんとか出来た • Component や Virtual DOM までは 実装できなかった rju(龍) (https://github.com/niba1122/rju)
自作フレームワークの実装で 四苦八苦している中・・・
yew https://github.com/DenisKolodin/yew/
yewとは • Elm や ReactJS の影響を受けた Rust フレームワーク ( 名前は
Vue.js に似てる? ) • Virtual DOM による差分更新 • Component • HTML ライクな記法 ( ちょっと癖はある )
Model 状態を持つ構造体 これに Renderable や Component トレイトを実装することで コンポーネントとしてレンダリング できる。
Template
Handle Event API Request Update State
Componentの 呼び出し
サンプルアプリ https://github.com/niba1122/rust_app
まとめ • yew を使えば Rust+WebAssembly でインタラクティブなアプリを作れる! • パフォーマンスもいいらしい https://github.com/DenisKolodin/yew/issues/5#issuecomment-354777076 •
JSer が Rust のライブラリをいきなり作るのはハード
Rust+WebAssemblyは • 型安全 • ビルドツール不要 • ハイパフォーマンス の素敵な世界です。 どなたか一緒にRustを書きましょう!
ご清聴ありがとうございました