Version: Next

Build a sample app

はじめに、Rust の新規ライブラリを作りましょう(重要: --libフラグを渡すことでバイナリではなくライブラリを作ってください)

cargo new --lib yew-app && cd yew-app

依存ライブラリにyewとwasm-bindgenを追加してください (最新バージョンについてはこちらを参照してください)

Cargo.toml
[package]
name = "yew-app"
version = "0.1.0"
authors = ["Yew App Developer <[email protected]>"]
edition = "2018"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
yew = "0.17"
wasm-bindgen = "0.2"

以下のテンプレートを src/lib.rsファイルにコピーしてください:

src/lib.rs
use wasm_bindgen::prelude::*;
use yew::prelude::*;

struct Model {
    link: ComponentLink<Self>,
    value: i64,
}

enum Msg {
    AddOne,
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();
    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            link,
            value: 0,
        }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        match msg {
            Msg::AddOne => self.value += 1
        }
        true
    }

    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
        // Should only return "true" if new properties are different to
        // previously received properties.
        // This component has no properties so we will always return "false".
        false
    }

    fn view(&self) -> Html {
        html! {
            <div>
                <button onclick={self.link.callback(|_| Msg::AddOne)}>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

#[wasm_bindgen(start)]
pub fn run_app() {
    App::<Model>::new().mount_to_body();
}

このテンプレートはルートにComponentをセットアップし、Modelと呼ばれるクリックしたら更新するボタンを作ります。 main()の中にあるApp::<Model>::new().mount_to_body()がアプリをスタートしてページの<body>タグをマウントすることに特に注意してください。動的なプロパティでアプリをスタートしたい場合は代わりにApp::<Model>::new().mount_to_body_with_props(..)を使うことで実現できます。

最後に、アプリの中のstaticという名前のフォルダにindex.htmlファイルを追加してください。

mkdir static

index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Yew Sample App</title>
        <script type="module">
            import init from "./wasm.js"
            init()
        </script>
    </head>
    <body></body>
</html>

アプリを動かす!

wasm-packを使うのがアプリを動かすのに推奨される方法です。まだwasm-packをインストールしていない場合、cargo install wasm-packでインストールして開発サーバーを動かしてみましょう:

wasm-pack build --target web --out-name wasm --out-dir ./static

wasm-packはコンパイルされた WebAssembly と JavaScript ラッパーをまとめたものを./staticディレクトリに作り、アプリの WebAssembly バイナリを読み込んで動かします。

そして、./static以下で好きなサーバーをファイルをサーブしてみましょう。例えば:

cargo +nightly install miniserve
miniserve ./static --index index.html

アプリを動かす!​

アプリを動かす!