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
130
入門wasm
TajimaTheMemer
November 13, 2019
Tweet
Share
More Decks by TajimaTheMemer
See All by TajimaTheMemer
事業成長を加速させるGoのコード品質改善の取り組み / Code quality improvement for Go language
tajimathememer
5
2.6k
CronJobがschedule通りにJobを生成しない時
tajimathememer
0
1.4k
ふわっと理解する類似画像検索技術
tajimathememer
0
160
Machine Learning As Software
tajimathememer
0
79
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
How to Ace a Technical Interview
jacobian
279
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building an army of robots
kneath
306
46k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
BBQ
matthewcrist
89
9.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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の未来に乞うご期待!