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
はじめてのWebAssembly
Search
Kazuki Shibata
May 18, 2017
Technology
2
1.9k
はじめてのWebAssembly
Nihonbashi.js #1の資料です。
Kazuki Shibata
May 18, 2017
Tweet
Share
More Decks by Kazuki Shibata
See All by Kazuki Shibata
microCMSでif文を作る
shibe97
1
1k
SvelteKitでJamstackを試す
shibe97
1
1.1k
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
shibe97
16
4.8k
Jamstack × PWA におけるキャッシュ戦略
shibe97
3
1.2k
CSR / SSR / SSGの動向2020
shibe97
2
1.5k
Jamstack×microCMS 実装編
shibe97
4
890
SentryでSPAのエラーログを収集する
shibe97
1
1.6k
useRefについて調べてみた
shibe97
1
140
フロントエンドエンジニアのキャリアパス
shibe97
9
3.7k
Other Decks in Technology
See All in Technology
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
150
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
440
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
180
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
110
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
210
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
230
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
170
Postman と API セキュリティ / Postman and API Security
yokawasa
0
200
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
150
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Raft: Consensus for Rubyists
vanstee
137
6.7k
Adopting Sorbet at Scale
ufuk
73
9.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Side Projects
sachag
452
42k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Transcript
͡Ίͯͷ8FC"TTFNCMZ ࣲాف!TIJCF /JIPOCBTIJKT
σβΠφʔ / ϑϩϯτΤϯυΤϯδχΞ :BIPP+"1"/ͷࠂܥπʔϧͷ ϑϩϯτΤϯυΛ୲͍ͯ͠·͢ ࣲా ف @shibe97
+BWB4DSJQUେ͖ͬࢠͰ͢
͚Ͳ
ͪΐͬͱ͖ͨ
ͱ͍͏ΑΓ
3FBDU 3FEVY͖ͨ
Կ͔৽͍͠ͷʹखΛग़ͯ͠ΈΑ͏ɾɾɾ
None
+BWB4DSJQUͷ
͍ͩͿ͘ͳ͚ͬͨͲɺॏ͍ॲཧʹऑ͍ʢϒϥβݻ·Δʣ ܕ͕໌ࣔతͰͳ͍ ίϯύΠϧܕͰͳ͘ɺΠϯλϓϦλܕݴޠ 'JSFGPYʢ4QJEFS.POLFZʣ &EHFʢ$IBLSBʣ $ISPNFʢ7ʣ
ͦͦ͜ΜͳෳࡶͳͷΛ࡞ΔͨΊʹੜͨ͠ݴޠ͡Όͳ͍ "KBYͷීٴͱڞʹαʔόαΠυͷॲཧ͕ΫϥΠΞϯταΠυʹ Ҡ͖ͬͯͨ͋ͨΓ͔Βແཧ͕ग़࢝Ίͨ
+BWB4DSJQU࣮ߦ࣌ͷྲྀΕ ϒϥβ͕+BWB4DSJQUͷߏจղੳΛߦ͍ɺ"45ʢ"CTUSVDU4ZOUBY 5SFFʣʹม "45ΛόΠτίʔυʹม͠ɺԾϚγϯ্Ͱಈ࡞ͤ͞Δ ܕใ͕ݻ·͖ͬͯͨΒɺ෦తʹػցޠʹม ʢ+VTUJO5JNFίϯύΠϧʣ
ࣄલʹܕఆ͕ٛͰ͖Εʜ
asm.js
BTNKTͬͯͲΜͳͷ .P[JMMB͕ఏএͨ͠+BWB4DSJQUͷߴԽٕज़ ͋͘·Ͱ+BWB4DSJQUϑΝΠϧ ͋Δϧʔϧʹै͏ͱܕใΛ༩͑Δ͜ͱ͕Ͱ͖Δ ʢϒϥβଆͷαϙʔτ͕ͪΖΜඞཁʣ
function AddFunctions(){ "use asm"; function add1(value){ value = value |
0; // Ҿ int ͩͱ໌ࣔ var result = 0; // int ͱͯ͠એݴ result = (value + 1) | 0; // int Ωϟετ return result; } return { add1: add1 } }
BTNKTʹΑΔҾͷܕఆٛ JOU WBMVFWBMVFc EPVCMF WBMVF WBMVF qPBU WBMVFG WBMVF
BTNKTͷͭΒΈ ԋࢉ͔͠Ͱ͖ͳ͍ จࣈྻΦϒδΣΫτΛແཧΓදݱ͠Α͏ͱ͢ΔͱɺόΠφϦ͕ བྷΜͰ͖ͯπϥ͍ ਓ͕ॻ͘ݴޠ͡Όͳ͍
ଞͷݴޠ͔Βม͢Εʜ
--7.ίϯύΠϧͷΈ $ $ 0CKFDUJWF$ (P 3VTU தؒݴޠ +BWB4DSJQU ͦͷଞݴޠ
˞+BWB4DSJQU༻ͷ--7.ϕʔείϯύΠϥ
มͰ͖ͨɺ͔͠͠ʜ ϑΝΠϧ༰ྔ͕େ͖͍ )FMMP8PSME͚ͩͰ, BTNKT.P[JMMB͕ߟ͑ͨͷ͕ͩɺશϒϥβϕϯμʔڠྗͯ͠ ͬͱ͍ܰܗࣜ࡞ͬͪΌ͏ʁ
ʢXBTNʣ
ݱঢ়ɺXBTNʹมͰ͖Δݴޠ $ $ 3VTU
Α͠ɺ3VTUͩʂ
ͬ͘͟Γ3VTUͬͯʁ όʔδϣϯϦϦʔε .P[JMMB͕։ൃ 'JSFGPY͔Β3VTUͰॻ͍ͨίʔυ͕ಈ͍͍ͯΔ ҆શੑɺฒྻੑʹ༏Ε͍ͯΔ
3VTUͷओͳ༻్ 4ZTUFN1SPHSBNNJOH /FUXPSL1SPHSBNNJOH ,FSOFM 8FC"TTFNCMZ
+BWB4DSJQU 1)1 3VCZ +BWB $ 3VTU ʢݸਓͷݟղͰ͢ʣ
FNTDSJQUFO +BWB4DSJQU"1* 8FC"TTFNCMZͰͷར༻ྫ index.rs index.wasm TypedArray
ࢼ͠ʹ3VTUͰ%0.Λు͖ग़ͤΔ͔ ͬͯΈͨ
XFCQMBUGPSNͱ͍͏DSBUFΛ͏ /PEFͰ͍͏QBDLBHFతͳͷ
)5.-ͷத <script> var Module = {} fetch('index.wasm') .then((response) => response.arrayBuffer())
.then((buffer) => { Module.wasmBinary = buffer; var script = document.createElement('script'); script.src = 'index.js'; document.body.appendChild(script); }) </script>
σϞ
ͳΜ͔3FBDUDSFBUF&MFNFOU ͬΆ͕͋͞Δ
+49తͳͷ͕͋Ε ͍͍ײ͡ͳΔͷͰʁ
ͱࢥͬͨΒ͋ͬͨ
KTYSTSFBDUST
͚Ͳ·ͩ։ൃͷॳظஈ֊ͬΆ͍Ͱ͢
5PEP.7$ IUUQSVTUXFCQMBUGPSNHJUIVCJPSVTUUPEPNWD
·ͱΊ ͍ͭʹ+BWB4DSJQUҎ֎ͷݴޠϒϥβͰಈ͔ͤΔ࣌ʹ 3VTU·ͩ8FCΞϓϦ੍࡞ʹऑ͍͕ɺࠓޙ͍ͯͬͨ͠߹ʹ ϑϩϯτΤϯυ͕มΘΔՄೳੑ͕͋Γͦ͏
5IBOLT 5XJUUFS(JU)VC!TIJCF