🗂

RustとWASMでフロントエンド開発してみたら、意外と現実的だった話

に公開
Rust
WebAssembly
frontend
Dioxus
開発ツール
tech

最近Redditでこんなコメントを見かけました：

“I hate JS. I’ve done the HTML and CSS, but I’m stuck. I want to use Rust instead.”

正直、すごく共感しました。長年JavaScriptを使ってきて、特に大規模な開発では「型がない」「ツール壊れる」「謎エラー多い」と疲れることもしばしば…。

そこでふと考えました。
Rust + WASM（WebAssembly）でフロントエンド開発って、現実的に使えるのか？

この記事では、実際に小さなプロジェクトで試してみた体験と、よかった点・つらかった点をシェアします。

Rustでフロントエンドって技術的に可能？

はい、技術的には可能です。RustはWASMへコンパイルできるので、ブラウザ上で直接Rustのコードを動かすことができます。

主なフレームワーク：

  • Yew：Reactライクな構文。比較的成熟。
  • Dioxus：マルチプラットフォーム対応。活発なコミュニティ。
  • Sycamore：SolidJSのような高速差分レンダリングが特徴。

主なビルドツール：

  • wasm-pack：npmパッケージを作るのに便利。
  • trunk：Viteのようにホットリロードとビルドに対応。
  • cargo-leptos：Leptos向けの統合ツール。

実際に開発してみた感想

✅ よかった点：

  • 型安全と静的解析：安心感がすごい。
  • 性能：大規模なデータ処理やグラフ描画はJSよりスムーズ。
  • 構造が明快：状態管理やUIロジックがRustらしく整理されている。

⚠️ つらかった点：

  • 学習コスト：Rust + WASMのツールチェインは複雑。デバッグも一苦労。
  • DOMとの連携：WASMから直接DOMは触れず、JS経由が必要。ここがボトルネック。
  • エコシステムの未成熟さ：UIコンポーネントライブラリが少ない。

ローカル開発環境の改善に「ServBay」が便利

Rust + WASMの開発では、ローカルサーバーの立ち上げやHTTPS対応が地味に面倒です。
そんな時に役立つのが ServBay です。

元々はPHPやNode.js向けの開発ツールですが、静的HTML＋WASMでも快適に使えます。

💡 ServBayのメリット：

  • ✅ 自動HTTPS対応 → ブラウザのセキュリティ制限を回避
  • ✅ サーバー設定不要 → nginx不要、ポート設定も不要
  • ✅ Windows対応済み

TrunkなどでWASMアプリをビルドして、ServBayのWebサーバーにディレクトリを指定するだけで、即座にhttps://localhostで確認できます。

Rustを使うのに向いてるケース／向かないケース

向いている：

  • データビジュアライゼーション、計算負荷の高いUI
  • 組み込みWebUI（IoTデバイスなど）
  • Rustバックエンドと統一したいとき

向かない：

  • JSエコシステムに強く依存するUI（既存のライブラリなど）
  • チームで高速開発したい時（Rustの習熟度が求められる）
  • SEOやアクセシビリティ重視のWebサイト

WASM × Rustの未来は？

まだ“主流”とは言い難いですが、将来的には以下のような進化が期待できます：

  • Interface Types提案 → JSとの連携がもっと簡単に
  • GC対応 → DOMを直接扱える日も近い
  • Dioxusなどの成長 → 開発体験がさらに良くなる

まとめ

Rust + WASMは今すぐにJSを「完全に置き換える」わけではありませんが、特定のニーズには確実にフィットします。

まずは小さなプロジェクトから試してみては？
ServBay のようなツールを使えば、驚くほど簡単にRustフロントエンドのプロトタイプを作れます。

💬 あなたはRustでフロントエンド開発したことがありますか？

ぜひコメントで体験談や意見を教えてください 🙌
推广呢？

Discussion