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
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
100
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
520
コードジェネレーターで 効率的な開発をする / Efficient development with code generators
linyows
0
340
研究を支える拡張性の高い ワークフローツールの提案 / Proposal of highly expandable workflow tools to support research
linyows
0
460
非コンテナ環境において宣言的Deploymentを手軽に実現する / Declarative deployment in non-container environments
linyows
0
260
メール送信サーバの集約における透過型SMTP プロキシの定量評価 / Quantitative Evaluation of Transparent SMTP Proxy in Email Sending Server Aggregation
linyows
0
1k
透過型SMTPプロキシによる送信メールの可観測性向上: Update Edition / Improved observability of outgoing emails with transparent smtp proxy: Update edition
linyows
2
500
研究の再現性を高める 仕組みをGoでつくる / Creating a system to improve the reproducibility of research using go
linyows
1
260
奥が深いメールのシステム / The depth of Email system
linyows
4
630
Other Decks in Technology
See All in Technology
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
140
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
420
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
420
知られざるprops命名の慣習 アクション編
uhyo
11
2.8k
努力家なスクラムマスターが陥る「傍観者」という罠と乗り越えた先に信頼があった話 / 20250830 Takahiro Sasaki
shift_evolve
PRO
2
130
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
780
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
2
870
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
240
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
230
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
940
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
350
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
4k
Featured
See All Featured
Side Projects
sachag
455
43k
The Language of Interfaces
destraynor
160
25k
The Invisible Side of Design
smashingmag
301
51k
Six Lessons from altMBA
skipperchong
28
4k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Agile that works and the tools we love
rasmusluckow
330
21k
Designing Experiences People Love
moore
142
24k
Unsuck your backbone
ammeep
671
58k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Gamification - CAS2011
davidbonilla
81
5.4k
The Art of Programming - Codeland 2020
erikaheidi
55
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Ͱ͢ɻ