はじめに
比較的に新しい技術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を作成する
const js = import("../sample-wasm/pkg/sample_wasm.js");
js.then(js => {
js.say_hello("WebAssembly");
});
<!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
以上