なぜTypeScriptでつくるWebAssemblyなのか / Why using TypeScript for WebAssembly

by https://speakerdeck.com/linyows

Slide 1

Slide 1 text

FukuokaJS #8 -TypeScript- TS ͳͥTypeScriptͰͭ͘ΔWebAssemblyͳͷ͔ Tomohisa Oda — GMO Pepabo, Inc. / Mar 15th 2019

Slide 2

Slide 2 text

FukuokaJS #8 -TypeScript- linyows / Tomohisa Oda GMO Pepabo, Inc.: Principal Engineer Blog: https://tomohisaoda.com 2

Slide 3

Slide 3 text

FukuokaJS #8 -TypeScript- 3 Private Projects https://github.com/linyows ΞϓϦέʔγϣϯࣗ਎͕ϦϙδτϦ͔Β࠷৽ͷίʔυΛݕ ஌ͯࣗ͠ಈͰσϓϩΠͱσϦόϦʔΛߦ͏πʔϧ linuxͷuser໊લղܾΛGitHubͷTeamϝϯόʔ΍Ϧϙδτ ϦͷΞΫηεݖݶऀ͔Βߦ͏πʔϧ

Slide 4

Slide 4 text

FukuokaJS #8 -TypeScript- Fukuoka.go Organizer 4 https://fukuokago.dev/ ͜ͷՆʢʣʹFGNͰ Go ConferenceΛ෱ԬͰ։࠵ https://fukuoka.gocon.jp/

Slide 5

Slide 5 text

FukuokaJS #8 -TypeScript- WebAssembly ࢖͍ͬͯ·͔͢ʁ 5

Slide 6

Slide 6 text

FukuokaJS #8 -TypeScript- ͦ͏͍·ͤΜΑͶʁ๻͸·ͩͰ͢ʜ! 6

Slide 7

Slide 7 text

FukuokaJS #8 -TypeScript- lWebAssembly͸ɺελοΫϕʔεͷԾ૝Ϛγϯ༻ͷόΠφϦ໋ྩ ϑΥʔϚοτͰ͢ɻWasm͸ɺC/C++/RustͷΑ͏ͳߴڃݴޠͷί ϯύΠϧͷͨΊͷҠ২ੑͷ͋Δλʔήοτͱͯ͠ઃܭ͞Ε͓ͯΓɺ ΫϥΠΞϯτ͓ΑͼαʔόʔΞϓϦέʔγϣϯͷͨΊͷWeb্Ͱͷ ల։ΛՄೳʹ͠·͢ɻz h t t p s : / / w e b a s s e m b l y. o r g / 7

Slide 8

Slide 8 text

FukuokaJS #8 -TypeScript- WebAssembry͕΋ͨΒ͢΋ͷ w ωΠςΟϒਫ४ͳͷͰߴ଎͔ͭߴޮ཰ͷ࣮ݱ w Ծ૝ϚγϯʹΑΓϙʔλϏϦςΟͷߴ͍҆ఆͨ͠ύϑΥʔϚϯεͷ࣮ݱ w ςΩετϑΥʔϚοτͰՄಡੑΛ΋ͪσόοάՄೳ w αϯυϘοΫε؀ڥͱTBNFPSJHJOQPMJDZʹΑΓ҆શͰ͋Δ 8

Slide 9

Slide 9 text

FukuokaJS #8 -TypeScript- 9 add.wat sample.js add.wasm # ΞηϯϒϦʹม׵ $ wast2wasm add.wat -o add.wasm # ΞηϯϒϦΛग़ྗ $ wast2wasm add.wat -v # ςΩετʹม׵ $ wasm2wast add.wasm -o add.wat

Slide 10

Slide 10 text

FukuokaJS #8 -TypeScript- .wasmΛͭ͘Δํ๏ w 5FYUʢXBUʣʢͪΐͬͱਏ͘ແ͍͔ͳʣ w $$&NTDSJQUFOʢϝϞϦ؅ཧʹࣗ৴͕͋Γ·ͤΜʣ w 3VTUPS(Pʢݱ࣮తͰͱͯ΋༗ྗʣ w 5ZQF4DSJQU"TTFNCMZ4DSJQUʢ"TTFNCMZ4DSJQUͬͯԿͰ͔͢ʁʣ 10

Slide 11

Slide 11 text

FukuokaJS #8 -TypeScript- https://github.com/AssemblyScript/assemblyscript “AssemblyScript compiles strictly typed TypeScript (basically JavaScript with types) to WebAssembly using Binaryen. It generates lean and mean WebAssembly modules while being just an npm install away.” 11

Slide 12

Slide 12 text

FukuokaJS #8 -TypeScript- ԿͰWebAssemblyΛ࡞Ε͹͍͍Μ΍ʁ 12

