Rust でフロントエンド開発!? Yew を試してみた。

こんにちは k-jun です。今回は、Rust 製のフロントエンドフレームワーク Yew を試してみます。

https://github.com/yewstack/yew

WebAssembly によるモダンな開発体験が魅力のようです。色々なところで Rust の名前を聞くことが増えてきました。 Javascript のように、果ては サーバーからモバイルまでどこでも Rust が使えるかもしれませんね。

Setup

サンプルコード を発見したので、ひとまずコレを動かしてみます。

$ git clone https://github.com/yewstack/yew-wasm-pack-minimal
$ cd yew-wasm-pack-minimal
$ cargo install wasm-pack
$ wasm-pack build --target web
...
[INFO]: 📦   Your wasm pkg is ready to publish at /Users/k-jun/source-code/yew-wasm-pack-minimal/pkg.

何やらファイルが、./pkg 以下に吐かれました。tree でディレクトリ構造を見てみると、wasm と js が生成されているようですね。

$ tree ./pkg
./pkg
├── LICENSE-APACHE
├── LICENSE-MIT
├── README.md
├── package.json
├── yew_wasm_pack_minimal.d.ts
├── yew_wasm_pack_minimal.js
├── yew_wasm_pack_minimal_bg.wasm
└── yew_wasm_pack_minimal_bg.wasm.d.ts

では、次に rollup コマンドでバンドルしていきます。rollup が入っていなかったので、ついでにインストールしました。

$ npm install -g rollup
$ rollup ./main.js --format iife --file ./pkg/bundle.js

./main.js → ./pkg/bundle.js...
created ./pkg/bundle.js in 79ms

python で適当なファイルサーバーを立ち上げて中身を見てみます。

ただの hello world じゃん。本当に動いているのだろうか... と思いましたが、以下のファイルをもとに Rendering がなされているようです。

https://github.com/yewstack/yew-wasm-pack-minimal/blob/master/src/app.rs

ということで、あとはこのファイルの編集方法さえわかればなんとかなりそうです。

https://yew.rs/ja/getting-started/build-a-sample-app

さっきより少しだけ複雑な記述内容を見つけたので、これで試してみます。

カウンターが爆誕しました...! 思ったよりフロントエンドっぽくて開発できそうでした。React というよりは、Unity に近い...? ということで、結構面白かったです。それでは今回はこのへんで。