Rust + WebAssemblyで広がるWebの未来

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=47 Yosuke Onoue
November 24, 2018
Technology
15
5.7k

Rust + WebAssemblyで広がるWebの未来

FRONTEND CONFERENCE 2018（https://2018.kfug.jp/）の登壇資料です。

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

November 24, 2018
Tweet

More Decks by Yosuke Onoue

See All by Yosuke Onoue
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
1
87
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
23
9.3k
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
4
3.1k
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
0
130
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
0
190
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
2
340
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
1
510
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
2
600
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
9
7.9k

Other Decks in Technology

See All in Technology
25325b405f9ca72c4c8024727c41cb98?s=48 hisayuki
1
270
C58d9fc209cfdc0b822f851911110fa6?s=48 coe
11
4.9k
5af8e5bd2f24e4ea0cee732c6cc259b3?s=48 haruharuharuby
0
300
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
470
88dae28e3d082236f37db2f5c2db339d?s=48 keropiyo
0
110
53e2d354b3299d64a54af680865516d5?s=48 satotakeshi
2
130
F400611942a8b7a695f741f9a720fcf8?s=48 koooootake
8
490
9df0566fad9c9ca3bf669917848878fe?s=48 i35_267
1
110
53850955f15249a1a9dc49df6113e400?s=48 line_developers
2
160
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
140
404b6b310d5fc7680a62ef09a463a794?s=48 yutakakinjyo
0
430
C636093440dd4a8be6416e83cb980979?s=48 iselegant
7
630

Featured

See All Featured
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
37
2.2k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
304
16k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
315
18k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
35k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
70
3.5k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
16k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
68
3.4k
Ba530e786553390f3fb271848485681c?s=48 3n
160
22k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
184
14k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
204
6.7k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k

