この記事は playpark Blog からの転載です。
この記事で分かること
- フロントエンドもRustで書く判断に至った理由
- Yew / React / Leptos の比較と選定基準
- Rust統一フルスタック構成のメリット・デメリット
背景: APIをRustで書いていて思ったこと
バックエンドをRocketで書いていると、フロントエンドに切り替えるたびにコンテキストスイッチが発生する。型定義もRustとTypeScriptで二重管理になる。
「フロントもRustで書けたら、全レイヤーで型が一貫するのでは？」
ちょうどRustを深く学びたいタイミングだったので、クリックしたら数が増えるだけのカウンターアプリを題材にフルスタックRustに挑戦した。
カゾエルくん — yaoyorozチームで開発中のプロジェクト。playpark LLCもチームの一員として参画。
選択肢の検討
フロントエンドをRustで書く方法はいくつかある。
| フレームワーク | 特徴 | 成熟度 | React経験者の学習コスト |
|---|---|---|---|
| Yew | React Hooks風API、コンポーネントモデル | 安定 | 低め（Hooksに似ている） |
| Leptos | シグナルベース、SSR対応 | 成長中 | 中（SolidJSに近い） |
| Dioxus | React風API、マルチプラットフォーム | 成長中 | 低め |
| Seed | Elm風アーキテクチャ | メンテナンス縮小 | 高い |
バックエンド側も同様に選択肢がある。
| フレームワーク | 特徴 | 非同期 |
|---|---|---|
| Rocket | Rails風、ガード機能、型安全DI | tokio |
| Actix Web | 高パフォーマンス、Actor モデル | tokio |
| Axum | tower ベース、Extractors | tokio |
なぜYew + Rocketを選んだか
Yewを選んだ理由:
-
React経験が活かせる —
use_state、Callback、html!マクロなど、React Hooksの知識がそのまま使える - エコシステムの安定性 — Rust WASMフレームワークの中では最も歴史が長く、ドキュメントも豊富
- 学習題材との相性 — シンプルなカウンターアプリなので、SSR不要。Yewのクライアントサイドレンダリングで十分
Rocketを選んだ理由:
-
Guard機能 — Cookie処理やDIが宣言的に書ける。
&State<T>でサービスを注入するパターンはExpressより直感的 -
マクロベースのルーティング —
#[post("/session")]のように、エンドポイント定義がコードと一体化する -
型安全なリクエスト/レスポンス —
Json<T>で入出力を型で縛れる
実装例: APIエンドポイント
#[post("/session")]
pub async fn increment_session(
cookies: &CookieJar<'_>,
redis: &State<RedisPool>,
config: &State<AppConfig>,
) -> Result<Json<SessionResponse>, Status> {
let session_id = get_or_create_session(cookies);
let count = redis.incr(&session_id).await
.map_err(|_| Status::InternalServerError)?;
let expiration = calculate_midnight_expiration();
redis.expire(&session_id, expiration).await?;
if count == 1 {
set_session_cookie(cookies, &session_id, expiration, config);
}
Ok(Json(SessionResponse { session_id, count, is_new: count == 1 }))
}
引数にGuard型を書くだけで、Cookie・Redis・設定が注入される。ボイラープレートが少ない。
まとめ: どういう場面で使うべきか
| 判断基準 | Rust統一が向くケース | 向かないケース |
|---|---|---|
| チーム構成 | Rustに慣れたチーム | フロントエンド専任がいる |
| プロダクト規模 | 小〜中規模、学習目的 | 大規模SPA（エコシステムの差） |
| 重視するもの | 型安全・パフォーマンス | 開発速度・ライブラリの豊富さ |
正直なところ、開発速度はReact + TypeScriptの方が速い。しかし「コンパイル通ればだいたい動く」「実行時エラーが激減する」という型安全の恩恵は、全レイヤーがRustで揃うことで最大化される。
Rustを深く学びたいなら、シンプルなアプリでフルスタックを試すのは良い入口だと思う。
さらに深掘りしたい方へ
この記事ではYew + Rocket構成の技術選定理由を解説しました。
【Rust】「非生産的」なWebアプリを作ってみた - Yew + Rocketフルスタック開発 ではさらに：
- Yewコンポーネントの完全な実装コードとReactとの詳細比較
- Redis→PostgreSQL二段構え永続化の設計と同期実装
- PgBouncer互換性・クロスサイトCookie・WASMビルド最適化など本番運用の落とし穴
を扱っています。
playpark について
playpark LLC - 業務自動化・AI活用・Web開発
