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 TypeScript for WebAssembly
Search
linyows
May 15, 2019
Technology
6
1.9k
なぜ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
リバースエンジニアリングとGoでSlackの認知負荷を下げる / Reducing cognitive load in Slack with Reverse-engineering and Go
linyows
2
81
透過型SMTPプロキシによる送信メールの可観測性向上 / Improved observability of outgoing emails with transparent smtp proxy
linyows
2
700
プロダクションで使うGo Pluginの利便性とパフォーマンス性 / Simplicity and Performance of Go plugin for Production
linyows
0
310
求められるソフトウェアエンジニア像とキャリア戦略 / Engineers and Career Strategies Required Now
linyows
2
320
CloudflareのCAPTCHAを使って ユーザ体験を下げず不正利用を排除する / Cloudflare's captcha case study that does not degrade ux
linyows
0
240
なぜNotionを使うのか2022 / Why use notion as our workspace in 2022
linyows
3
5.7k
Denoの仕組み / How deno works as TypeScript runtime
linyows
2
660
透過型SMTPプロキシによるメール送信集約とキュー輻輳回避の検討 / A Study on Aggregation of Email Transfer and Avoidance of QueueCongestion using a Transparent SMTP Proxy
linyows
0
2.1k
Goでつくる透過型SMTPプロキシ / Transparent SMTP proxy in Go
linyows
1
820
Other Decks in Technology
See All in Technology
Kaggleで学ぶ系列データのための深層学習モデリング
yu4u
7
1.7k
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
6
2.9k
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
1.2k
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
11
3.2k
SLOいつ決めましょう?
abnoumaru
2
130
SWC Transformerから見るTypeScript関数記述ベストプラクティス
fujiyamaorange
1
170
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
0
130
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
1
320
Cloudflare WorkersがPythonに対応したので試してみた
miura55
0
190
Observabilityジャーニーを実現するためのAWSサービス:CloudWatch編
o11yfes2023
0
140
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
260
データ分析力を高めるSQL研修サービス『SQL Everyone』
hikarut
1
380
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Practical Orchestrator
shlominoach
183
9.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Designing for Performance
lara
601
67k
Being A Developer After 40
akosma
67
580k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Docker and Python
trallard
35
2.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
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Ͱ͢ɻ