Rust(Yew) vs JavaScript(React) — マンデルブロ集合で実測したWebAssemblyのリアルな速度差
はじめに こんにちは！株式会社ミラボでエンジニアとして働いている 梅澤 です。 「WebAssembly は速い」「Rust + WASM ならフロントエンドのパフォーマンス問題は解決」——そんな話を一度は聞いたことがあるのではないでしょうか。私もその一人で、実際に手を動かして確かめてみたくなりました。 そこで、フラクタル図形の代表であるマンデルブロ集合を題材に、React + JavaScript と Yew + Rust(WebAssembly) で同じ仕様のアプリを作り、Web Worker × 4 の並列計算で公平に性能比較してみました。 結論を先に言うと、想定通りには行きませんでした。 むしろ、その「想定外」こそが本記事の核になります。 ❌「Rust + WASM は JS より圧倒的に速い」とは限らない ✅ 同じ条件で比較すると 10〜20% 程度の差 に落ち着く 🪤 そして
Rust+Wasmで爆速ライフゲームを作って動く壁紙にする
はじめに Rust と WebAssembly（Wasm）の学習として、コンウェイのライフゲームを作成しました。 ただブラウザで動かすだけでは面白くないので、Windows の「Lively Wallpaper」を使って、自分のデスクトップ壁紙としてヌルヌル動かすところまでをゴールにしています。 成果物はこんな感じです ライフゲームが動いてる図 1000×1000 を超える巨大なグリッドでも 60fps で動作します。 この記事では、Rust によるロジック実装、特に JavaScript（以下JS）と Wasm 間での配列受け渡しをゼロコピーにする最適化と、それを Lively Wallpaper に組み込む手順を紹介します。 なぜ Rust + Wasm なのか？ ライフゲームのような計算集約型の処理は、セル数が数万〜数十万になると、純粋な JS では厳しくなってきます。 例えばフルH
rustwasm の各プロジェクトがどうなったか調べる（2025-08-10 時点）
2025年7月21日、 Inside Rust Blog にて GitHub の rustwasm organization をアーカイブすることが発表されました。rustwasm 配下の各リポジトリは移管またはアーカイブされ、その後9月ごろには rustwasm organization 自体もアーカイブされます。 本稿では、 rustwasm で管理されていたリポジトリ群が2025年8月10日現在どうなっているのか調べてみました。 アーカイブに至った経緯 元のブログでも説明がありますが、そもそも rustwasm がアーカイブされるに至った経緯を日本語で要約してまとめておきます。 まず、Rust and WebAssembly Working Group は 2018 年に創設されました。wasm-bindgen や wasm-pack といったツールは同グループの活動の一環として開発
WebAssemblyはJavaScriptの何倍速く動くのかベンチマークしてみた。
近年のWebアプリケーションは、単なる情報表示にとどまらず、複雑なデータ処理や高度な計算処理を必要とするケースが増えています。TypeScriptは型安全性と優れた開発体験でフロントエンド開発の標準となりつつありますが、パフォーマンスが重要な処理においては限界に直面することもあります。 一方、WebAssembly（以下Wasm）は、ブラウザ上で動作する低レベルなバイナリフォーマットとして、ネイティブに近いパフォーマンスを実現する技術です。C++やRustなどの言語からコンパイルされ、JavaScriptとシームレスに連携できるため、Web開発の可能性を大きく広げています。 しかし、「いつ、どないな場合にWasmを導入すべきなんか」「導入コストに見合う性能向上が得られるんか」といった疑問に対する実践的な回答は、まだ共有が不十分です。 この記事では、大規模データ処理に焦点を当て、TypeSc
Rust on WebAssemblyでマルチスレッド用のMutexを使う
偽物のMutex Rust + WASM (wasm32-unknown-unknown等)でstd::sync::Mutexを使うと、表面上コンパイルは通るがその中身はシングルスレッド専用のものとなってしまう。 具体的には、Mutexの二重ロックを試みると単純にpanicするようになっている。(実装) なぜこうなっているのかといえば、そもそもWebAssemblyは基本シングルスレッドで動くものだからで、マルチスレッドを想定する必要もないからということだと思われる。 一方、最近のWASMランタイムではshared memoryがサポートされてきており、これとWebWorker等を組み合わせることで一応マルチスレッドは実現可能となっている。このような場合に上記のようなシングルスレッド用のMutexを生成されても役に立たないので、これをどうにかしてマルチスレッド用のものに切り替えてみる。 W
Hyperlight Wasm: Fast, secure, and OS-free - Microsoft Open Source Blog
Last fall the Azure Core Upstream team introduced Hyperlight: an open-source Rust library you can use to execute small, embedded functions using hypervisor-based protection. Then, we showed how to run Rust functions really, really fast, followed by using C to run Javascript. In February 2025, the Cloud Native Computing Foundation (CNCF) voted to onboard Hyperlight into their Sandbox program. We’re
Hello, world! with Wasm Component（ライブラリー編）
前回までのあらすじ： cargo-componentを使ってWebAssemblyコンポーネント（Wasmコンポーネント）を作りました Wasmtimeで実行しました wasm-toolsを使って作成したコンポーネントのワールドを出力しました 今回の内容： WebAssembly Interface Type（WIT）を使ってWasmコンポーネントのインターフェースを定義します wit-bindgenの力を借りつつ、インターフェースをRustで実装します 実装したWasmコンポーネントをコンポーネントレジストリーに登録します。 用意するもの Rustのツールチェーン cargo-component Wasmtime wasm-tools 前回作成したhello-wasm-cliプロジェクト hello-wasm-cliプロジェクトは次のようなフォルダー構成をしています： . ├── Car
Hello, world! with Wasm Component
TL;DR cargo-componentを使うと、Wasmコンポーネントを作成するためのRustプロジェクトを作成できます 作成したWasmコンポーネントはWasmtimeを使って実行できます 作成したWasmコンポーネントはwasi:cli/runインターフェースを実装しています 必要なツール 必要なツールは次の4つです。 Rustのツールチェーン cargo-component Wasmtime wasm-tools Rustのツールチェーンはこちらに説明があります。 cargo-component cargo-componentは、Wasmコンポーネントの管理を行うためのRustのパッケージ管理ツールであるCargoのサブコマンドです。今回はプロジェクトの作成とビルドに利用します。 cargo-componentはCargoを使ってインストールできます： Usage: cargo
MoonBit が WebAssembly 時代の理想(の原型)だった
最近 moonbit という言語を知ったのですが、これが調べれば調べるほど好きになる言語だったので、紹介させてください。 文法的には GC 付きの Rust で、 WebAssembly にコンパイルされます。とくに CDN Edge Worker 上での実行を想定しているようです。もう好き。 注意: まだ若い言語なので、これから言語仕様がガンガン変わっていくと思われます。あくまで現時点での情報です。 tl;dr Pros だいたい GC あり Rust と捉えていい 文法面のキャッチアップが容易 ライフタイムの難しさを考えなくていい すでに vscode 拡張やパッケージマネージャ等のエコシステムが整っている Cons まだ安定していない / しばらくはソースコードが公開されない 現時点では学習リソースやパッケージ数が足りず、書き手の腕力が求められる はじめに: JS/TS/Rust へ
RustによるマクロサービスフレームワークSpin入門
この記事はAdvent of Spin 2023というオンラインチャレンジに参加した結果してSpinに入門した結果のまとめとなっています。学んだことのまとめですが、Spin入門としても利用いただけるかなとも思っています。 TL;DR マクロサービスフレームワークのSpinをつかって、Rustでマイクロサービスを作ります。 JSONのやり取りや、key-valueストアの利用、ルーティングがカバーされています。 Hurlというツールを使ってテストファースト開発します。 Spinとは？ Spinとはマイクロサービスを作成するためのフレームワークで次の特徴があります。 イベント駆動型のフレームワーク HTTP(S)とRedisにデフォルトで対応 いくつかのストレージに標準で対応 イベントハンドラーはWasmコンポーネントとして実装される WASI preview 2に対応 開発元が配布しているコ
wasi-sdk,wit-bindgenとjcoでWebPに対応した画像diff wasm componentを作成する
Visual Regression Test をサポートする reg-actions をリリースしたという記事のTODOとして挙げたのだが、reg-viz/reg-cliのwasm化とwebp対応を進めたいと思っていた。 今回はその第一歩として画像diffライブラリのwebp/wasm化対応と、その際に躓いた内容などを記載する。 TL;DR webpをサポートした画像diffライブラリをRustで書き、wit-bindgenとjcoでnode.js,denoから使用できるようにした webpのサポートにはlibwebpを使用した 当初はwasm32-unknown-emscriptenで進めていたがComponent化で問題が発生した wasi-sdkを利用し、wasm32-wasiにtargetを変えることでimportをwasi_snapshot_preview1に揃えることで上記を回
Announcing WinterJS · Blog · Wasmer
Announcing WinterJSThe most performant JavaScript Service Workers server thanks to Rust and SpiderMonkey Follow up the WinterJS series reading about the recent production-ready WinterJS 1.0 release here. Today we are incredibly excited to announce WinterJS (wasmer/winterjs package). WinterJS is a JavaScript Service Workers server written in Rust, that uses the SpiderMonkey engine to execute JavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - niklabh/oxide: A binary native browser in rust
GitHub - n1ght-hunter/igloo
GitHub - ratatui/ratzilla: Build terminal-themed web applications with Rust and WebAssembly. Powered by Ratatui.
GitHub - nttcom/moq-wasm
Rust and WebAssembly Microservices - Michael Yuan
Lapce is a Native Open-Source Code Editor Written in Rust and Supporting Remote Development
Redirect
GitHub - sunfishcode/hello-wasi-http