Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Rust + WebAssemblyで広がるWebの未来
Yosuke Onoue
November 24, 2018
Technology
15
5.8k
Rust + WebAssemblyで広がるWebの未来
FRONTEND CONFERENCE 2018(
https://2018.kfug.jp/)の登壇資料です
。
Yosuke Onoue
November 24, 2018
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
likr
2
320
likr
1
320
likr
1
93
likr
23
9.6k
likr
4
3.4k
likr
0
150
likr
0
210
likr
2
360
likr
1
560
Other Decks in Technology
See All in Technology
kanaugust
PRO
0
160
ks91
PRO
0
150
ishiayaya
PRO
0
170
leaner_tech
0
1.3k
kahara33
0
120
gamella
3
1.5k
shoichiron
1
160
nitya
0
330
armaniacs
0
330
free_world21
0
110
yuji1484
3
900
kaori_cho
1
260
Featured
See All Featured
morganepeng
18
1.2k
ufuk
56
5.4k
lauravandoore
10
1.6k
jrom
116
7.2k
pauljervisheath
195
15k
destraynor
222
47k
gr2m
83
11k
mojombo
359
62k
lynnandtonic
272
16k
chriscoyier
779
240k
iamctodd
19
2k
jeffersonlam
329
15k
Transcript
͓ͷ͏͑ 3VTU 8FC"TTFNCMZͰ͕Δ 8FCͷະདྷ '30/5&/%$0/'&3&/$& ݄
ࣗݾհ w ඌ্༸հ :PTVLF0OPVF w ຊେֶจཧֶ෦ใՊֶՊॿڭ w OHLZPUPΦʔΨφΠβʔ w
ใՄࢹԽɺཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ༻
લճ·Ͱͷ͋Β͢͡
2015/08/22 グランフロントエンド asm.jsとWebAssemblyって実際なんなの? おのうえ (@_likr) !4
フリーランチの終焉 ✤ フロントエンド開発への要求は⾼まる ✤ ハードウェア、JSエンジンの性能向上の恩恵を知らな いうちに受けていた時代は終わるかもしれない? ✤ フロントエンドエンジニア(JSプログラマ)が JavaScriptプログラムの速度に負う責任が増す !5
まとめ ✤ asm.jsを効果的に使えば、これまでWebでできなかっ た種類のアプリケーションが実現できる ✤ WebAssemblyによる順当な進化に期待 ✤ なんでも速くなる魔法ではないので、 ⽤法⽤量を守って正しくお使いください !6
プログラミング⾔言語Rust おのうえ@_likr Grand Frontend Osaka 2016 2016年年8⽉月27⽇日
まとめ • Rustはいいぞ • WebAssemblyの実装は着実に進んでいる • RustでWebの部品を作れる未来はそう遠くない(かも • 未来に備えよう •
たまにはWebの未来を考えてみるのはいかが?
ͦͯͦ͠ͷޙ
IUUQTXFCBTTFNCMZPSH
IUUQTXFCBTTFNCMZPSH 8FC"TTFNCMZIBTTIJQQFE JONBKPSCSPXTFSFOHJOFT ݄
8FC"TTFNCMZʢXBTNʣʁ w 8FCϒϥβ্Ͱಈ࡞͢ΔόΠφϦϑΥʔϚοτݴޠ w ଞݴޠ͔ΒίϯύΠϧͯ͠ੜ͢Δͷ͕Ұൠత w $$ ɺ3VTUɺ(Pɺ"TTFNCMZ4DSJQUɺʜ IUUQTHJUIVCDPNBQQDZQIFSBXFTPNFXBTNMBOHT w
ߴੑೳͰল༰ྔ w 4*.%ɺϚϧνεϨου wωΠςΟϒॲཧͱ8FCͷΪϟοϓΛຒΊΔ
&NTDSJQUFO w IUUQFNTDSJQUFOPSH w $$ UPBTNKT8FC"TTFNCMZίϯύΠϥ w .P[JMMB͕த৺Ͱ։ൃ w --7.ϕʔε
w MJCDɺMJCD ʢ ЋʣͷޓϨΠϠʔ w ϑΝΠϧγεςϜɺ$(ɺήʔϜΤϯδϯɺFUD
(FUUJOH4UBSUFEXJUI&NTDSJQUFO $ emcc -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' \ -s EXPORTED_FUNCTIONS='["_twice"]' \
-s MODULARIZE=1 -s -o example.js example.c $ node main.js 4.4 1 double twice(double value) { 2 return value * 2; 3 } FYBNQMFD 1 const wasm = require('./example') 2 3 wasm().then((Module) => { 4 const twice = Module.cwrap('twice', 'number', ['number']) 5 console.log(twice(2.2)) 6 }) NBJOKT
$$ ʁ w ϝϦοτ w ߴ w ϨΠϠʔͷૢ࡞ w աڈͷࢿ࢈ͷ׆༻
w σϝϦοτ w ҆શੑ w पลπʔϧͷෆࡏ #FUUFS$ ͱͯ͠ͷ3VTU
3VTUʹΑΔ8FC"TTFNCMZͷग़ྗ w XBTNVOLOPXOFNTDSJQUFO w &NTDSJQUFOΛܦ༝ w &NTDSJQUFOͷϥϯλΠϜΛར༻Ͱ͖Δ w +BWB4DSJQUϒϥβ"1*ͱͷ࿈ܞ wXBTNVOLOPXOVOLOPXO
w ϥϯλΠϜͳ͠ʢܰྔ͕ͩ࠷খݶͷػೳ͚ͩʣ
4FUVQ $ curl https://sh.rustup.rs -sSf | sh $ source ~/.cargo/env
$ rustup default nightly $ rustup target add wasm32-unknown-unknown
Ϗϧυ $ cargo new --lib example $ cd example $
cargo build --target wasm32-unknown-unknown 1 [package] 2 name = "example" 3 version = "0.1.0" 4 authors = ["Yosuke Onoue <onoue@likr-lab.com>"] 5 6 [dependencies] 7 8 [lib] 9 crate-type = ["cdylib"] $BSHPUPNM 1 #[no_mangle] 2 pub fn twice(value: f64) -> f64 { 3 value * 2.0 4 } TSDMJCST
࣮ߦ 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta
charset="utf-8"/> 5 <title>Rust + WebAssembly Example</title> 6 </head> 7 <body> 8 <script> 9 fetch('./target/wasm32-unknown-unknown/debug/example.wasm') 10 .then((response) => response.arrayBuffer()) 11 .then((buffer) => WebAssembly.instantiate(buffer)) 12 .then(({ instance }) => { 13 const { twice } = instance.exports 14 console.log(twice(2.2)) 15 }) 16 </script> 17 </body> 18 </html> JOEFYIUNM
8FC"TTFNCMZ+4"1* w XBTNϑΝΠϧΛಡΈࠐΜͰ8FC"TTFNCMZJOTUBOUJBUF ʹ͢ w "SSBZ#V⒎FSΛ௨ͨ͡ϨΠϠʔͳૢ࡞ w /VNCFSʢɺϙΠϯλʣɺ5ZQFE"SSBZΛ ѻ͏ؔͷݺͼग़͠ͷΈ 9
fetch('./target/wasm32-unknown-unknown/debug/example.wasm') 10 .then((response) => response.arrayBuffer()) 11 .then((buffer) => WebAssembly.instantiate(buffer)) 12 .then(({ instance }) => { 13 const { twice } = instance.exports 14 console.log(twice(2.2)) 15 })
XBTNCJOEHFO w IUUQTSVTUXBTNHJUIVCJPXBTNCJOEHFO w 3VTUΦϒδΣΫτͱ+BWB4DSJQUΦϒδΣΫτͷ ૬ޓมϨΠϠʔΛఆٛͯࣗ͠ಈੜ w KTTZTɺXFCTZTʹΑΔ+BWB4DSJQUɺϒϥβ"1*ͷૢ࡞ w &NTDSJQUFOෆཁ
w XFCQBDLͰྑ͍ײ͡ʹಡΈࠐΈՄೳ DBSHPJOTUBMMXBTNCJOEHFODMJ
Ϗϧυ 1 extern crate wasm_bindgen; 2 3 use wasm_bindgen::prelude::*; 4
5 #[wasm_bindgen] 6 pub fn twice(value: f64) -> f64 { 7 value * 2.0 8 } TSDMJCST 1 [package] 2 name = "bindgen-example" 3 version = "0.1.0" 4 authors = ["Yosuke Onoue <onoue@likr-lab.com>"] 5 edition = "2018" 6 7 [dependencies] 8 wasm-bindgen = "0.2" 9 10 [lib] 11 crate-type = ["cdylib"] $BSHPUPNM $ wasm-bindgen --out-dir . target/wasm32-unknown-unknown/debug/bindgen_example.wasm
࣮ߦ 1 import('./bindgen_example').then(({ twice }) => { 2 console.log(twice(2.2)) 3
}) JOEFYKT 1 const path = require('path') 2 3 module.exports = { 4 entry: './index.js', 5 output: { 6 path: path.resolve(__dirname), 7 filename: 'bundle.js' 8 } 9 } XFCQBDLDPOpHKT 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>wasm-bindgen Example</title> 6 </head> 7 <body> 8 <script src="bundle.js"></script> 9 </body> 10 </html> JOEFYIUNM
ଞʹͰ͖Δ͜ͱ 15 #[wasm_bindgen] 16 pub struct Screen { 17 bytes:
Vec<u8>, 18 #[wasm_bindgen(readonly)] 19 pub width: usize, 20 #[wasm_bindgen(readonly)] 21 pub height: usize, 22 } 23 24 #[wasm_bindgen] 25 impl Screen { 26 #[wasm_bindgen(constructor)] 27 pub fn new(width: usize, height: usize) -> Screen { 28 Screen { 29 bytes: create_buffer(width, height), 30 width, 31 height, 32 } 33 } 34 42 43 pub fn resize(&mut self, width: usize, height: usize) { 44 self.bytes = create_buffer(width, height); 45 self.width = width; 46 self.height = height; 47 } 48 }
+BWB4DSJQUΫϥεͷੜ w 3VTUͷߏମɺUSBJU͔Β+BWB4DSJQUΫϥεΛੜ 1 const mod = import('mandelbrot') 2 const
bg = import('mandelbrot/mandelbrot_bg') 3 Promise.all([mod, bg]).then(([{ mandelbrot, Screen }, { memory }]) => { 4 const canvas = this.display.nativeElement; 5 const screen = new Screen(canvas.width, canvas.height); 6 7 const bytes = new Uint8ClampedArray(memory.buffer, screen.pointer(), screen.size()); 8 const image = new ImageData(bytes, screen.width, screen.height); 9 mandelbrot(screen, -3, -2, 0.01, 100); 10 11 const ctx = canvas.getContext('2d'); 12 ctx.putImageData(image, 0, 0); 13 })
XBTNQBDL w IUUQTSVTUXBTNHJUIVCJPXBTNQBDL w DBSHPͷUBSHFUՃɺϏϧυͷ࣮ߦɺOQNύοέʔ δͷੜɺ·ͰΛࣗಈԽ DBSHPJOTUBMMXBTNQBDL XBTNQBDLCVJME XBTNQBDLQVCMJTI
ͬͯΈͨ
ωοτϫʔΫՄࢹԽʹ͓͚Δར༻ w ωοτϫʔΫՄࢹԽʹ͏ܭࢉॲཧΛ8FC"TTFNCMZԽ %KTͷഒͷੑೳΛୡ w େنͳωοτϫʔΫͷՄࢹԽ8FCͰ࣮ݱʂ IUUQTFHSBQIMJLSMBCDPNHSPVQJOBCPY
"OHVMBS*POJDͱ͏
"OHVMBS *POJDͰͷϚϯσϧϒϩू߹ͷඳը IUUQTJPOJDXBTNNBOEFMCSPUMJLSMBCDPN
8FC"TTFNCMZͷࠓޙ
8FC"TTFNCMZͷࠓޙ w 1PTU.71'FBUVSFT w 5ISFBET w 4*.% w (BSCBHF$PMMFDUPS*OUFHSBUJPO w
FUD w πʔϧαϙʔτͷॆ࣮ w TPVSDFNBQQJOH
8FCͷύϑΥʔϚϯεΛٻ͢Δҙຯ ཁٻύϑΥʔϚϯε ԸܙΛड͚ΔϢʔβʔͷ ωΠςΟϒ σεΫτοϓΞϓϦ ͕Ͱ͖Δ͜ͱ ίϯϐϡʔλͷੑೳ্ ˍཧͷൃల 8FC͕Ͱ͖Δ͜ͱ -B[Z-PBEJOHɺ
ΦϑεϨουॲཧ ".1ɺ18" 8FC"TTFNCMZɺ ฒྻॲཧ ύϑΥʔϚϯεͷٻ͕ 8FCͷՄೳੑΛ͛Δ
·ͱΊ w ීٴஈ֊ʹਐΉ8FC"TTFNCMZ w 3VTUͰ҆શ͔ͭߴͳ8FC։ൃΛ͢Δ࣌ͷ౸དྷ w ύϑΥʔϚϯε͕8FCͷՄೳੑΛ͛Δʂ w ศརͳपลπʔϧΛੋඇνΣοΫʂ w
IUUQTSVTUXBTNHJUIVCJPXBTNCJOEHFO w IUUQTSVTUXBTNHJUIVCJPXBTNQBDL