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
なぜTypeScriptでつくるWebAssemblyなのか / Why using Type...
Search
linyows
May 15, 2019
Technology
6
2.1k
なぜTypeScriptでつくるWebAssemblyなのか / Why using TypeScript for WebAssembly
FukuokaJS@Mar 15th 2019でお話しした資料「なぜTypeScriptでつくるWebAssemblyなのか」です
linyows
May 15, 2019
Tweet
Share
More Decks by linyows
See All by linyows
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
270
コードジェネレーターで 効率的な開発をする / Efficient development with code generators
linyows
0
280
研究を支える拡張性の高い ワークフローツールの提案 / Proposal of highly expandable workflow tools to support research
linyows
0
400
非コンテナ環境において宣言的Deploymentを手軽に実現する / Declarative deployment in non-container environments
linyows
0
170
メール送信サーバの集約における透過型SMTP プロキシの定量評価 / Quantitative Evaluation of Transparent SMTP Proxy in Email Sending Server Aggregation
linyows
0
890
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
420
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
210
奥が深いメールのシステム / The depth of Email system
linyows
4
570
IaCにおけるテスト考察 / Tests in IaC
linyows
2
660
Other Decks in Technology
See All in Technology
Introduction to Bill One Development Engineer
sansan33
PRO
0
240
[zh-TW] DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!(machine translation)
martin_lover
1
650
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
210
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
180
プロジェクトマネジメント実践論|現役エンジニアが語る!~チームでモノづくりをする時のコツとは?~
mixi_engineers
PRO
3
180
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
220
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
14
2.1k
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
8
930
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
230
Houtou.pm #1
papix
0
670
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Building Adaptive Systems
keathley
41
2.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Practical Orchestrator
shlominoach
188
11k
Unsuck your backbone
ammeep
671
58k
What's in a price? How to price your products and services
michaelherold
245
12k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Music & Morning Musume
bryan
47
6.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
FukuokaJS #8 -TypeScript- TS ͳͥTypeScriptͰͭ͘ΔWebAssemblyͳͷ͔ Tomohisa Oda — GMO Pepabo,
Inc. / Mar 15th 2019
FukuokaJS #8 -TypeScript- linyows / Tomohisa Oda GMO Pepabo, Inc.:
Principal Engineer Blog: https://tomohisaoda.com 2
FukuokaJS #8 -TypeScript- 3 Private Projects https://github.com/linyows ΞϓϦέʔγϣϯ͕ࣗϦϙδτϦ͔Β࠷৽ͷίʔυΛݕ ͯࣗ͠ಈͰσϓϩΠͱσϦόϦʔΛߦ͏πʔϧ linuxͷuser໊લղܾΛGitHubͷTeamϝϯόʔϦϙδτ
ϦͷΞΫηεݖݶऀ͔Βߦ͏πʔϧ
FukuokaJS #8 -TypeScript- Fukuoka.go Organizer 4 https://fukuokago.dev/ ͜ͷՆʢʣʹFGNͰ Go ConferenceΛԬͰ։࠵
https://fukuoka.gocon.jp/
FukuokaJS #8 -TypeScript- WebAssembly ͍ͬͯ·͔͢ʁ 5
FukuokaJS #8 -TypeScript- ͦ͏͍·ͤΜΑͶʁ·ͩͰ͢ʜ! 6
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
FukuokaJS #8 -TypeScript- WebAssembry͕ͨΒ͢ͷ w ωΠςΟϒਫ४ͳͷͰߴ͔ͭߴޮͷ࣮ݱ w ԾϚγϯʹΑΓϙʔλϏϦςΟͷߴ͍҆ఆͨ͠ύϑΥʔϚϯεͷ࣮ݱ w ςΩετϑΥʔϚοτͰՄಡੑΛͪσόοάՄೳ
w αϯυϘοΫεڥͱTBNFPSJHJOQPMJDZʹΑΓ҆શͰ͋Δ 8
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
FukuokaJS #8 -TypeScript- .wasmΛͭ͘Δํ๏ w 5FYUʢXBUʣʢͪΐͬͱਏ͘ແ͍͔ͳʣ w $$ &NTDSJQUFOʢϝϞϦཧʹࣗ৴͕͋Γ·ͤΜʣ
w 3VTUPS(Pʢݱ࣮తͰͱͯ༗ྗʣ w 5ZQF4DSJQU "TTFNCMZ4DSJQUʢ"TTFNCMZ4DSJQUͬͯԿͰ͔͢ʁʣ 10
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
FukuokaJS #8 -TypeScript- ԿͰWebAssemblyΛ࡞Ε͍͍Μʁ 12
FukuokaJS #8 -TypeScript- WebAssemblyͷඪͷ̍ͭ w ΣϒΛഁյ͠ͳ͍ࣄWebAssemblyଞͷΣϒٕज़ͱڠௐ͠ɺޙ ํޓੑΛҡ࣋͢ΔΑ͏ʹઃܭ͞Ε·͢ɻ https://developer.mozilla.org/ja/docs/WebAssembly/Concepts WebAssemlyɺଞͷϒϥβϓϥάΠϯʢJava AppletFlashʣͱҧͬͯ
ඳը͕Ͱ͖ͳ͍ͨΊɺJavaScriptͱڞଘ͠ͳ͚ΕͳΒͳ͍ɻ 13
FukuokaJS #8 -TypeScript- ͦ͏ɺJavaScript͕ඞཁͳͷʂ☺ ʢϒϥβલఏͰEdgeίϯςφܥআ͘ʣ 14
FukuokaJS #8 -TypeScript- TypeScript AssemblyScriptͱ͍͏બ w ผݴޠΛशಘ͠ͳͯ͘ྑ͍ʢTSΛशಘ͢Δඞཁ͕͋Γ·͕͢ʣ w ݺͼग़͠ͱ࣮ߦΛಉ͡ݴޠͰཧͰ͖Δͱཧ͍͢͠ w
·ͨɺύϑΥʔϚϯεΛߴΊ͍ͨͱ͖ʹ؆୯ʹΓग़͢͜ͱ͕Ͱ͖Δ w AssemblyScriptͷ࡞ͬͨwasmαΠζ͕খ͍͞ w ύϑΥʔϚϯεCʹྼΔ͕RustʹྼΒͳ͍ 15
FukuokaJS #8 -TypeScript- 16 Ұ෦ͷϒϥβͷJavaScriptͰύϑΥʔϚϯε͕ྼԽ͢Δ՝ΛWASMͰղܾ͢Δʹग़ͯ͘Δൺֱ https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
FukuokaJS #8 -TypeScript- AssemblyScriptͷDemoΛಈ͔͢ https://github.com/AssemblyScript/assemblyscript/tree/master/examples 17
FukuokaJS #8 -TypeScript- ·ͱΊ w WebAssembly੍Λ࣋ͭ͜ͱͰ҆શੑͱ֦ுੑΛطଘٕज़ͱͷ༥߹Λ࣮ݱ ͍ͯ͠Δ w JavaScriptͷύϑΥʔϚϯεվળʹWebAssemblyΛ͏͜ͱͰϒϥβͷ JavaScriptΤϯδϯ࠷దԽΛආ͚Δ͜ͱ͕Ͱ͖Δ
w TypeScriptͱAssemblyScriptΛ͏͜ͱͰWebAssemblyͷෑډ͕Լ͕Δ w ෑډ͕Լ͕Δ͜ͱͰύϑΥʔϚϯεվળʹόϯόϯWasm͑ͦ͏ 18
FukuokaJS #8 -TypeScript- 5ZQF4DSJQUͷίϛϡχςΟ'VLVPLBUTΛͭ͘Γ·ͨ͠ w ͍ۙ͏ͪʹษڧձΛ։࠵͠·͢ w 5ZQF4DSJQUʹಛԽͨ͠ίϛϡχςΟͳͷͰ5ZQF4DSJQUͷઆ໌ϝϦοτΛ ޠΔඞཁ͋Γ·ͤΜ w
5ZQF4DSJQUΛͬͨߴͳ࣮ͷ8FC"TTFNCMZͷΛؾܰʹͰ͖Δ Λͭ͘Γ·͢ w ڵຯ͕͋Δਓɺ'VLVPLBUTͷ4MBDL5FBNʹ+PJO͍ͯͩ͘͠͞ʂ 19
FukuokaJS #8 -TypeScript- 20 4MBDLJOͷ[FJUσϓϩΠࣦഊͯؒ͠ʹ߹Θͳ͔ͬͨɻটϝʔϧΛૹΔ(PPHMF'PSNͰ͢ɻ