Yew - RustでReactライクなフロントエンド開発ができるWebAssemblyフレームワーク

はじめに

フロントエンド開発といえばJavaScriptやTypeScriptが主流ですが、最近はRustを使ったWebAssembly開発にも注目が集まっています。その中でも特に人気なのが今回紹介する「Yew」というフレームワークなんですよ。

Yewは、RustでReactライクなコンポーネント指向のWebアプリケーションを構築できるフレームワークです。GitHubスター数は32,000を超えていて、Rust製フロントエンドフレームワークの中では一番人気と言っていいと思います。

正直なところ、「RustでWebフロントエンド？」と思う方もいるかもしれません。でも、パフォーマンスを追求したい場面や、すでにRustのバックエンドがある場合には、かなり魅力的な選択肢になるんですよね。

Yewの特徴・メリット

1. JSXライクなマクロ構文

Reactを使ったことがある人なら、ほぼ違和感なく書き始められます。htmlマクロを使ってJSXのような書き方ができるんですよ。

html! {
    <div class="container">
        <h1>{ "Hello, Yew!" }</h1>
        <button onclick={ctx.link().callback(|_| Msg::Click)}>
            { "クリック" }
        </button>
    </div>
}

この記法、Reactに慣れてる身からすると本当にありがたいですね。

2. 高いパフォーマンス

WebAssemblyにコンパイルされるので、JavaScript製のフレームワークと比較して高速に動作します。特に重い計算処理がある場合、体感できるレベルで違いが出ることがあります。

また、DOMの更新を最小限に抑える仕組みや、Web Workersへの処理オフロードもサポートしていて、パフォーマンス最適化がしやすいんですよ。

3. 型安全性

これ、個人的にはかなり大きいポイントです。Rustの型システムがそのまま使えるので、コンパイル時点でかなりのバグを潰せます。TypeScriptも良いですが、Rustの型システムの堅牢さは一段上だと感じています。

4. SSR対応

SEOが重要なサイトでも使えるように、サーバーサイドレンダリングにも対応しています。SPAの使い心地とSEO対策を両立できるのは嬉しいですね。

5. JavaScript相互運用

既存のNPMパッケージを活用したり、JavaScriptのコードと連携したりすることも可能です。すべてをRustで書き直す必要がないので、段階的な移行もできます。

インストール方法

前提条件

まずRustが必要です。Yewは最低でもRust 1.84.0以上が必要なので、古いバージョンを使っている方はアップデートしてください。

1. Rustのインストール

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

2. WebAssemblyターゲットの追加

ブラウザで動かすためのコンパイルターゲットを追加します。

rustup target add wasm32-unknown-unknown

3. Trunkのインストール

Yewでは「Trunk」というバンドラーツールの使用が推奨されています。

cargo install --locked trunk

これで準備完了です。wasm-packなど他のツールも使えますが、Trunkが一番シンプルで使いやすいと思います。

基本的な使い方

プロジェクトの作成

cargo new yew-app
cd yew-app

Cargo.tomlの設定

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

[dependencies]
yew = { version = "0.21", features = ["csr"] }

index.htmlの作成

プロジェクトルートにindex.htmlを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yew App</title>
</head>
<body></body>
</html>

src/main.rsの実装

use yew::prelude::*;

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

    html! {
        <div>
            <h1>{ "カウンターアプリ" }</h1>
            <p>{ format!("現在のカウント: {}", *counter) }</p>
            <button {onclick}>{ "+1" }</button>
        </div>
    }
}

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