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.5k
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
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
130
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
340
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
290
兎に角、コードレビュー
mitohato14
0
110
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
830
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
420
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
270
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
280
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1.1k
パスタの技術
yusukebe
1
380
Vibe coding コードレビュー
kinopeee
0
440
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
480
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Building an army of robots
kneath
306
45k
Making Projects Easy
brettharned
117
6.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
BBQ
matthewcrist
89
9.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
A better future with KSS
kneath
239
17k
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