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

FukuokaJS@Mar 15th 2019でお話しした資料「なぜTypeScriptでつくるWebAssemblyなのか」です

Transcript

1. FukuokaJS #8 -TypeScript- TS ͳͥTypeScriptͰͭ͘ΔWebAssemblyͳͷ͔ Tomohisa Oda — GMO Pepabo, Inc. / Mar 15th 2019
2. FukuokaJS #8 -TypeScript- linyows / Tomohisa Oda GMO Pepabo, Inc.: Principal Engineer Blog: https://tomohisaoda.com 2
3. FukuokaJS #8 -TypeScript- 3 Private Projects https://github.com/linyows ΞϓϦέʔγϣϯࣗ਎͕ϦϙδτϦ͔Β࠷৽ͷίʔυΛݕ ஌ͯࣗ͠ಈͰσϓϩΠͱσϦόϦʔΛߦ͏πʔϧ linuxͷuser໊લղܾΛGitHubͷTeamϝϯόʔ΍Ϧϙδτ ϦͷΞΫηεݖݶऀ͔Βߦ͏πʔϧ
4. FukuokaJS #8 -TypeScript- Fukuoka.go Organizer 4 https://fukuokago.dev/ ͜ͷՆʢʣʹ
   FGNͰ
   Go ConferenceΛ෱ԬͰ։࠵
   https://fukuoka.gocon.jp/
5. FukuokaJS #8 -TypeScript- WebAssembly ࢖͍ͬͯ·͔͢ʁ 5
6. FukuokaJS #8 -TypeScript- ͦ͏͍·ͤΜΑͶʁ
   ๻͸·ͩͰ͢ʜ! 6
7. 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
8. FukuokaJS #8 -TypeScript- WebAssembry͕΋ͨΒ͢΋ͷ w ωΠςΟϒਫ४ͳͷͰߴ଎͔ͭߴޮ཰ͷ࣮ݱ
   w Ծ૝ϚγϯʹΑΓϙʔλϏϦςΟͷߴ͍҆ఆͨ͠ύϑΥʔϚϯεͷ࣮ݱ
   w ςΩετϑΥʔϚοτͰՄಡੑΛ΋ͪσόοάՄೳ
   w αϯυϘοΫε؀ڥͱTBNFPSJHJO
   QPMJDZʹΑΓ҆શͰ͋Δ 8
9. 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
10. FukuokaJS #8 -TypeScript- .wasmΛͭ͘Δํ๏ w 5FYUʢXBUʣʢͪΐͬͱਏ͘ແ͍͔ͳʣ
    w $$
    
    &NTDSJQUFO
    ʢϝϞϦ؅ཧʹࣗ৴͕͋Γ·ͤΜʣ
    w 3VTU
    PS
    (Pʢݱ࣮తͰͱͯ΋༗ྗʣ
    w 5ZQF4DSJQU
    
    "TTFNCMZ4DSJQUʢ"TTFNCMZ4DSJQUͬͯԿͰ͔͢ʁʣ 10
11. 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
12. FukuokaJS #8 -TypeScript- ԿͰWebAssemblyΛ࡞Ε͹͍͍Μ΍ʁ 12
13. FukuokaJS #8 -TypeScript- WebAssemblyͷ໨ඪͷ̍ͭ w ΢ΣϒΛഁյ͠ͳ͍ࣄ
    Š
    WebAssembly
    ͸ଞͷ΢Σϒٕज़ͱڠௐ͠ɺޙ ํޓ׵ੑΛҡ࣋͢ΔΑ͏ʹઃܭ͞Ε·͢ɻ
    https://developer.mozilla.org/ja/docs/WebAssembly/Concepts WebAssemly͸ɺଞͷϒϥ΢βϓϥάΠϯʢJava Applet΍Flashʣͱҧͬͯ ඳը͕Ͱ͖ͳ͍ͨΊɺJavaScriptͱڞଘ͠ͳ͚Ε͹ͳΒͳ͍ɻ 13
14. FukuokaJS #8 -TypeScript- ͦ͏ɺJavaScript͕ඞཁͳͷʂ☺
    ʢϒϥ΢βલఏͰEdgeίϯςφܥ͸আ͘ʣ 14
15. FukuokaJS #8 -TypeScript- TypeScript
    
    AssemblyScriptͱ͍͏બ୒ w ผݴޠΛशಘ͠ͳͯ͘ྑ͍ʢTSΛशಘ͢Δඞཁ͕͋Γ·͕͢ʣ
    w ݺͼग़͠ͱ࣮ߦΛಉ͡ݴޠͰ؅ཧͰ͖Δͱ؅ཧ͠΍͍͢
    w ·ͨɺύϑΥʔϚϯεΛߴΊ͍ͨͱ͖ʹ؆୯ʹ੾Γग़͢͜ͱ͕Ͱ͖Δ
    w AssemblyScriptͷ࡞ͬͨwasm͸αΠζ͕খ͍͞
    w ύϑΥʔϚϯε͸CʹྼΔ͕RustʹྼΒͳ͍ 15
16. FukuokaJS #8 -TypeScript- 16 Ұ෦ͷϒϥ΢βͷJavaScriptͰύϑΥʔϚϯε͕ྼԽ͢Δ՝୊ΛWASMͰղܾ͢Δ࿩ʹग़ͯ͘Δൺֱ
    https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
17. FukuokaJS #8 -TypeScript- AssemblyScriptͷDemoΛಈ͔͢
    https://github.com/AssemblyScript/assemblyscript/tree/master/examples 17
18. FukuokaJS #8 -TypeScript- ·ͱΊ w WebAssembly͸੍໿Λ࣋ͭ͜ͱͰ҆શੑͱ֦ுੑΛطଘٕज़ͱͷ༥߹Λ࣮ݱ ͍ͯ͠Δ
    w JavaScriptͷύϑΥʔϚϯεվળʹWebAssemblyΛ࢖͏͜ͱͰϒϥ΢βͷ JavaScriptΤϯδϯ࠷దԽΛආ͚Δ͜ͱ͕Ͱ͖Δ
    w TypeScriptͱAssemblyScriptΛ࢖͏͜ͱͰWebAssembly΁ͷෑډ͕Լ͕Δ
    w ෑډ͕Լ͕Δ͜ͱͰύϑΥʔϚϯεվળʹόϯόϯWasm࢖͑ͦ͏ 18
19. FukuokaJS #8 -TypeScript- 5ZQF4DSJQUͷίϛϡχςΟ'VLVPLBUTΛͭ͘Γ·ͨ͠ w ͍ۙ͏ͪʹษڧձΛ։࠵͠·͢
    w 5ZQF4DSJQUʹಛԽͨ͠ίϛϡχςΟͳͷͰ5ZQF4DSJQUͷઆ໌΍ϝϦοτΛ ޠΔඞཁ͸͋Γ·ͤΜ
    w 5ZQF4DSJQUΛ࢖ͬͨߴ౓ͳ࣮૷ͷ࿩΍8FC"TTFNCMZͷ࿩ΛؾܰʹͰ͖Δ৔ Λͭ͘Γ·͢
    w ڵຯ͕͋Δਓ͸ɺ'VLVPLBUTͷ4MBDL
    5FBNʹ+PJO͍ͯͩ͘͠͞ʂ 19
20. FukuokaJS #8 -TypeScript- 20 4MBDLJOͷ[FJUσϓϩΠࣦഊͯؒ͠ʹ߹Θͳ͔ͬͨɻট଴ϝʔϧΛૹΔ(PPHMF
    'PSNͰ͢ɻ