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
72
入門wasm
TajimaTheMemer
November 13, 2019
Tweet
Share
More Decks by TajimaTheMemer
See All by TajimaTheMemer
事業成長を加速させるGoのコード品質改善の取り組み / Code quality improvement for Go language
tajimathememer
5
2k
CronJobがschedule通りにJobを生成しない時
tajimathememer
0
1.1k
ふわっと理解する類似画像検索技術
tajimathememer
0
130
Machine Learning As Software
tajimathememer
0
57
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Speed Design
sergeychernyshev
24
600
For a Future-Friendly Web
brad_frost
175
9.4k
We Have a Design System, Now What?
morganepeng
50
7.2k
Agile that works and the tools we love
rasmusluckow
327
21k
Raft: Consensus for Rubyists
vanstee
136
6.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Automating Front-end Workflow
addyosmani
1366
200k
The Language of Interfaces
destraynor
154
24k
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の未来に乞うご期待!