第2部 WebAssemblyって何？
RustとVue.jsのどちらでWebを動かすべきか
60歳からRustの勉強を始めてみると、不思議な現象が起きます。
Rustそのものの勉強を始めたはずなのに、突然見慣れないカタカナや略語が大量に現れるのです。
Vue.js。
React。
WebAssembly。
Yew。
Leptos。
Dioxus。
SSR。
SPA。
CSR。
私も最初は完全に混乱しました。
WordPress中心だった頃は、
「HTML、CSS、PHP、MySQL」
という世界で十分仕事になりました。
ところがRustの世界に入ると、見たことのない単語が次々に飛び込んできます。
しかし実際には、それほど複雑な話ではありません。
この記事では、Rust、Vue.js、WebAssemblyの関係を、ゲーム好きの60歳新人Rustプログラマーの視点で整理してみたいと思います。
まずWebサイトは誰が動かしているのか
現在のWebの世界はJavaScriptを中心に回っています。
Googleマップも、Gmailも、YouTubeも、Amazonも、画面が滑らかに動くのはJavaScriptのおかげです。
ブラウザの中でボタンを押したり、情報を更新したり、画面の一部だけを書き換えたりする処理は基本的にJavaScriptが担当しています。
Web開発の基本構造を整理すると次のようになります。
↓
骨組み
CSS
↓
デザイン
JavaScript
↓
動き
長い間、この構成がWeb開発の王道でした。
そして現在もその王道は変わっていません。
Vue.jsは何者なのか
Vue.jsはJavaScriptのフレームワークです。
もっと簡単に言うなら、
「画面を作る専門家」です。
例えば次のような機能があります。
- ボタン表示
- フォーム入力管理
- メニュー表示
- リアルタイム更新
- 一覧表示
- 画面切り替え
こうしたユーザーインターフェースの構築が得意です。
↓
Vue.js
↓
画面表示
例えるなら、Vue.jsはレストランのホールスタッフです。
お客様に一番近い場所で働いています。
何が表示されるか、
どんな操作ができるか、
ユーザー体験を作る担当です。
Rustは何を担当するのか
一方のRustは少し違います。
Rustの得意分野は計算です。
- ゲームロジック
- AI処理
- 画像処理
- 動画処理
- 暗号化
- シミュレーション
つまり見た目ではなく、中身を担当します。
↓
画面担当
Rust
↓
計算担当
ここを理解すると頭の中が一気に整理されます。
Vue.jsとRustは競争相手ではありません。
役割が違うのです。
WebAssemblyという謎の単語
そして登場するのがWebAssemblyです。
略してWasm（ワズム）と呼ばれます。
名前だけ聞くと非常に難しそうです。
しかし本質はとても単純です。
WebAssemblyとは、
「Rustなどで作った高速なプログラムをブラウザの中で動かす仕組み」
です。
昔のブラウザはJavaScriptしか理解できませんでした。
↓
ブラウザ
しかし現在は違います。
↓
WebAssembly
↓
ブラウザ
という経路が使えるようになりました。
これが世界中で話題になった理由です。
なぜ世界中がWebAssemblyに注目したのか
理由は非常にシンプルです。
高速だからです。
例えば昔のスペースインベーダーを考えてみましょう。
画面上の敵は数十体。
弾も少ない。
計算量もわずかです。
ところがゲームは進化しました。
ゼビウスになり、
レイストームになり、
3Dゲームになり、
物理演算を使うようになりました。
計算量は爆発的に増えています。
そうなると、
ブラウザの中でも高速な処理が求められます。
そこでRustとWebAssemblyの組み合わせが注目されるようになったのです。
初心者がハマる最大の誤解
私自身も最初に勘違いしました。
それは、
という対立構造で考えてしまうことです。
しかし本当は違います。
レストランで考えてみる
レストランを想像してください。
Vue.jsはホールスタッフです。
- お客様を案内する
- 注文を受ける
- 料理を運ぶ
ではRustは何でしょう。
厨房です。
- 調理する
- 下ごしらえする
- 仕込みを行う
そしてWebAssemblyは、
ホールと厨房をつなぐ通路です。
↓
画面表示
WebAssembly
↓
橋渡し
Rust
↓
高速計算
これが一番分かりやすい関係だと思います。
RustだけでWebアプリは作れないのか
もちろん作れます。
近年は次のようなRust製フレームワークが成長しています。
- Yew
- Leptos
- Dioxus
これらを使えば、Web画面そのものもRustで作れます。
プログラマーとしては非常に魅力的です。
言語を一つに統一できるからです。
しかし初心者には少し難しい世界でもあります。
まずRust本体を学ぶだけでも十分大変だからです。
私ならこう学ぶ
60歳から始めるなら、私は王道ルートを選びます。
↓
CLIアプリ
↓
簡単なゲーム
↓
Bevy
↓
WebAssembly
↓
Vue.js連携
この順番なら無理がありません。
いきなり全部を覚えようとすると確実に混乱します。
まずRustを楽しむ。
ゲームを作る。
その後でブラウザに持っていく。
これが一番自然な流れだと思います。
それでもWasm一択ルートにはロマンがある
とはいえ、Rust好きとしては憧れてしまいます。
全部Rustで作りたい。
JavaScriptを使わずにWebアプリを書きたい。
そう考える気持ちはよく分かります。
なぜなら私たちがゲームセンターでインベーダーやゼビウスに夢中になっていた頃、
ブラウザでゲームが動く未来など想像もできなかったからです。
その夢が今では現実になっています。
Rustで書いたコードがブラウザで動く。
ゲームまで動いてしまう。
これは技術者として純粋にワクワクする出来事です。
まとめ
Rustを学び始めると、多くのカタカナ用語に出会います。
しかし最初に覚えるべき本質はシンプルです。
＝画面担当
Rust
＝計算担当
WebAssembly
＝橋渡し役
まずはこの関係だけ理解すれば十分です。
そして60歳からRustゲーム開発に挑戦するなら、
焦って全てを学ぶ必要はありません。
まずRustを楽しむこと。
ゲームを作ること。
その先にWebAssemblyがあります。
結局のところ、WebAssemblyとは流行りの技術用語ではありません。
「自分で作ったRustのゲームを、いつかブラウザで動かしたい」
そんな夢を実現するための橋なのです。