Embed Size (px)
Citation preview
WebAssembly と Rust の
入口の向かいにある道路の
ベンチに腰掛けるレベルの
さわってみた感想を共有
TGIF 2017-10-27 @zaru
@zaru
WebAssembly
WebAssembly とはC, C++, Rust 等でコンパイルしたバイナリをブラウザ上で実行できる
JavaScript に比べ高速に動作する
JavaScript の置き換えは目的ではなく、互いに補完し合う関係
現時点では直接 DOM をさわることはできない
WebAssembly <-> JavaScript <-> WebAPI(DOM) という関係
asm.js の後継的な存在
Unity や UnrealEngine から WebAssembly (WebGL) 出力ができる
ブラウザの対応状況
IE 以外のモダンブラウザは全部対応済み (iOS, Androidも）
どうやって作るか
Emscripten というビルドツールを使う
Rust の場合は rustc , cargo のtargetに wasm32-unknown-emscripten
rustc --target wasm32-unknown-emscripten wa.rs -o wa.js
これで wa.js , wa.wasm が生成される
wa.wasm : Rust のバイナリファイル
wa.js : .wasm を読み込むために必要なグルーコード
あとは HTML でいい感じに読み込む
とりあえず Rust でコードを書く
fn main() { println!("Hello, world!");}
WebAssembly 形式にビルドする
rustc --target wasm32-unknown-emscripten wa.rs -o wa.js
いい感じの HTML で読み込む
将来的には <script type='module'> などで簡単に呼べるようになる
<script> var Module = {};
fetch('wa.wasm') .then((response) => response.arrayBuffer()) .then((buffer) => { Module.wasmBinary = buffer;
const scriptElem = document.createElement('script'); scriptElem.src = 'wa.js'; document.body.appendChild(scriptElem); });</script>
Web サーバを立ち上げる
CORS があるので Web サーバを起動してアクセスする
php -S 0.0.0.0:9999open http://0.0.0.0:9999/
表示された
Rust の関数を JS から呼ぶ
Rust で関数を定義
fn main() {}
#[no_mangle]pub extern fn add(a: i32, b: i32) -> i32{ a + b}
#[no_mangle] を付けてマングリングを防ぐ
マングリングはコンパイラによって勝手に名前が変わること
pub extern で外部関数へ
ビルドする
rustc --target wasm32-unknown-emscripten func.rs -o func.js \ -C link-args="-s EXPORTED_FUNCTIONS=['_add']"
EXPORTED_FUNCTIONS で関数名を指定する
関数名の先頭に _ を付ける
JS から呼ぶ
<script> var Module = {}; fetch('func.wasm') .then((response) => response.arrayBuffer()) .then((buffer) => { Module.wasmBinary = buffer;
const scriptElem = document.createElement('script'); scriptElem.src = 'func.js'; scriptElem.addEventListener('load', (e) => { const add = Module.cwrap('add', 'number', ['number', 'number']); console.log(`1+2=${add(1, 2)}`); });
document.body.appendChild(scriptElem); });</script>
WebAssembly の感想DOM や <canvas> に直接アクセスできない
JS を通じて描画するので非常に面倒
描画パフォーマンスは JS に依存
計算ロジックが複雑みたいなケースじゃないと無駄
例えば囲碁とか？
WebGL ならすごく良い
ネイティブアプリの移植が捗る
将来的にはアクセスできるようになる予定なので期待
Rust の感想パターンマッチが非常に便利
https://gist.github.com/omasanori/7858569
所有権・借用・ライフタイムの概念が良さげ
Vec が重い…
最適化すればそこまでじゃない？
Goに比べると書くのが難しい
ありがとうございます
