簡単に言うとResult型みたいなやつを使いたいという話です。Rust,Scala,Elm,moonbitあたりで検証します。

フロントエンド編

普段使用しているスタック

まずは普段使用しているスタックの代替となるライブラリや機能について探していきます。

ライブラリ	目的としている機能	Rustエコシステム標準搭載
React	コンポーネントベースの開発	x
tanstack-query	データフェッチ時の状態管理	x
ts-results	リザルト型	o
zod	データフェッチング時のResponseのparseに使う	x
eslint	linter	o
prettier	formatter	o
testing-library	コンポーネントのみでレンダリングし、さらにそのレンダリング結果へアクセスし検証する機能	x
vitest	テストを書く機能	o
MUI	楽に使えるUIライブラリ	x
FetchAPI	データフェッチング	x

こうしてみてみるとRustのエコシステムの優秀さ、後発ならでは名の良さがよくわかります。というわけで標準搭載ではない以下のライブラリの代替を探していきます。

データフェッチング周り
React
testing-library
UIライブラリ

データフェッチング周り

一般的にwasmからブラウザのAPIを操作するときはweb_bindgenを使うみたいです。
フェッチングの例 (https://rustwasm.github.io/wasm-bindgen/examples/fetch.html を少し変えました)
api.github.comから{name: string}を取得してResponseData {name: string}にする例です。
zod.parseの代わりにserde_wasm_bindgenが使えるイメージです。parseした結果がresultで帰ってくるのもうれしいですね。

use serde_wasm_bindgen;
use wasm_bindgen::prelude::*;
use wasm_bindgen_futures::JsFuture;
use web_sys::console;
use web_sys::{Request, RequestInit, RequestMode, Response};
extern crate serde;
use serde::{Deserialize, Serialize};

#[derive(Debug, Serialize, Deserialize)]
struct ResponseData {
    name: String,
}

#[wasm_bindgen]
pub async fn run(repo: String) -> Result<(), JsValue> {
    // JSのRequestInitを再現したオブジェクトの作成
    let mut opts = RequestInit::new();
    // メソッドの設定
    opts.method("GET");
    // モードの設定
    opts.mode(RequestMode::Cors);

    // URLの作成
    let url = format!("https://api.github.com/repos/{}/branches/master", repo);

    // RequestInitとURLを使ってRequestオブジェクトを作成
    let request = Request::new_with_str_and_init(&url, &opts)?;

    // ヘッダーの設定
    request
        .headers()
        .set("Accept", "application/vnd.github.v3+json")?;

    // web sysを使ってwindowオブジェクトを取得
    let window = web_sys::window().unwrap();

    // window.fetch_with_request(&request)
    // FetchAPIのFetch関数はfetch_with_requestメソッドで呼び出し

    // JsFuture::from(window.fetch_with_request(&request))
    // JsFutureでPromiseをFuture(RustのPromiseみたいなの)に変換

    // JsFuture::from(window.fetch_with_request(&request)).await?;
    // awaitでPromiseの結果を待つ

    // resp_valueにはPromiseのresolveされた値が入るが、この時点ではJsValueというJsから来た型がわからない値になっている
    let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;

    // JsValueがResponse型に変換できるか確認
    assert!(resp_value.is_instance_of::<Response>());
    // JsValueをResponse型(ここでいうResponse型はWasm側が用意したJSライクなオブジェクトのこと)に変換
    let resp: Response = resp_value.dyn_into().unwrap();

    // Responseから値を取り出しす
    // またここでもJsFutureを使ってPromiseをFutureに変換している
    let json = JsFuture::from(resp.json()?).await?;
    let object: ResponseData = serde_wasm_bindgen::from_value(json).unwrap();
    console::log_1(&object.name.into());

    // Send the JSON response back to JS.
    Ok(())
}

}

Reactの代替

Dioxus

DioxusはReactみたいな感じで、コンポーネント思考で仮想DOMをいじれるSSR対応のRustライブラリです。
tailwind.cssを使うテンプレートも用意されており、Tauriと組み合わせたGitHubリポジトリもあり、Tauriのフロントエンドとしてよさそうです。
またReact-RouterのようなものもありしっかりSPAできそうな気がします。
とりあえずは先ほど実装してみたデータフェッチング込みで適当なアプリケーションを作っていきます。
想定外だったんですけど、どうやらFetchAPIを通さなくてもrequwestでデータフェッチングできるみたいです。

#![allow(non_snake_case)]
use dioxus::prelude::*;
use reqwest;
use serde::{Deserialize, Serialize};
use tracing::Level;

#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
    #[route("/")]
    Home {},
}

fn main() {
    dioxus_logger::init(Level::INFO).expect("failed to init logger");
    launch(App);
}

fn App() -> Element {
    rsx! {
        Router::<Route> {}
    }
}

#[component]
fn Home() -> Element {

    let data = use_resource(|| async move {
        reqwest::get("https://api.github.com/repos/rustwasm/wasm-bindgen/branches/master")
            .await
            .unwrap()
            .json::<ResponseData>()
            .await
    });

    rsx! {
        div {
            match &*data.read_unchecked() {
                Some(Ok(data)) => rsx!{div { "Data: {data.name}" }},
                Some(Err(_)) => rsx!{div { "Err" }},
                None => rsx!{div { "Loading..." }}
            
            }
        }
    }
}

#[derive(Debug, Serialize, Deserialize)]
struct ResponseData {
    name: String,
}

tanstack-queryのisLoadingとかそういうのがmatchで判定できるのがうれしいところですね。
ただcacheing周りがどうなるかはよくわかってないので要調査です。

フロントエンド編

普段使用しているスタック

データフェッチング周り

Reactの代替

Dioxus

Yew

関数

メソッド

クラス

ケースクラス

オブジェクト

トレイト

クラス

コンストラクタ

プライベートメンバーとゲッターセッター構文

型のみでのマッチング

コンパニオンオブジェクト

Moonbit

本当に移行する必要があるのか？

Rust

Elm

Scala

moonbit