Transcript

  1. ͓ͷ͏͑ 3VTU 8FC"TTFNCMZͰ޿͕Δ 8FCͷະདྷ '30/5&/%$0/'&3&/$& ೥݄೔

  2. ࣗݾ঺հ w ඌ্༸հ :PTVLF0OPVF  w ೔ຊେֶจཧֶ෦৘ใՊֶՊॿڭ w OHLZPUPΦʔΨφΠβʔ w

    ৘ใՄࢹԽɺ਺ཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ࢖༻

  3. લճ·Ͱͷ͋Β͢͡

  4. 2015/08/22 グランフロントエンド asm.jsとWebAssemblyって実際なんなの？ おのうえ (@_likr) !4

  5. フリーランチの終焉 ✤ フロントエンド開発への要求は⾼まる ✤ ハードウェア、JSエンジンの性能向上の恩恵を知らな いうちに受けていた時代は終わるかもしれない？ ✤ フロントエンドエンジニア(JSプログラマ)が
 JavaScriptプログラムの速度に負う責任が増す !5

  6. まとめ ✤ asm.jsを効果的に使えば、これまでWebでできなかっ た種類のアプリケーションが実現できる ✤ WebAssemblyによる順当な進化に期待 ✤ なんでも速くなる魔法ではないので、
 ⽤法⽤量を守って正しくお使いください !6

  7. プログラミング⾔言語Rust おのうえ@_likr Grand Frontend Osaka 2016 2016年年8⽉月27⽇日

  8. まとめ • Rustはいいぞ • WebAssemblyの実装は着実に進んでいる • RustでWebの部品を作れる未来はそう遠くない（かも • 未来に備えよう •

    たまにはWebの未来を考えてみるのはいかが？

  9. ͦͯͦ͠ͷޙ

  10. IUUQTXFCBTTFNCMZPSH

  11. IUUQTXFCBTTFNCMZPSH 8FC"TTFNCMZIBTTIJQQFE JONBKPSCSPXTFSFOHJOFT ೥݄

  12. 8FC"TTFNCMZʢXBTNʣʁ w 8FCϒϥ΢β্Ͱಈ࡞͢ΔόΠφϦϑΥʔϚοτݴޠ w ଞݴޠ͔ΒίϯύΠϧͯ͠ੜ੒͢Δͷ͕Ұൠత w $$ ɺ3VTUɺ(Pɺ"TTFNCMZ4DSJQUɺʜ
 IUUQTHJUIVCDPNBQQDZQIFSBXFTPNFXBTNMBOHT w

    ߴੑೳͰল༰ྔ w 4*.%ɺϚϧνεϨου wωΠςΟϒॲཧͱ8FCͷΪϟοϓΛຒΊΔ

  13. &NTDSJQUFO w IUUQFNTDSJQUFOPSH w $$ UPBTNKT8FC"TTFNCMZίϯύΠϥ w .P[JMMB͕த৺Ͱ։ൃ w --7.ϕʔε

    w MJCDɺMJCD ʢ Ћʣͷޓ׵ϨΠϠʔ w ϑΝΠϧγεςϜɺ$(ɺήʔϜΤϯδϯɺFUD

  14. (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

  15. $$ ʁ w ϝϦοτ w ߴ଎ w ௿ϨΠϠʔͷૢ࡞ w աڈͷࢿ࢈ͷ׆༻

    w σϝϦοτ w ҆શੑ w पลπʔϧͷෆࡏ #FUUFS$ ͱͯ͠ͷ3VTU

  16. 3VTUʹΑΔ8FC"TTFNCMZͷग़ྗ w XBTNVOLOPXOFNTDSJQUFO w &NTDSJQUFOΛܦ༝ w &NTDSJQUFOͷϥϯλΠϜΛར༻Ͱ͖Δ w +BWB4DSJQU΍ϒϥ΢β"1*ͱͷ࿈ܞ wXBTNVOLOPXOVOLOPXO

    w ϥϯλΠϜͳ͠ʢܰྔ͕ͩ࠷খݶͷػೳ͚ͩʣ

  17. 4FUVQ $ curl https://sh.rustup.rs -sSf | sh $ source ~/.cargo/env

    $ rustup default nightly $ rustup target add wasm32-unknown-unknown

  18. Ϗϧυ $ 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

  19. ࣮ߦ 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

  20. 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 })

  21. XBTNCJOEHFO w IUUQTSVTUXBTNHJUIVCJPXBTNCJOEHFO w 3VTUΦϒδΣΫτͱ+BWB4DSJQUΦϒδΣΫτͷ
 ૬ޓม׵ϨΠϠʔΛఆٛͯࣗ͠ಈੜ੒ w KTTZTɺXFCTZTʹΑΔ+BWB4DSJQUɺϒϥ΢β"1*ͷૢ࡞ w &NTDSJQUFOෆཁ

    w XFCQBDLͰྑ͍ײ͡ʹಡΈࠐΈՄೳ DBSHPJOTUBMMXBTNCJOEHFODMJ

  22. Ϗϧυ 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

  23. ࣮ߦ 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

  24. ଞʹͰ͖Δ͜ͱ 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 }

  25. +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 })

  26. XBTNQBDL w IUUQTSVTUXBTNHJUIVCJPXBTNQBDL w DBSHP΁ͷUBSHFU௥ՃɺϏϧυͷ࣮ߦɺOQNύοέʔ δͷੜ੒ɺ഑෍·ͰΛࣗಈԽ DBSHPJOTUBMMXBTNQBDL XBTNQBDLCVJME XBTNQBDLQVCMJTI

  27. ࢖ͬͯΈͨ

  28. ωοτϫʔΫՄࢹԽʹ͓͚Δར༻ w ωοτϫʔΫՄࢹԽʹ൐͏ܭࢉॲཧΛ8FC"TTFNCMZԽ
 ‎%KTͷ໿ഒͷੑೳΛୡ੒ w େن໛ͳωοτϫʔΫͷՄࢹԽ΋8FCͰ࣮ݱʂ IUUQTFHSBQIMJLSMBCDPNHSPVQJOBCPY

  29. "OHVMBS*POJDͱ࢖͏

  30. "OHVMBS *POJDͰͷϚϯσϧϒϩू߹ͷඳը IUUQTJPOJDXBTNNBOEFMCSPUMJLSMBCDPN

  31. 8FC"TTFNCMZͷࠓޙ

  32. 8FC"TTFNCMZͷࠓޙ w 1PTU.71'FBUVSFT w 5ISFBET w 4*.% w (BSCBHF$PMMFDUPS*OUFHSBUJPO w

    FUD w πʔϧαϙʔτͷॆ࣮ w TPVSDFNBQQJOH

  33. 8FCͷύϑΥʔϚϯεΛ௥ٻ͢Δҙຯ ཁٻύϑΥʔϚϯε ԸܙΛड͚ΔϢʔβʔͷ਺ ωΠςΟϒ
 σεΫτοϓΞϓϦ ͕Ͱ͖Δ͜ͱ ίϯϐϡʔλͷੑೳ޲্
 ˍཧ࿦ͷൃల 8FC͕Ͱ͖Δ͜ͱ -B[Z-PBEJOHɺ

    ΦϑεϨουॲཧ ".1ɺ18" 8FC"TTFNCMZɺ ฒྻॲཧ ύϑΥʔϚϯεͷ௥ٻ͕
 8FCͷՄೳੑΛ޿͛Δ

  34. ·ͱΊ w ීٴஈ֊ʹਐΉ8FC"TTFNCMZ w 3VTUͰ҆શ͔ͭߴ଎ͳ8FC։ൃΛ͢Δ࣌୅ͷ౸དྷ w ύϑΥʔϚϯε͕8FCͷՄೳੑΛ޿͛Δʂ w ศརͳपลπʔϧΛੋඇνΣοΫʂ w

    IUUQTSVTUXBTNHJUIVCJPXBTNCJOEHFO w IUUQTSVTUXBTNHJUIVCJPXBTNQBDL