(W&I) you know something?

Use it for myself.

初 Rust で WebAssembly を初体験

Mozilla

Rust + WebAssembly ならば、AltJS どころか JS すら一切書かずに SPA を作成できる、と聞き及んだので、まずは論より証拠、"Rust framework for building client web apps" である Yew を味見してみた。

github.com

手順は概ね下記 URL の記述通りだが、記載のようにバージョンを固定せずとも、当方の環境 (Linux 4.9.0-8-amd64 #1 SMP Debian 4.9.110-3+deb9u6 2018-10-08 x86_64 GNU/Linux) では問題無く動作した。

qiita.com

ちなみに、apt は「sudo 必須」を rubygem など配下のファイルにも要求して、と・に・か・く・メンドイので、パッケージマネージャーには Linuxbrew を併用している。

その Linuxbrew に rustup-init が有るには有るのだが、なぜか Rust 本体が依存関係に...

$ brew info rustup-init
rustup-init: stable 1.14.0
The Rust toolchain installer
https://github.com/rust-lang-nursery/rustup.rs
Not installed
From: https://github.com/Linuxbrew/homebrew-core/blob/master/Formula/rustup-init.rb
==> Dependencies
Build: rust ✘, openssl ✔
==> Analytics
install: 1,841 (30 days), 7,831 (90 days), 21,663 (365 days)
install_on_request: 1,760 (30 days), 7,475 (90 days), 20,393 (365 days)

 

試しに brew install してみたものの、コンパイル時間が長過ぎて待ちきれないので、本当はイヤだけど、今回は公式推奨の直接インスコの道を選んだ。

# 公式のインストールスクリプト
$ curl https://sh.rustup.rs -sSf | sh

# cargo/bin にパスを通す (fish-shell の場合)
$ set -gx fish_user_paths "$HOME/.cargo/bin" $fish_user_paths

# 最新版で問題無かった
$ cargo install cargo-web

# Yew のレポジトリを丸ごとダウンロード
$ git clone https://github.com/DenisKolodin/yew.git

# 移動
$ cd yew/examples/todomvc

# nightly でないと動作しないので
$ rustup install nightly
$ rustup default nightly

# 念のため、target も予めインスコしておく
$ rustup target add wasm32-unknown-unknown

# で、スタート!
$ cargo +nightly web start --open --auto-reload --target=wasm32-unknown-unknown

おお、Todo アプリが動いとるっ!

 

ここまで来ると、デプロイ版も見てみたくなったので、ビルドしてみたところ概ね 1〜2分でコンパイルを終了。

$ cargo +nightly web deploy --target=wasm32-unknown-unknown --release
(中略)
Finished release [optimized] target(s) in 1m 39s
    Garbage collecting "todomvc.wasm"...
    Processing "todomvc.wasm"...
warning: unsupported custom section: 'producers', please report this!
    Finished processing of "todomvc.wasm"!
The `todomvc` was deployed to ".../yew/examples/todomvc/target/deploy"!
311.61user 2.79system 1:39.72elapsed 315%CPU (0avgtext+0avgdata 581160maxresident)k
0inputs+271048outputs (1major+1409950minor)pagefaults 0swaps

$ cd target/deploy/
$ ls
index.html  styles.css  todomvc.js  todomvc.wasm

おお、見慣れたファイル群が生成されとるっ!

 

こうなると、Webサーバで稼働させてみたくなるのが心情、というもので、

$ python -m SimpleHTTPServer

してみるのだが、敢え無くエラー。

Chromeデベロッパーツールによれば、まず index.html 内で todomvc.js を指定していない (恐らく webpack の使用を想定しているのだろう) ので、その点を修正。

$ diff index.html _index.html
< <script src="js/app.js"></script>
---
> <script src="todomvc.js"></script>

それと、"application/wasm" をレスポンスヘッダーに仕込んでおかないと動作しないようので、その点は下記ワンライナーコードでチョロチョロっと手当。

#!/usr/bin/python
import SimpleHTTPServer
import SocketServer
import mimetypes

PORT = 4567

Handler = SimpleHTTPServer.SimpleHTTPRequestHandler
Handler.extensions_map['.wasm']='application/wasm'

httpd = SocketServer.TCPServer(("", PORT), Handler)
httpd.serve_forever()

さぁて...

$ python httpsrv.py

おお、cargo web start で表示されたモノと同じのが表示されとるっ!

 

いやはや。凄いコトに、ここに至るまで npm を始めとした JS 臭が一切無い... 凄くね?

これは中々に使えそうな予感がするので、Yew をベースに色々と弄り倒してみます。

© toomores_such