入門wasm

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. wasmとは
   

   View Slide

10. wasmとは
    Web Assembly
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. wasmが目指すもの
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. wasmの使い方
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. wasmの使いどころ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. ユースケース
    

    View Slide

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

    View Slide

35. 採用事例
    

    View Slide

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

    View Slide

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

    View Slide

38. ちなみに
    

    View Slide

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

    View Slide

40. つい１週間前...
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. 最後に
    

    View Slide

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

    View Slide

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

    View Slide