Upgrade to Pro — share decks privately, control downloads, hide ads and more …

入門wasm

TajimaTheMemer
November 13, 2019
12

 入門wasm

TajimaTheMemer

November 13, 2019
Tweet

Transcript

  1. 入門wasm Makuake LT By Tajima Taichi 2019/11/23

  2. https://twitter.com/YuG1224/status/1173194238139363329

  3. ※というジョークがありますが

  4. None
  5. フロントエンドの歴史(雑) 動的にHTML,cssを処理 ↓ ajax ↓ SPA, グラフィック処理, 機械学習..

  6. javascriptに求められる 実行速度は増していく

  7. javascriptではしんどくなってきた 動的型付け  インタプリタ

  8. そこで登場したのがwasm

  9. wasmとは

  10. wasmとは Web Assembly

  11. wasmとは フロントエンドの処理の 高速化のために作られた

  12. wasmとは Webブラウザ用のアセンブリ

  13. wasmとは Webブラウザ上で実行できるハイパ フォーマンスなバイナリコード

  14. wasmとは Webブラウザ上でネイティブに 近い実行速度

  15. wasmとは 高速起動、高速動作、省容量

  16. wasmとは asm.jsの代替として作られた

  17. wasmとは 任意の言語からコンパイルして生成

  18. wasmとは C, C++, Rustなどのコンパイラ言語を ブラウザで実行できる

  19. wasmが目指すもの

  20. wasmが目指すもの 高速・高効率・ポータブル https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

  21. wasmが目指すもの 可読性・デバックしやすさ https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

  22. wasmが目指すもの 安全 https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

  23. wasmが目指すもの ウェブを破壊しないこと https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

  24. wasmの使い方

  25. wasmの使い方 C/C++, Rust, ... Compiler .wasm Browser .js

  26. wasmの使い方 C/C++, LLVM IR emscripten .wasm コンパイラ emscripten: コンパイラツールチェーン ※emscriptten以外の選択肢もある

  27. wasmの使い方 .wasm ・javascriptより軽量なバイナリコード ・機械語ではない ・抽象構文木を内包している

  28. wasmの使い方 ※ブラウザが動くマシンのプロセッサに対応させるため再コンパイルする javascript API

  29. wasmの使いどころ

  30. wasmの使いどころ ・C/C++, Rust..などの資産の流用 ・C/C++, Rust..などのアプリの移植 ・重たい処理の部分だけ高速化 ※DOM操作も一応できる

  31. wasmの使いどころ ※javascriptを置き換えるものではなく補完 するもの

  32. wasmの使いどころ ※wasmによって必ずしもパフォーマン スが向上するとも限らない (適材適所)

  33. ユースケース

  34. ユースケース ・ゲーム ・VR ・暗号化 ・画像・動画編集 ・P2P ...

  35. 採用事例

  36. 採用事例 Google Earthのwasm移植版。chrome以外のブラウザに対応。 https://blog.chromium.org/2019/06/webassembly-brings-google-earth-to-m ore.html

  37. 採用事例 Wav形式の音声ファイルをwasmでmp3に変換しデータ圧縮。 https://developers.cyberagent.co.jp/blog/archives/20506/

  38. ちなみに

  39. wasmはブラウザだけに 留まらない

  40. つい1週間前...

  41. エッジ環境で使える汎用なWebAssembly実行環境「Lucet」 https://www.fastly.com/blog/join-the-beta-new-serverless-compute-enviro nment-at-the-edge

  42. 本日付の最新ニュース

  43. https://bytecodealliance.org/articles/announcing-the-bytecode-alliance wasmの進化が加速

  44. 最後に

  45. 最後に wasmはまだまだ発展途上

  46. 最後に wasmの未来に乞うご期待!