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
340
コードジェネレーターで 効率的な開発をする / Efficient development with code generators
linyows
0
290
研究を支える拡張性の高い ワークフローツールの提案 / Proposal of highly expandable workflow tools to support research
linyows
0
420
非コンテナ環境において宣言的Deploymentを手軽に実現する / Declarative deployment in non-container environments
linyows
0
200
メール送信サーバの集約における透過型SMTP プロキシの定量評価 / Quantitative Evaluation of Transparent SMTP Proxy in Email Sending Server Aggregation
linyows
0
930
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
440
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
230
奥が深いメールのシステム / The depth of Email system
linyows
4
590
IaCにおけるテスト考察 / Tests in IaC
linyows
2
700
Other Decks in Technology
See All in Technology
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
160
エンジニア向け技術スタック情報
kauche
1
270
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
190
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
0
300
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
290
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
260
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
250
OpenHands🤲にContributeしてみた
kotauchisunsun
1
470
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
The World Runs on Bad Software
bkeepers
PRO
69
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Speed Design
sergeychernyshev
32
1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
RailsConf 2023
tenderlove
30
1.1k
Visualization
eitanlees
146
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
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Ͱ͢ɻ