Rust+WebAssemblyのフロントエンドフレームワークの Yewという奴が気になっていた。先日公式レポジトリのtodomvc exampleを動かそうとしてみたらまだ色々発展途上らしくセットアップでハマりまくって4時間くらい無駄にしたので、それを整理して15分くらいで味見できる状態にしたメモ。
Yewの語源はこちら https://ja.wikipedia.org/wiki/イチイ
rustup を入れる。
https://rustup.rs/ ←このページに書いてある手順でインストールする。インストール中に何か聞かれたら、 Proceed with installation (default) 的なのを選ぶ。また、インストール中に出てくる手順に従って環境変数のパスを設定する。homebrewとかでも入るらしいが、個人的に使ったことがないのと、たぶん解説の分岐が増えるので今回は使わない。
rustupはrust公式が作っているrbenvとかnodenvみたいなやつで、今の所デファクトスタンダード。
cargo web をインストールする
Web開発用のいろんなのを自動でやってくれるツール。開発が活発で不安定な気がするので、バージョンを固定している。
cargo install --version 0.6.14 cargo-web
Yew のレポジトリをクローンして、動作確認済みバージョンのtodomvc exampleに移動
開発がまだまだ活発なので、動作確認済みバージョンをチェックアウトする。
git clone https://github.com/DenisKolodin/yew.git
cd yew
git checkout f077a9a0323dbda2335375ae97954366733396a5 -b master20180715
cd examples/todomvc
コンパイラをインストール
WASM出力はまだ安定版コンパイラでは使えないので、開発版コンパイラを入れる。開発版コンパイラはたまに壊れるので、バージョンとして動作確認した日付を指定する。
emscriptenを使えば安定版コンパイラでも動くが、emscripten自体のインストールが面倒なのとコンパイル時間が味見するにはけっこう辛いので今回はパス
rustup install nightly-2018-07-14
todomvc example を動かす
下記のコマンドを実行して成功すると、開発サーバーが立ち上がってブラウザが開く。ブラウザのオートリロードも有効になる。
cargo +nightly-2018-07-14 web start --open --auto-reload --target=wasm32-unknown-unknown
ちなみに、 --target=wasm32-unknown-unknown をつけないとemscriptenを使ったビルドになる。また、Web.toml っていう設定ファイルを書けば長いオプションは省略できるようになる気がする。
ソースをいじってみる
src ディレクトリ内にソースがあるのでいじってみる。jsx的な記法があってびびった
webpackとかと連携したりwasmをminifyしたりとかどうするかは未調査です。