$30 off During Our Annual Pro Sale. View Details »
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
720
C++ 製グラフィックライブラリ Skia の紹介 / Introduction to the graphics library Skia written by C++
pine
0
1.5k
asyncio + aiohttp で作るウェブサービス / How to develop a web service with asyncio and aiohttp
pine
0
630
Lerna による明示的疎結合アーキテクチャ
pine
1
610
CircleCI 2.0 x JavaScript
pine
3
520
Perl 卒業式
pine
0
310
Android Studio の気になる warnings を抑制する方法まとめ
pine
0
470
Emoji Generator meets Browser Extensions
pine
1
2.9k
近年の OSS 開発における CI 選択のベストプラクティス
pine
3
4.5k
Other Decks in Programming
See All in Programming
subpath importsで始めるモック生活
10tera
0
380
Java 23の概要とJava Web Frameworkの現状 / Java 23 and Java web framework
kishida
2
360
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
10
3.7k
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
6
2.3k
14 Years of iOS: Lessons and Key Points
seyfoyun
0
370
React への依存を最小にするフロントエンド設計
takonda
21
8.4k
PipeCDの歩き方
kuro_kurorrr
3
140
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
820
CSC509 Lecture 12
javiergs
PRO
0
170
競技プログラミングで 基礎体力を身につけよう / You can get basic skills through competitive programming
mdstoy
0
130
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
140
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
130
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Become a Pro
speakerdeck
PRO
25
5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
KATA
mclloyd
29
14k
Teambox: Starting and Learning
jrom
133
8.8k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Fireside Chat
paigeccino
34
3k
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