☃️

【Rust Yew web-sys】初学向 Yewでinputへの入力内容取得、及び処理結果の表示

2023/12/11に公開

Rust

WebAssembly

Yew

tech

$Yew$ と $web$ - $sys$ での $Web$ 開発

先人が $JavaScript$ の代替として $WebAssembly$ に注目し始め、早数年の時が経つ。曰く、その高速な動作は、 $JavaScript$ では実現し得ないものであると。しかし初学の私がこれを試さんとするに、挫折を余儀なくされたことは幾度とあった。以為えらく、 $JavaScript$ の簡便さの前に、 $WebAssembly$ は到底及ばぬと。

$WebAssembly$ と $Yew$

私が挫折した原因の一は、手法の不定にあった。
$WebAssembly$ は直接記述することができる。

記述したものを $Wasm$ 形式に変換する。

上記事より引用

wat2wasm simple.wat -o simple.wasm

一方、 $Rust$ や $C$ 等の言語から生成することもできる。

上記事より引用

wasm-pack build --target web

次の記事では、こうした手順を少しでも簡便にするべく、 $Makefile$ を用いている。

そして $Rust$ には、(誤解でなければ) $WebAssembly$ を自動的に生成する機能を備える、「 $Yew$ 」がある。これにより、プログラムの $compile$ から $WebAssembly$ への変換まで、全て次の一文で完結するようになるのである。

Yewとtrunkを用いた実行方法

trunk serve

ここまで論いた事柄から、 $Yew$ は簡易に $WebAssembly$ を利用するには不可欠であると感ぜられる。その上、 $Yew$ には公式のホームページがある。
https://yew.rs/ja/
日本語対応こそ不十分であるものの、 $Docs.rs$ に比して親切にも整理されている。初学の私は大いに頼ろうとした。

$Yew$ の問題

$Yew$ を試して私が感じたことを謇諤すれば、「断片的な情報ばかりで、結局如何にして形を成せばよいのかわからない」のである。

実行方法

先ずは $Tutorial$ と、そのプログラム及び実行方法を引用して紹介する。

例 $1$

 プログラム
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();
}

実行方法

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

例 $2$

https://yew.rs/ja/docs/tutorial

 プログラム
use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <h1>{ "Hello World" }</h1>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

実行方法

trunk serve --open

実行方法は言わずもがな、プログラムのfn main()内を見ても、二者が全く異なる手法で実行しようとしていることが分かるだろう。 $Yew$ は開発途上であるため、バージョンが異なると互換性がなくなっていることも珍しくない。そこで、両者のバージョンが記載されているCargo.tomlをも引用する。

例

1

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

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

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

例

2

 Cargo.toml
[package]
name = "yew-app"
version = "0.1.0"
edition = "2021"

[dependencies]
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }

上はyew = "0.17"とあるから、 $0.17$ であると分かる。尚、現在の最新は $0.21$ であり、こちらの方は古い情報であることが分かる。
一方で下にはバージョンを示す数値がなく、直接 $GitHub$ を指している。

この違いは極めて重要である。にも関わらず、両者が混在しているため、私のような初学の混乱を招くのである。

爰に、本記事では例 $2$ の方式を採用することを断っておく。

開発手法

ここで一度、本記事の表題を確認しておく。
「 $Yew$ で $input$ への入力内容取得、及び処理結果の表示」
具体的且つ基本的な課題は、次の三点である。

$Rust$ で、画面上の要素や、内容を取得できること。
$Rust$ で、画面上に何らかの内容を表示できること。
$Rust$ で、 $EventListner$ を定義できること。

このような $Web$ $Application$ を作るからには、当然 $EventListner$ を扱いたいものである。

EventListnerとは

$EventListner$ は、操作に連係させる関数である。一例に、 $JavaScript$ では次のように実装する。

 index.html
<input type = "number" id = "inputArea" />
<button id = "button" >button</button>
<p id = "outputArea" ></p>

