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
810
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
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
880
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.7k
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
CSC509 Lecture 02
javiergs
PRO
0
400
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
CSC305 Lecture 01
javiergs
PRO
1
380
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
420
開発生産性を上げるための生成AI活用術
starfish719
1
120
CSC509 Lecture 03
javiergs
PRO
0
320
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Practical Orchestrator
shlominoach
190
11k
Side Projects
sachag
455
43k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Rails Girls Zürich Keynote
gr2m
95
14k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Navigating Team Friction
lara
189
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
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