【Rust】Web開発フレームワーク完全ガイド - バックエンドからフロントエンドまで

Rust はシステムプログラミング言語として知られていますが、Web 開発でも利用が広がっています。バックエンドの API サーバーから、WebAssembly を活用したフロントエンドまで、幅広い Web 開発が可能です。

この記事では、Rust の Web 開発フレームワークをカテゴリ別に紹介し、どのような場面で Rust が適しているかを解説します。

Rust Web 開発の全体像

Rust による Web 開発は、大きく 3 つのカテゴリに分かれます。

バックエンドフレームワーク

Rust のバックエンドフレームワークは、高いパフォーマンスと安全性が特徴です。

Axum

Tokio チームが開発するモダンなフレームワークです。型安全な設計と Tower ミドルウェアとの互換性が特徴です。

use axum::{routing::get, Router, Json};
use serde::Serialize;

#[derive(Serialize)]
struct User {
    name: String,
    age: u32,
}

async fn get_user() -> Json<User> {
    Json(User {
        name: "太郎".to_string(),
        age: 25,
    })
}

#[tokio::main]
async fn main() {
    let app = Router::new()
        .route("/user", get(get_user));

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000")
        .await
        .unwrap();

    axum::serve(listener, app).await.unwrap();
}

Actix Web

パフォーマンスベンチマークで常に上位に位置する高性能フレームワークです。

use actix_web::{get, web, App, HttpServer, Responder};
use serde::Serialize;

#[derive(Serialize)]
struct User {
    name: String,
    age: u32,
}

#[get("/user")]
async fn get_user() -> impl Responder {
    web::Json(User {
        name: "太郎".to_string(),
        age: 25,
    })
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| App::new().service(get_user))
        .bind("0.0.0.0:3000")?
        .run()
        .await
}

Rocket

Rails のように規約ベースで、直感的に書けるフレームワークです。

#[macro_use] extern crate rocket;

use rocket::serde::{Serialize, json::Json};

#[derive(Serialize)]
struct User {
    name: String,
    age: u32,
}

#[get("/user")]
fn get_user() -> Json<User> {
    Json(User {
        name: "太郎".to_string(),
        age: 25,
    })
}

#[launch]
fn rocket() -> _ {
    rocket::build().mount("/", routes![get_user])
}

フロントエンドフレームワーク（WebAssembly）

Rust でフロントエンドを開発する場合、コードは WebAssembly（Wasm） にコンパイルされてブラウザ上で実行されます。

Leptos

現在最も活発に開発されているフレームワークです。SSR にも対応しており、フルスタック開発が可能です。

use leptos::*;

#[component]
fn App() -> impl IntoView {
    let (count, set_count) = create_signal(0);

    view! {
        <button on:click=move |_| set_count.update(|n| *n += 1)>
            "クリック: " {count}
        </button>
    }
}

fn main() {
    mount_to_body(App);
}

Yew

Rust フロントエンドの先駆けとなったフレームワークです。

use yew::prelude::*;

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

    html! {
        <button {onclick}>
            { format!("クリック: {}", *count) }
        </button>
    }
}

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

フルスタック開発

Leptos と Dioxus は、フロントエンドとバックエンドを 1 つの Rust プロジェクトで書けるフルスタックフレームワークとしても機能します。

// Leptos のサーバー関数 - バックエンドのロジックをフロントエンドから直接呼び出せる
#[server(GetUsers)]
async fn get_users() -> Result<Vec<User>, ServerFnError> {
    // この関数はサーバー側で実行される
    let users = db::get_all_users().await?;
    Ok(users)
}

#[component]
fn UserList() -> impl IntoView {
    // フロントエンドからサーバー関数を呼び出す
    let users = create_resource(|| (), |_| get_users());

    view! {
        <ul>
            {move || users.get().map(|data| {
                data.unwrap().into_iter().map(|user| {
                    view! { <li>{user.name}</li> }
                }).collect_view()
            })}
        </ul>
    }
}

Rust の Web 開発における強みと注意点

強み

注意点

Rust が適するケースと適さないケース

静的サイトには専用ツールが最適

静的サイトの場合、Rust のパフォーマンスやメモリ安全性といった強みが活きません。以下のような専用ツールが最適です。

フレームワーク選択ガイド

参考文献

• Axum - GitHub
• Actix Web - 公式ドキュメント
• Rocket - 公式ドキュメント
• Leptos - 公式ドキュメント
• Yew - 公式ドキュメント
• Dioxus - 公式ドキュメント
• Are We Web Yet?

まとめ

Rust での Web 開発は、バックエンドを中心に実用レベルに達しています。フロントエンドは Leptos を中心に急速に成長しています。選択のポイントは以下の 3 点です。

1. バックエンド API なら Axum か Actix Web。パフォーマンスと安全性を両立できる
2. フロントエンド は Leptos が現在最も活発。ただし JS エコシステムと比べるとまだ発展途上
3. 静的サイトや小規模プロジェクト には Rust はオーバースペック。Astro や Hugo など専用ツールが最適