Save 37% off PRO during our Black Friday Sale! »

WebAssembly by Rust

A4906ea02ea1385bf9a8a18eac62c6da?s=47 森建
February 19, 2019

WebAssembly by Rust

A4906ea02ea1385bf9a8a18eac62c6da?s=128

森建

February 19, 2019
Tweet

Transcript

  1. WebAssembly by Rust 明日からプロダクトに使える WebAssembly pixiv Inc. 森内 建太 2019.2.19

  2. 2 自己紹介 • 主にフロントエンドエンジニア • Ruby on Rails、iOS アプリ開発もやる •

    ECMAScript とか DOM API とかの仕様まわりを調 べるのが好き • 今好きな HTTP レスポンスヘッダは Report-To petamoriken 福岡オフィスプロジェクト エンジニア
  3. WebAssembly とは 3

  4. 4 • アセンブリではないバイナリ形式(32bit) • ブラウザでなくても実行できる ◦ モダンブラウザ Chrome / Firefox

    / Safari / Edge で扱える ◦ Node.js v8 以降で使える(AWS Lambda, BigQuery...) • JavaScript から WebAssembly を呼ぶインターフェースも定義されている ◦ 初期化時に函数などの受け渡しが可能(後述) WebAssembly とは
  5. シンプルな例 5 #[no_mangle] pub extern "C" fn succ(x: i32) ->

    i32 { x + 1 } const { instance } = await WebAssembly.instantiateStreaming(fetch("foo.wasm")); const exports = instance.exports; console.log(exports.succ(42)); // 43
  6. 函数の受け渡しの例 6 extern { fn console_log(x: i32); } #[no_mangle] pub

    extern "C" fn succ_log(x: i32) { unsafe { console_log(x + 1); } } const imports = { env: { console_log: console.log } }; const { instance } = await WebAssembly.instantiateStreaming(fetch("foo.wasm"), imports); const exports = instance.exports; exports.succ_log(42); // console.log(42 + 1)
  7. 7 • 受け渡す函数は引数で数値型( i32, i64, f32, f64)のみ扱える • その他受け渡せるもの ◦

    Memory ▪ WebAssembly で使われるヒープ。バッファを渡したいときにはこれに積んでか らその先頭ポインタ(i32 と同等)を函数に渡す ◦ Table (今のところ Function Table のみ) ◦ Global Variable (数値型のみ。Chrome, Firefox のみ対応) 初期化時の受け渡しについて
  8. バッファの受け渡しの例 8 use std::{mem, alloc as std_alloc}; #[no_mangle] pub unsafe

    extern "C" fn alloc(size: usize) -> *mut u8 { let layout = std_alloc::Layout::from_size_align(size, mem::align_of::<usize>()).unwrap(); std_alloc::alloc(layout) } #[no_mangle] pub unsafe extern "C" fn dealloc(ptr: *mut u8, size: usize) { if size == 0 { return } let layout = std_alloc::Layout::from_size_align_unchecked(size, mem::align_of::<usize>()); std_alloc::dealloc(ptr, layout) }
  9. バッファの受け渡しの例 9 const { instance } = await WebAssembly.instantiateStreaming(fetch("foo.wasm")); const

    exports = instance.exports; const ptr = exports.alloc(8); new Uint8Array(exports.memory.buffer).set([0, 1, 2, 3, 4, 5, 6, 7], ptr); exports.foo(ptr, 8); exports.dealloc(ptr, 8); use std::slice; #[no_mangle] pub unsafe extern "C" fn foo(ptr: *const u8, size: usize) { let buf = slice::from_raw_parts(ptr, size); // ... }
  10. wasm-bindgen 10

  11. 11

  12. 12 • Rust (WebAssembly) と JavaScript 間のラッパー • JavaScript の函数の型を書くとインポートしてくれるし、

    String 型の変換もする ◦ 多くの JavaScript の型が Rust 上では JsValue という型になる ▪ Optional unwrap 祭りになってそれはそれで辛い • 標準函数は自動でインポートすることが出来る(力技) ◦ js-sys ▪ ECMAScript の函数を全て Rust でラップするクレート ◦ web-sys ▪ DOM API の函数を全て(ry wasm-bindgen とは
  13. 13 • JavaScript をラップするだけではなく TypeScript の型ファイルも作ってくれる • wasm-pack ◦ package.json

    を吐き出すので npm にそのまま publish 出来る ◦ wasm-pack-plugin を使うと webpack であたかも普通のモジュールかのように扱 える Rust における wasm-bindgen と wasm-pack と cargo-web と stdweb の違い https://qiita.com/legokichi/items/5d6344314ab6d6633554 wasm-bindgen とは
  14. 14 • Rust で書く WebAssembly はもうプロダクトに使えそう ◦ wasm-bindgen (web-sys) を使うと

    DOM API にアクセスすることが出来るがあまり メリットはない ◦ 要所での重い処理(バッファの変換とか)に向いている ▪ WebP のデコードとか 詳しくは個人の Scrapbox にまとめてますので興味があれば https://scrapbox.io/petamoriken/WebAssembly_by_Rust まとめ