<script>
    /* buttonを押すとinputの内容を`<p id = "outputArea" ></p>`に表示する */
    document.getElementById("button") // `<button id = "button" >button</button>`を取得
    .addEventListner(
        "click", // clickに対応させる
        /* 以下の無名関数を連係する */
        () => {
            /* `<input type = "number" id = "inputArea" />`の値を取得する */
            const inputValue = document.getElementById("inputArea").value;
	
	    /* `<p id = "outputArea" ></p>`の内容を上書きする */
	    document.getElementById("outputArea").textContent = inputValue;
        }
    );
</script>

参考：

$EventListner$ を実装するにあたり、隘路となったのは親切な情報の少なさである。結論としては、次の情報を参看することで実装する。

プログラムを引用して示す。

 Example
#[derive(Properties, PartialEq)]
pub struct Props {
    pub callback: Callback<String, String>,
}

#[function_component(MyComponent)]
fn my_component(props: &Props) -> Html {
    let greeting = props.callback.emit("Yew".to_string());

    html! {
        <>{ &greeting }</>
    }
}

#[function_component(UseCallback)]
fn callback() -> Html {
    let counter = use_state(|| 0);
    let onclick = {
        let counter = counter.clone();
        Callback::from(move |_| counter.set(*counter + 1))
    };

    // This callback depends on (), so it's created only once, then MyComponent
    // will be rendered only once even when you click the button multiple times.
    let callback = use_callback((), move |name, _| format!("Hello, {}!", name));

    // It can also be used for events, this callback depends on `counter`.
    let oncallback = use_callback(counter.clone(), move |_e, counter| {
        let _ = **counter;
    });

    html! {
        <div>
            <button {onclick}>{ "Increment value" }</button>
            <button onclick={oncallback}>{ "Callback" }</button>
            <p>
                <b>{ "Current value: " }</b>
                { *counter }
            </p>
            <MyComponent {callback} />
        </div>
    }
}

始めに私怨を込めて雑駁と指摘するのは、この例には関数の定義の仕方しか記述されておらず、「これをどのように実行するのか」には全く触れられていない点である。吾が私怨に反駁するとすれば、「逐一実行方法まで触れる必要はない」のだが、先述の通り $Yew$ の実行方法は唯一でないために、殊更不親切となっているのである。

本旨に戻ると、この例の中には $EventListner$ の定義方法が二種類示されている。

Callback::from()
use_callback()

二者の差異はcounter.clone()の位置であり、使い勝手が異なる。
また、counterはuse_state()によって定義されている。これを $HTML$ 中に埋め込むことで、counter.set()で値を変じると、 $HTML$ 上でも値が変わるようになっている。

上の例は、このような考えに基づいて組まれたプログラムである。これにより、「画面上の値の更新」をすることは出来る。しかしながら、 $JavaScript$ の手法と比して乖離が激しい。この例を見ただけでは、「画面上の要素の取得」を如何にすべきか、私には分からない。

$JavaScript$ と $web$ - $sys$

本記事では、 $JavaScript$ の代替は、これに近似している $web$ - $sys$ を利用する。当初、「 $Yew$ でも $JavaScript$ 同様のことができる筈」と考えていた。しかし、以下の記事を拝見し、その考えは全く忘れてしまった。「これなら出来る」と確信したのである。

やはり、 $JavaScript$ を経験している者ならば、 $JavaScript$ と同じ手法をとる方が簡単である。そして未だ、 $Yew$ でどのように要素を取得するべきか理解していない。「できない」より「できる」を撰んだのである。

$web$ - $sys$ と $JavaScript$ との決定的な差異は、unwrap()を付する必要がある点である。次を比較せよ。

 id="ID"である要素の取得(js)
document.getElementById("ID")

 id="ID"である要素の取得(rs)
use web_sys::window;

window().unwrap().document().unwrap().get_element_by_id("ID").unwrap()

型の推移

Option<>の被覆を除去して中を取り出すのが、ここでのunwrap()の働きと言える。

camel caseとsnake case

