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
2k
なぜ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
奥が深いメールのシステム / The depth of Email system
linyows
3
390
IaCにおけるテスト考察 / Tests in IaC
linyows
2
400
リバースエンジニアリングとGoでSlackの認知負荷を下げる / Reducing cognitive load in Slack with Reverse-engineering and Go
linyows
2
260
透過型SMTPプロキシによる送信メールの可観測性向上 / Improved observability of outgoing emails with transparent smtp proxy
linyows
2
920
プロダクションで使うGo Pluginの利便性とパフォーマンス性 / Simplicity and Performance of Go plugin for Production
linyows
0
490
求められるソフトウェアエンジニア像とキャリア戦略 / Engineers and Career Strategies Required Now
linyows
2
460
CloudflareのCAPTCHAを使って ユーザ体験を下げず不正利用を排除する / Cloudflare's captcha case study that does not degrade ux
linyows
0
340
なぜNotionを使うのか2022 / Why use notion as our workspace in 2022
linyows
3
6k
Denoの仕組み / How deno works as TypeScript runtime
linyows
2
770
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
パートナー企業のテクニカルサポートエンジニアとして気になる、より良い AWS サポートの利活用について
kazzpapa3
0
150
運営11年目タイトルを守る最強の盾の有効性と活用法
mixi_engineers
PRO
2
110
Vespaを利用したテクいベクトル検索
szdr
3
240
AWS Lambda と Amazon SQS で「わかった気になれる」FreeRTOS 入門
soracom
PRO
2
110
品質マネジメントで抑えておきたい2つのリスクを見分けて未来に備えよう #yapcjapan
makky_tyuyan
0
150
Binary Hacks Rebooted 私選ハック集
nullpo_head
1
340
見えづらい活動の成果の伝え方は日頃からめちゃくちゃ悩んでるけど、実際こんな取り組みをしな がら温度感を合わせにいってるよ / Conveying Hard-to-See Results
kakehashi
4
2.1k
The People First Approach to Engineering Success - DevNot 2024
zikriyeurkmez
0
210
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
130
多数のWebサービスをECS/Fargate構成で効率よく構築・運用するなら copilot-cli
interu
2
130
Amazon ECS & AWS Fargate 今昔物語 / past and present stories of Amazon ECS and AWS Fargate
iselegant
16
3k
Featured
See All Featured
Designing for Performance
lara
604
68k
Infographics Made Easy
chrislema
239
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Code Review Best Practice
trishagee
63
17k
Thoughts on Productivity
jonyablonski
67
4.2k
Producing Creativity
orderedlist
PRO
341
39k
Become a Pro
speakerdeck
PRO
24
4.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
A better future with KSS
kneath
237
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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Ͱ͢ɻ