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
入門wasm
Search
TajimaTheMemer
November 13, 2019
0
58
入門wasm
TajimaTheMemer
November 13, 2019
Tweet
Share
More Decks by TajimaTheMemer
See All by TajimaTheMemer
事業成長を加速させるGoのコード品質改善の取り組み / Code quality improvement for Go language
tajimathememer
5
1.9k
CronJobがschedule通りにJobを生成しない時
tajimathememer
0
1.1k
ふわっと理解する類似画像検索技術
tajimathememer
0
120
Machine Learning As Software
tajimathememer
0
50
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
A Philosophy of Restraint
colly
202
16k
Typedesign – Prime Four
hannesfritz
39
2.3k
Navigating Team Friction
lara
183
13k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Git: the NoSQL Database
bkeepers
PRO
425
64k
A designer walks into a library…
pauljervisheath
201
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Transcript
入門wasm Makuake LT By Tajima Taichi 2019/11/23
https://twitter.com/YuG1224/status/1173194238139363329
※というジョークがありますが
None
フロントエンドの歴史(雑) 動的にHTML,cssを処理 ↓ ajax ↓ SPA, グラフィック処理, 機械学習..
javascriptに求められる 実行速度は増していく
javascriptではしんどくなってきた 動的型付け インタプリタ
そこで登場したのがwasm
wasmとは
wasmとは Web Assembly
wasmとは フロントエンドの処理の 高速化のために作られた
wasmとは Webブラウザ用のアセンブリ
wasmとは Webブラウザ上で実行できるハイパ フォーマンスなバイナリコード
wasmとは Webブラウザ上でネイティブに 近い実行速度
wasmとは 高速起動、高速動作、省容量
wasmとは asm.jsの代替として作られた
wasmとは 任意の言語からコンパイルして生成
wasmとは C, C++, Rustなどのコンパイラ言語を ブラウザで実行できる
wasmが目指すもの
wasmが目指すもの 高速・高効率・ポータブル https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
wasmが目指すもの 可読性・デバックしやすさ https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
wasmが目指すもの 安全 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
wasmが目指すもの ウェブを破壊しないこと https://developer.mozilla.org/ja/docs/WebAssembly/Concepts
wasmの使い方
wasmの使い方 C/C++, Rust, ... Compiler .wasm Browser .js
wasmの使い方 C/C++, LLVM IR emscripten .wasm コンパイラ emscripten: コンパイラツールチェーン ※emscriptten以外の選択肢もある
wasmの使い方 .wasm ・javascriptより軽量なバイナリコード ・機械語ではない ・抽象構文木を内包している
wasmの使い方 ※ブラウザが動くマシンのプロセッサに対応させるため再コンパイルする javascript API
wasmの使いどころ
wasmの使いどころ ・C/C++, Rust..などの資産の流用 ・C/C++, Rust..などのアプリの移植 ・重たい処理の部分だけ高速化 ※DOM操作も一応できる
wasmの使いどころ ※javascriptを置き換えるものではなく補完 するもの
wasmの使いどころ ※wasmによって必ずしもパフォーマン スが向上するとも限らない (適材適所)
ユースケース
ユースケース ・ゲーム ・VR ・暗号化 ・画像・動画編集 ・P2P ...
採用事例
採用事例 Google Earthのwasm移植版。chrome以外のブラウザに対応。 https://blog.chromium.org/2019/06/webassembly-brings-google-earth-to-m ore.html
採用事例 Wav形式の音声ファイルをwasmでmp3に変換しデータ圧縮。 https://developers.cyberagent.co.jp/blog/archives/20506/
ちなみに
wasmはブラウザだけに 留まらない
つい1週間前...
エッジ環境で使える汎用なWebAssembly実行環境「Lucet」 https://www.fastly.com/blog/join-the-beta-new-serverless-compute-enviro nment-at-the-edge
本日付の最新ニュース
https://bytecodealliance.org/articles/announcing-the-bytecode-alliance wasmの進化が加速
最後に
最後に wasmはまだまだ発展途上
最後に wasmの未来に乞うご期待!