WebAssemblyの開発入門

7936 ワード
WebAssembly Rust Rust テキストリンク

はじめに

比較的に新しい技術WebAssemblyを使ってサンプルをやってみます。

WebAssemblyとは

WebAssembly (略：Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

W3Cからレコメンドされ、今後は主流ブラウザからサポートするので普及できると思います。
https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en

特徴としては４点アピールしています。

  • Efficient and fast
  • Open and debuggable
  • Safe
  • Part of the open web platform

Rustとは

A language empowering everyone to build reliable and efficient software.

  • Performance
  • Reliability
  • Productivity

RustでWebAssemblyサンプルをやってみます。
Rustのインストール：https://www.rust-lang.org/tools/install

環境構築

開発ガイドの手順で実行すれば構築できます。

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
.\emsdk install latest
.\emsdk activate latest

実行の注意事項

file:///C:/Projects/emsdk/sample/test.htmlのようにfileのprotocolはエラーとなり、表示できないです。
理由はセキュリティの保護のため、same-originの制限があります。ですので、実行にはhttpサーバが必要です。

WebAssembly will enforce the same-origin and permissions security policies of the browser.

HTTPサーバは、Apache httpd, Nginxでもいいですが、ローカルではvue.jsなどでもOKです。

サンプル

Rustビルドできるwasm-packをインストール

cargo install wasm-pack

プロジェクト作成

cargo new --lib sample-wasm

テストコードは自動生成されています。

src/lib.rsにサンプルコードを追加

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn say_hello(name: &str) {
    alert(&format!("Hello, {}!", name));
}

Cargo.tomlに依頼追加

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

wasm-packビルド

wasm-pack build

Vue.jsのプロジェクト作成

vue-sampleというプロジェクトを作成して
index.jsとindex.htmlを作成する

index.js
const js = import("../sample-wasm/pkg/sample_wasm.js");
js.then(js => {
  js.say_hello("WebAssembly");
});
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebAssembly sample</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

起動して動作確認

起動：npm run serve
アクセス：http://localhost:8081/

結果：

これでHelloを表示するまで動作確認できました。

参考URL：https://developer.mozilla.org/en-US/docs/WebAssembly/rust_to_wasm

以上