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
Pine Mizune
September 02, 2016
Programming
6
1.6k
WebAssembly 入門
Gotanda.js #5 in TORETA の発表死霊
Pine Mizune
September 02, 2016
Tweet
Share
More Decks by Pine Mizune
See All by Pine Mizune
多言語対応と絵文字ジェネレーター / i18n of Emoji Generator
pine
0
800
C++ 製グラフィックライブラリ Skia の紹介 / Introduction to the graphics library Skia written by C++
pine
0
1.8k
asyncio + aiohttp で作るウェブサービス / How to develop a web service with asyncio and aiohttp
pine
0
670
Lerna による明示的疎結合アーキテクチャ
pine
1
640
CircleCI 2.0 x JavaScript
pine
3
550
Perl 卒業式
pine
0
340
Android Studio の気になる warnings を抑制する方法まとめ
pine
0
500
Emoji Generator meets Browser Extensions
pine
1
3k
近年の OSS 開発における CI 選択のベストプラクティス
pine
3
4.5k
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
testingを眺める
matumoto
1
140
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.4k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Deep Dive into Kotlin Flow
jmatsu
1
360
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
print("Hello, World")
eddie
2
530
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Become a Pro
speakerdeck
PRO
29
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Into the Great Unknown - MozCon
thekraken
40
2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A Modern Web Designer's Workflow
chriscoyier
696
190k
It's Worth the Effort
3n
187
28k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Gamification - CAS2011
davidbonilla
81
5.4k
Transcript
Pine Mizune Sep 2, 2016 / Gotanda.js #5 WebAssembly 入門
ࣗݾհ o (JU)VC !QJOF o 5XJUUFS!QJOF o ͖ͳݴޠ +BWB4DSJQU o
(PUBOEBKT 0SHBOJ[FS o .PCJMF'BDUPSZ *OD
8FC"TTFNCMZ ͱ – ֓ཁ – ࠷ۙͷಈ ؆୯ͳαϯϓϧίʔυ –
୯७ͳԋࢉ – +BWB4DSJQUͱͷ࿈ܞ ࣍
8FC"TTFNCMZ ͱԿ͔ 8FC"TTFNCMZ ͱ 8FC"TTFNCMZ ͷ࠷ۙͷಈ
ϒϥβ͚ ࣮ߦՄೳόΠφϦϑΥʔϚοτ • +BWB4DSJQUͷସͰͳ͍ • ωΠςΟϒίʔυ $$ ͷ࣮ߦͷ •
$ISPNF'JSFGPY /JHIUMZ Ͱࢼݧతʹ࣮ࡁΈ 8FC"TTFNCMZͱ WebAssembly LLVM compiler C/C++
n $ISPNFɺ8FC,JUɺ'JSFGPYɺ.JDSPTPGU&EHFɺ --7.ɺ6OJUZΒ͕αϙʔτΛද໌ IUUQXXXQVCMJDLFZKQCMPHXFCBTTFNCMZIUNM n 7ɺ'JSFGPYɺ.JDSPTPGU&EHF͕ʮ8FC"TTFNCMZʯ ͷ࣮Λൃද ʢ IUUQXXXQVCMJDLFZKQCMPHWGJSFGPYNJDSPTPGU@FEHFXFC
BTTFNCMZXFCIUNM 8FC"TTFNCMZ ࠷ۙͷಈ
8FC"TTFNCMZ Λͬͨ ؆୯ͳαϯϓϧίʔυ ؆୯ͳԋࢉ 8FC"TTFNCMZ ͔Βͷ +4ͷݺͼग़͠ ˞ιʔείʔυIUUQTHJUIVCDPNQJOFXBTNTBNQMF
8FC"TTFNCMZ Λͬͨ ؆୯ͳαϯϓϧίʔυ ؆୯ͳԋࢉ 8FC"TTFNCMZ ͔Βͷ +4ͷݺͼग़͠
؆୯ͳԋࢉͷྫ$ݴޠͰίʔυΛهड़ int add(int a, int b) { return a +
b; } C/C++ WebAssembly LLVM compiler DMBOHFNJUMMWN UBSHFUXBTN4PBEEMM BEET $ݴޠ
؆୯ͳԋࢉͷྫ--7.*3͔Β "4.ʹม define hidden i32 @add(i32 %a, i32 %b) #0
{ entry: %a.addr = alloca i32, align 4 %b.addr = alloca i32, align 4 store i32 %a, i32* %a.addr, align 4 C/C++ WebAssembly LLVM compiler MMD BEEMM NBSDIXBTNGJMFUZQFBTN rPBEET --7.*3
؆୯ͳԋࢉͷྫ"4.͔Β 4ࣜʹม add: .param i32, i32 .result i32 .local i32
i32.const $push2=, 0 C/C++ WebAssembly LLVM compiler TXBTNBMMPDBUFTUBDLIFMMPT IFMMPXBTU 8FC"TTFNCMZ "4.
؆୯ͳԋࢉͷྫ4͔ࣜΒόΠφϦʹม (func $add (param $0 i32) (param $1 i32) (result
i32) (local $2 i32) (i32.store offset=12 (set_local $2 (i32.sub (i32.load offset=4 C/C++ WebAssembly LLVM compiler TFYQSXBTN rPBEEXBTN BEEXBTU 8"45 8"4.ςΩετܗࣜ
؆୯ͳԋࢉͷྫϒϥβ͔ΒಡΈࠐΈ࣮ߦ fetch('/add.wasm') .then(function (res) { return res.arrayBuffer() }) .then(function (arrayBuffer)
{ const binArray = new Uint8Array(arrayBuffer) const module = Wasm.instantiateModule(binArray, {}) console.log(module.exports.add(5, 8)) }) +BWB4DSJQU
8FC"TTFNCMZ Λͬͨ ؆୯ͳαϯϓϧίʔυ ؆୯ͳԋࢉ 8FC"TTFNCMZ ͔Βͷ +4ͷݺͼग़͠
+4Λ 8FC"TTFNCMZ ͔Βݺͼग़͢$ݴޠଆ void alert(char *s); void hello() { alert("Hello
World!¥n"); } $ݴޠ 未解決 ϦϯΫ࣌ʹղܾ͞Εͳ͍ؔ +BWB4DSJQUݺͼग़͠ʹίϯύΠϧ͞ΕΔ
const module = Wasm.instantiateModule(binArray, { env: { alert: function (ptr)
{ const memory = new Uint8Array(module.exports.memory) const str = cstr2str(memory, ptr) console.log(str) }, }, }) module.exports.hello() +BWB4DSJQU ΞυϨε͕Δ θϩऴจࣈྻ ͔Βͷมॲཧ ୈ Ҿʹ ؔҰཡΛ͢ +4Λ 8FC"TTFNCMZ ͔Βݺͼग़͢+4ଆ
function cstr2str(buf, pos) { var s = ’’ while (buf.length
> pos && buf[pos] != 0) { s += String.fromCharCode(buf[pos]) ++pos } return s } +BWB4DSJQU 6JOU"SSBZ͔Β θϩऴจࣈྻΛऔΓग़ͯ͠Δ͚ͩ +4Λ 8FC"TTFNCMZ ͔Βݺͼग़͢+4ଆ
·ͱΊ ü 8FC"TTFNCMZ طʹϒϥβͰಈ͘ ü ਖ਼ࣜͳن֨ʹͳΔͷ·ͩઌ ü ڵຯͷ͋Δํ৮ͬͯΈ͍ͯͩ͘͞
FIN