$camel$ とは駱駝、 $snake$ とは蛇である。
$camel$ $case$ とは、 $getElementById$ の如く、語の区切りを大文字にして示す記法である。
$snake$ $case$ とは、 $get\_element\_by\_id$ の如く、語の区切りを_で示す記法である。
$Rust$ では、 $camel$ $case$ を使用すると「 $snake$ $case$ を使用せよ」と警告を受ける。

unwrap()とは、「失敗し得る処理」に付される関数であるが、ここでは、これが無いと実行できないから付しているに過ぎない。但し、処理が失敗していた場合には「プログラム全体が停止するため危険」である。停止されては困る場合、unwrap_or()等で、「失敗したらどう対処するか」を定義する必要がある。

その他、 $JavaScript$ とは異なる点は数多あるが、不明な $Yew$ と比べると幾分ましと考えた次第である。

本題

今更だが、 $Rust$ は既に使用できる前提で話を進める。
今回作成するのは、

数値を入力する
$button$ を押すと、数値を取得し、計算する
計算結果を表示する

これらの簡単な例として、 $BMI$ 計算ができるプログラムとする。

BMIとは

$BMI$ とは：

$BMI$ 計算サイト：

$BMI$ とは $Body$ $Mass$ $Index$ の略であり、「体格指数」と邦訳される。
体重を $W$ [㎏]、身長を $H$ [m]と置く時、

BMI = \frac{W}{H^2}

で計算される。
肥瘠判定の指標として世界的に用いられており、日本肥満学会は、

18.5

未満を低体重(やせ)、

25

以上を肥満、それ以外を普通体重としている。

$Rust$ $project$ を作り、 $Yew$ と $web$ - $sys$ を追加する

$project$ 名は $bmi\_calculator$ とする。次を実行すると、基本要素が自動で生成される。

cargo new bmi_calculator

加えてindex.htmlを作成する。例として、内容は以下のようにする。

 index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>BMI</title>
    </head>
    <body>
    </body>
</html>

今、 $project$ 内は次のような構成となった。

$web$ - $sys$ の追加

cargo add web-sys

初回ならば、これにより、自動的にCargo.lockが生成される。追加された $package$ が記されるが、基本意識する必要はない。
また、Cargo.tomlに次のような内容が追加される。今回のバージョンは $0.3.66$ であった。

 Cargo.toml(抜粋)
[dependencies]
web-sys = "0.3.66"

$Yew$ の追加

Cargo.tomlに追記する。

 Cargo.toml(抜粋)
[dependencies]
web-sys = "0.3.66"
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }

featuresについて

先述した通り、本記事では作成したプログラムを次のように実行する。

fn main() {
    yew::Renderer::<App>::new().render();
}

このyew::Rendererについての $docs$ を読むと、次の記述がある。

Available on crate feature csr only.

この記述にある通り、yew::Rendererを使用するには、csr $feature$ を有効にする必要があり、これが抜けていると実行できない。この他にもこのような注意を要する場合があるため、適宜確認しなければならない。

$Rust$ を記述する

完成は以下に示す。

 main.rs
use yew::prelude::*;
use web_sys::{
    window,
    HtmlInputElement,
    wasm_bindgen::JsCast
};

/* clone()を使うために`PartialEq`を付与する。 */
#[derive(PartialEq)]
struct BMI {
    bmi_value: String,
} impl BMI {
    /* constructor */
    fn new_empty() -> Self {
        BMI {
            bmi_value: "".to_owned()
        }
    }
    fn new_value(value: f32) -> Self {
        let string_value = value.to_string();
        BMI {
            bmi_value: string_value
        }
    }
    /* 計算 */
    fn calculation(height: f32, weight: f32) -> f32 {
        /* 体重[㎏] ÷ {(身長[㎝] ÷ 100)[m]}² */
        weight / (height / 100.0).powi(2)
    }
}

/* idで探してvalueを得る */
fn fn_get_value_by_id(id: &str) -> String {
    window().unwrap()
    .document().unwrap()
    .get_element_by_id(id).unwrap()
    .dyn_ref::<HtmlInputElement>().unwrap()
    .value()
}

