初 Rust で WebAssembly を初体験
Rust + WebAssembly ならば、AltJS どころか JS すら一切書かずに SPA を作成できる、と聞き及んだので、まずは論より証拠、"Rust framework for building client web apps" である Yew を味見してみた。
手順は概ね下記 URL の記述通りだが、記載のようにバージョンを固定せずとも、当方の環境 (Linux 4.9.0-8-amd64 #1 SMP Debian 4.9.110-3+deb9u6 2018-10-08 x86_64 GNU/Linux) では問題無く動作した。
ちなみに、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 をベースに色々と弄り倒してみます。