YewでWebアプリ作成に入門した

背景

昨今話題になっている”Rust”を勉強していた中で、何かWebアプリを作りたいなと考えていたところ、”Yew”がいい感じらしいので、Yewで簡単なWebアプリを作成しました。

使用技術

• Rust
• Yew
• HTML
• Tailwind css ※浅学もいいところでテンプレをコピペしてます

作成したアプリ

健康診断が近かったので、BMI計算アプリを作成しました。完成形は下図です。
身長、体重を入力して、「calc」ボタンを押すとBMIが計算され表示されます。

ソースコード

コードトレースをするうえで邪魔なので、CSSを除去したコードを下記に記載します。
また、コーディングで気にしたところを記載しておきます

• calcボタンの押下など、なにかアクションをしても、入力された身長、体重と過去BMI計算値は保持したいので、Stateで状態管理する
• 数値以外が入力されたときの分岐をRustで書かないために、HTMLで「input type="number"」とし、数値入力に限定させる

main.rs

//BMIを計算して表示する
use yew::prelude::*;
use web_sys::{window, wasm_bindgen::JsCast, HtmlInputElement};

//idで値を取得する関数を定義する(JSでいうところのgetElementById)
fn get_value_by_id(id: &str) -> String {
    window().unwrap()
        .document().unwrap()
        .get_element_by_id(id).unwrap()
        .dyn_ref::<HtmlInputElement>().unwrap()
        .value()
}

//BMIを計算する関数を定義する
fn calc_bmi(height: f64, weight: f64) -> f64 {
    let height_m = height / 100.0;
    let bmi = weight / height_m.powf(2.0);
    return bmi;
}



#[function_component(App)]
fn app() -> Html {

    //bmiのステートを管理する
    let bmi = use_state(|| 0.0_f64);
    let element_height = use_state(|| 0.0_f64);
    let element_weight = use_state(|| 0.0_f64);

    //「calc」ボタンを押したら、コンソールに身長、体重を表示させる
    let click_button = {
        let bmi = bmi.clone();
        let element_height = element_height.clone();
        let element_weight = element_weight.clone();

        move |_| {
            let height_by_element = get_value_by_id("height");
            let weight_by_element = get_value_by_id("weight");
            let result = calc_bmi(height_by_element.parse().unwrap(),
                                  weight_by_element.parse().unwrap());
            element_height.set(height_by_element.parse().unwrap());
            element_weight.set(weight_by_element.parse().unwrap());
            bmi.set(result);
        }

    };

    html! {
        <>
            <h1>{ "YOUR BMI" }</h1>
            <form>
                <label for="height">{"height:"}</label>
                    <input type="number" step="0.01" id="height" value={format!("{}",*element_height)}/>
                <label for="weight">{"weight:"}</label>
                    <input type="number" step="0.01" id="weight" value={format!("{}",*element_weight)}/>
                <button type="button" onclick={ click_button }>{"calc"}</button>
            </form>
            <div>{ format!("BMI : {:.2}", *bmi) }</div>
        </>
    }
}

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

終わりに

今回でHTML要素の値を取得、更新、コールバックの作成など、基本的なWebアプリの仕組みをRustで書く方法をキャッチアップできました。まだまだRust言語、私自身ともに発展途上なので、知見を深めていければと思います。