#[function_component(App)]
fn app() -> Html {
    /* HTMLに埋め込む変数 */
    let bmi_state = use_state(
        || {
            BMI::new_empty()
        }
    );

    /* Event Listner */
    let calculate_bmi = use_callback(
        bmi_state.clone(),
        |_mouse_event, clone_state| {
            let height = fn_get_value_by_id("height").parse::<f32>().unwrap();

            let weight = fn_get_value_by_id("weight").parse::<f32>().unwrap();

            let bmi = BMI::calculation(height, weight);

            clone_state.set(
                BMI::new_value(bmi)
            );
        }
    );

    html! {
        <>
            <h1>{"BMI calculation"}</h1>
            <p>{"height (㎝)"}<input type = "number" step = "0.1" id = "height" /></p>
            <p>{"weight (㎏)"}<input type = "number" step = "0.1" id = "weight" /></p>
            <p>{format!("BMI：{}", (*bmi_state).bmi_value)}</p>
            <p><button onclick = {calculate_bmi} >{"calculate"}</button></p>
        </>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

概要図

概説

プログラムについての説明は以下に述べる。

`main()`

fn main() {
    yew::Renderer::<App>::new().render();
}

fnで関数を定義する。 $Rust$ では、main()がプログラムの開始点となる。

不確かな説明

#[function_component(App)]により、Appが擬似HTML要素として使用できるようになるものと理解している。

 引用した例
use yew::{function_component, html, Html};

#[function_component(ChatContainer)]
pub fn chat_container() -> Html {
    html! {
        // chat container impl
    }
}

html! {
    <ChatContainer />
};

引用元：
https://yew.rs/docs/0.19.0/concepts/function-components/attribute

即ち、<App>という $HTML$ 要素としてのまとまりを、基礎となる $HTML$ に展開していると考えられる。

 1. 基礎となるHTML(想像)
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>BMI</title>
    </head>
    <body>
    </body>
</html>

 2. <App>が展開される(想像)
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>BMI</title>
    </head>
    <body>
        <App/>
    </body>
</html>

では、<App/>とは何かと言えば、app()関数が次の $HTML$ 要素を返却している。

 3. <App>の中身
html! {
    <>
        <h1>{"BMI calculation"}</h1>
        <p>{"height (㎝)"}<input type = "number" step = "0.1" id = "height" /></p>
        <p>{"weight (㎏)"}<input type = "number" step = "0.1" id = "weight" /></p>
        <p>{format!("BMI：{}", (*bmi_state).bmi_value)}</p>
        <p><button onclick = {calculate_bmi} >{"calculate"}</button></p>
    </>
}

 4. <App>の中身が展開される(想像)
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>BMI</title>
    </head>
    <body>
        <h1>{"BMI calculation"}</h1>
        <p>{"height (㎝)"}<input type = "number" step = "0.1" id = "height" /></p>
        <p>{"weight (㎏)"}<input type = "number" step = "0.1" id = "weight" /></p>
        <p>{format!("BMI：{}", (*bmi_state).bmi_value)}</p>
        <p><button onclick = {calculate_bmi} >{"calculate"}</button></p>
    </body>
</html>

`use`

use yew::prelude::*;
use web_sys::{
    window,
    HtmlInputElement,
    wasm_bindgen::JsCast
};

使用するcrateを明記している。既に機能が整理され、提供されているプログラム群を、 $Rust$ では $crate$ と呼ぶ。即ち、 $Yew$ も $web$ - $sys$ も、 $crate$ である。
use yew::prelude::*;は、 $Tutorial$ の例に倣っているに過ぎない。web_sysは、 $VSCode$ の拡張機能に任せ、自動的に追加したものである。

`struct BMI`

/* clone()を使うために`PartialEq`を付与する。 */
#[derive(PartialEq)]
struct BMI {
    bmi_value: String,
} impl BMI {
    /* constructor */
    fn new_empty() -> Self {
        BMI {
            bmi_value: "".to_string()
        }
    }
    fn new_value(value: f32) -> Self {
        let string_value = value.to_string();
        BMI {
            bmi_value: string_value
        }
    }
    /* 計算 */
    fn calculation(height: f32, weight: f32) -> f32 {
        /* 体重[㎏] ÷ {(身長[㎝] ÷ 100)[m]}² */
        weight / (height / 100.0).powi(2)
    }
}

$struct$ は構造体と呼ばれる。ここでは、「オブジェクト指向」に於ける $class$ に似た内容を記述している。

構造体 $BMI$

struct BMI {
    bmi_value: String,
}

この構造体は、String型の文字列をbmi_valueという名で保有する。bmi_valueは関数で扱うため、&str型では成立しない。

文字列の型

$Rust$ には、文字列の型として&strとStringの二種がある。
簡単には、次のように分別する。

型	概要
`&str`	そのまま使う場合
`String`	内容が変わる場合関数から返却する場合

&strは、厳格で融通が利かない。Stringは、&strではできないこと(関数処理など)ができる。この選択を誤ると、プログラムが実行できなくなる。
この分類や、strでなく&strであることは、一見して受け入れ難いものである。しかしここでは受容することとし、敢えてその理由は述べない。

$Rust$ の構造体や「オブジェクト指向」の $class$ は、それ自体が「型」を成す。今後、BMIは「型」として扱うことができる。

構造体に関数を実装する

impl BMI {
    /* constructor */
    fn new_empty() -> Self {
        BMI {
            bmi_value: "".to_string()
        }
    }
    fn new_value(value: f32) -> Self {
        let clone_value = value.clone();
        let string_value = clone_value.to_string();
        BMI {
            bmi_value: string_value
        }
    }
    /* 計算 */
    fn calculation(height: f32, weight: f32) -> f32 {
        /* 体重[㎏] ÷ {(身長[㎝] ÷ 100)[m]}² */
        weight / (height / 100.0).powi(2)
    }
}

`new_empty()`

fn new_empty() -> Self {
    BMI {
        bmi_value: "".to_string()
    }
}

bmi_valueが空の文字列を保有する、BMI型構造体を返却する。
関数が返却する値の型は->で明記する。ここでは、SelfはBMIを言う。
空の文字列""は&str型であるため、to_string()でString型に変換する。

`new_value()`

fn new_value(value: f32) -> Self {
    let string_value = value.to_string();
    BMI {
        bmi_value: string_value
    }
}

bmi_valueが、小数を表す文字列を保有する、BMI型構造体を返却する。
value: f32は、この関数がf32型小数値を受け、valueという名で扱うことを示す。
value.to_string()は、小数値をString型文字列に変換している。(例：1.1という小数値が"1.1"という文字列となる)

式と戻り値との区別

関数の中で、処理を表す式は末尾に;が付く。反対に;が付かない場合は戻り値を表し、この値が返却される。

{
    let string_value = value.to_string();
    BMI { bmi_value: string_value }
}

let string_value = value.to_string();は処理である。BMI { bmi_value: string_value }は戻り値である。
別言語ではreturnと書かなければ返却されないことがしばしばだが、それに比べて意図が分かりづらく、誤りやすい。

`calculation()`

fn calculation(height: f32, weight: f32) -> f32 {
    /* 体重[㎏] ÷ {(身長[㎝] ÷ 100)[m]}² */
    weight / (height / 100.0).powi(2)
}

身長と体重を受け、 $BMI$ を計算する。
powi()は、整数指数の累乗である。

構造体に属性を付与する

#[derive(PartialEq)]

後のbmi_state.clone()に対し、 $VSCode$ の拡張機能が自動補完したものである。

`fn_get_value_by_id`

fn fn_get_value_by_id(id: &str) -> String {
    window().unwrap()
    .document().unwrap()
    .get_element_by_id(id).unwrap()
    .dyn_ref::<HtmlInputElement>().unwrap()
    .value()
}

局所的な利便性を上げるため、 $ID$ から $value$ を取得する一連の処理を関数とした。

単にwindow().unwrap().document().unwrap().get_element_by_id(id).unwrap().value()としたのでは $error$ になるため、型変換を経由する。
参考記事：

`app()`

#[function_component(App)]
fn app() -> Html {
    /* HTMLに埋め込む変数 */
    let bmi_state = use_state(
        || {
            BMI::new_empty()
        }
    );

    /* Event Listner */
    let calculate_bmi = use_callback(
        bmi_state.clone(),
        |_mouse_event, clone_state| {
            let height = fn_get_value_by_id("height").parse::<f32>().unwrap();

            let weight = fn_get_value_by_id("weight").parse::<f32>().unwrap();

            let bmi = BMI::calculation(height, weight);

            clone_state.set(
                BMI::new_value(bmi)
            );
        }
    );

    html! {
        <>
            <h1>{"BMI calculation"}</h1>
            <p>{"height (㎝)"}<input type = "number" step = "0.1" id = "height" /></p>
            <p>{"weight (㎏)"}<input type = "number" step = "0.1" id = "weight" /></p>
            <p>{format!("BMI：{}", (*bmi_state).bmi_value)}</p>
            <p><button onclick = {calculate_bmi} >{"calculate"}</button></p>
        </>
    }
}

main()によって実行される。

`bmi_state`

let bmi_state = use_state(
    || {
        BMI::new_empty()
    }
);

BMI::new_empty()が返却した、空の文字列""を持つBMI型構造体を保有する。

名前解決

::は名前解決のための記号である。new_empty()が何処から来たのかを、BMI::と付することで明記する。

無名関数

|| BMI::new_empty()は、無名関数を表す。||は引数を表す。ここでは、引数はないことを示す。そのあとに続く記述は、関数としての処理を示す。次に同じ。

fn no_name() -> BMI {
    BMI::new_empty()
}

`calculate_bmi`

let calculate_bmi = use_callback(
    bmi_state.clone(),
    |_mouse_event, clone_state| {
        let height = fn_get_value_by_id("height").parse::<f32>().unwrap();

        let weight = fn_get_value_by_id("weight").parse::<f32>().unwrap();

        let bmi = BMI::calculation(height, weight);

        clone_state.set(
            BMI::new_value(bmi)
        );
    }
);

use_callback()は、 $EventListner$ を定める。
第一引数には、bmi_stateのcloneを指定する。
第二引数には、関数を指定する。

無名関数

|_mouse_event, clone_state| {
    let height = fn_get_value_by_id("height").parse::<f32>().unwrap();

    let weight = fn_get_value_by_id("weight").parse::<f32>().unwrap();

    let bmi = BMI::calculation(height, weight);

    clone_state.set(
        BMI::new_value(bmi)
    );
}

引数にはMouseEvent型の_mouse_eventと、&UseStateHandle<BMI>型のclone_stateを定める。

使用しない変数

変数名を_から始めることで、その変数を使用していなくとも $error$ にならない。

身長と体重は次のように取得し、変換する。

let bmi = BMI::calculation(height, weight);では、 $BMI$ の計算結果をbmiで受け取る。

clone_state.set(BMI::new_value(bmi));では、1. BMI::new_value()にbmiを渡し、bmiの値を持つBMI型構造体を受け取る。2. 受け取った構造体で、clone_stateを更新する。

`html!`

html! {
    <>
        <h1>{"BMI calculation"}</h1>
        <p>{"height (㎝)"}<input type = "number" step = "0.1" id = "height" /></p>
        <p>{"weight (㎏)"}<input type = "number" step = "0.1" id = "weight" /></p>
        <p>{format!("BMI：{}", (*bmi_state).bmi_value)}</p>
        <p><button onclick = {calculate_bmi} >{"calculate"}</button></p>
    </>
}

$HTML$ を生成し、app()の戻り値として返却する。

参照外し

(*bmi_state).bmi_valueの型推移は次の通りである。

*は参照外し演算子である。UseStateHandle<BMI>からBMIを抜き出すために使用している。この他、次のような対応関係もある。

&は参照、*が参照外しである。本記事では敢えてこれ以上述べない。

format!

ここでは、"BMI：{}"の{}に、(*bmi_state).bmi_valueを当て嵌めた文字列を生成している。

$Yew$ のhtml! $macro$ では、<h1>{"BMI calculation"}</h1>のように、{}で $HTML$ 要素内の内容を記述したり、<button onclick = {calculate_bmi} >のように、 $EventListner$ を指定したりする。( $Web$ ブラウザーから、onclick = {calculate_bmi}を直接見ることはできない)

また、html! $macro$ には、必ず一つのまとまりとして $HTML$ を指定する。html!{<p></p><div></div>}のような指定はできないため、空の<></>で一括している。

!とmacro

$Rust$ では、!の付くものを $macro$ と呼ぶ。その他、これまでに出現していた#[]も $macro$ である。関数とは異なり、 $macro$ には、 $compile$ 時に「置換される」という特性があるが、ここでは敢えて述べない。

#[function_component(App)]

この属性を付与された関数は、戻り値としてHtml型の値を返却する必要がある。また先述の通り、擬似的に $HTML$ 要素として使用できるようになる。

実行する

諸説ある実行方法だが、本記事では次の通り行う。

準備

実行にあたり、trunkを使用する。

cargo install --locked trunk

また私自身記憶が曖昧だが、wasm32-unknown-unknownを追加する必要があると思われる。

rustup target add wasm32-unknown-unknown

その他若し不足があれば、指南に従う外ない。

実行

先にも示したが、以下のようにして実行する。

trunk serve --open

--openを付すると、自動的に $Web$ ブラウザーが開かれ、127.0.0.1:8080を表示する。

作成された頁
$200\%$ 拡大画面

BMI計算例
計算例

小数点以下の処理こそしていないが、入力を基に計算できていることが確かめられた。

跋

私が $Rust$ を知り、 $Yew$ を知り、試し始めたのは丁度一年前であった。この一年間、 $Yew$ の事を考えていた時間はさして多くないとはいえ、一年前の素朴な疑問「 $JavaScript$ と同じことをするにはどうすればよいのか」を解決するまで一年が過ぎた事實には、淒涼の感を覚える。しかし、こうして攀籬の一端を整理できたことには満足している。
$Yew$ は、 $Web$ $Application$ 開発のみならず、 $Tauri$ による $Desktop$ $Application$ 開発にも応用が期待される。 $Yew$ を試す人が増え、より易しい情報が増えることをここに願う。

Discussion

ログインするとコメントできます

YewYewYewとwebwebweb-syssyssysでのWebWebWeb開発

WebAssemblyWebAssemblyWebAssemblyとYewYewYew

YewYewYewの問題

実行方法

例111

例222

開発手法

JavaScriptJavaScriptJavaScriptとwebwebweb-syssyssys

本題

RustRustRust projectprojectprojectを作り、YewYewYewとwebwebweb-syssyssysを追加する

webwebweb-syssyssysの追加

YewYewYewの追加

RustRustRustを記述する

概説

main()

use

struct BMI

構造体 BMIBMIBMI

構造体に関数を実装する

new_empty()

new_value()

calculation()

構造体に属性を付与する

fn_get_value_by_id

app()

bmi_state

無名関数

calculate_bmi

無名関数

html!

#[function_component(App)]

実行する

準備

実行

跋

Discussion

$Yew$ と $web$ - $sys$ での $Web$ 開発

$WebAssembly$ と $Yew$

$Yew$ の問題

例 $1$

例 $2$

$JavaScript$ と $web$ - $sys$

$Rust$ $project$ を作り、 $Yew$ と $web$ - $sys$ を追加する

$web$ - $sys$ の追加

$Yew$ の追加

$Rust$ を記述する

`main()`

`use`

`struct BMI`

構造体 $BMI$

`new_empty()`

`new_value()`

`calculation()`

`fn_get_value_by_id`

`app()`

`bmi_state`

`calculate_bmi`

`html!`