Slide 13

Slide 13 text

FukuokaJS #8 -TypeScript- WebAssemblyͷ໨ඪͷ̍ͭ w ΢ΣϒΛഁյ͠ͳ͍ࣄWebAssembly͸ଞͷ΢Σϒٕज़ͱڠௐ͠ɺޙ ํޓ׵ੑΛҡ࣋͢ΔΑ͏ʹઃܭ͞Ε·͢ɻ https://developer.mozilla.org/ja/docs/WebAssembly/Concepts WebAssemly͸ɺଞͷϒϥ΢βϓϥάΠϯʢJava Applet΍Flashʣͱҧͬͯ ඳը͕Ͱ͖ͳ͍ͨΊɺJavaScriptͱڞଘ͠ͳ͚Ε͹ͳΒͳ͍ɻ 13

Slide 14

Slide 14 text

FukuokaJS #8 -TypeScript- ͦ͏ɺJavaScript͕ඞཁͳͷʂ☺ ʢϒϥ΢βલఏͰEdgeίϯςφܥ͸আ͘ʣ 14

Slide 15

Slide 15 text

FukuokaJS #8 -TypeScript- TypeScriptAssemblyScriptͱ͍͏બ୒ w ผݴޠΛशಘ͠ͳͯ͘ྑ͍ʢTSΛशಘ͢Δඞཁ͕͋Γ·͕͢ʣ w ݺͼग़͠ͱ࣮ߦΛಉ͡ݴޠͰ؅ཧͰ͖Δͱ؅ཧ͠΍͍͢ w ·ͨɺύϑΥʔϚϯεΛߴΊ͍ͨͱ͖ʹ؆୯ʹ੾Γग़͢͜ͱ͕Ͱ͖Δ w AssemblyScriptͷ࡞ͬͨwasm͸αΠζ͕খ͍͞ w ύϑΥʔϚϯε͸CʹྼΔ͕RustʹྼΒͳ͍ 15

Slide 16

Slide 16 text

FukuokaJS #8 -TypeScript- 16 Ұ෦ͷϒϥ΢βͷJavaScriptͰύϑΥʔϚϯε͕ྼԽ͢Δ՝୊ΛWASMͰղܾ͢Δ࿩ʹग़ͯ͘Δൺֱ https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

Slide 17

Slide 17 text

FukuokaJS #8 -TypeScript- AssemblyScriptͷDemoΛಈ͔͢ https://github.com/AssemblyScript/assemblyscript/tree/master/examples 17

Slide 18

Slide 18 text

FukuokaJS #8 -TypeScript- ·ͱΊ w WebAssembly͸੍໿Λ࣋ͭ͜ͱͰ҆શੑͱ֦ுੑΛطଘٕज़ͱͷ༥߹Λ࣮ݱ ͍ͯ͠Δ w JavaScriptͷύϑΥʔϚϯεվળʹWebAssemblyΛ࢖͏͜ͱͰϒϥ΢βͷ JavaScriptΤϯδϯ࠷దԽΛආ͚Δ͜ͱ͕Ͱ͖Δ w TypeScriptͱAssemblyScriptΛ࢖͏͜ͱͰWebAssembly΁ͷෑډ͕Լ͕Δ w ෑډ͕Լ͕Δ͜ͱͰύϑΥʔϚϯεվળʹόϯόϯWasm࢖͑ͦ͏ 18

Slide 19

Slide 19 text

FukuokaJS #8 -TypeScript- 5ZQF4DSJQUͷίϛϡχςΟ'VLVPLBUTΛͭ͘Γ·ͨ͠ w ͍ۙ͏ͪʹษڧձΛ։࠵͠·͢ w 5ZQF4DSJQUʹಛԽͨ͠ίϛϡχςΟͳͷͰ5ZQF4DSJQUͷઆ໌΍ϝϦοτΛ ޠΔඞཁ͸͋Γ·ͤΜ w 5ZQF4DSJQUΛ࢖ͬͨߴ౓ͳ࣮૷ͷ࿩΍8FC"TTFNCMZͷ࿩ΛؾܰʹͰ͖Δ৔ Λͭ͘Γ·͢ w ڵຯ͕͋Δਓ͸ɺ'VLVPLBUTͷ4MBDL5FBNʹ+PJO͍ͯͩ͘͠͞ʂ 19

Slide 20

Slide 20 text

FukuokaJS #8 -TypeScript- 20 4MBDLJOͷ[FJUσϓϩΠࣦഊͯؒ͠ʹ߹Θͳ͔ͬͨɻট଴ϝʔϧΛૹΔ(PPHMF'PSNͰ͢ɻ