最近、Vue や Nuxt、Nuxt UI を触れていて、「色々作れそうだな」と思うことが増えてきました。
一方で、JS の型システムがガバガバすぎて、Rust が恋しくなってきました。 そこで、WASM の存在を思い出し、Rust の強みを活かせる仕組みを急遽作ることにしました。

experiments-wasm-vue について

このリポジトリでは、Rust を WASM としてコンパイルし、Vue と連携する試みを行いました。
内容としてはシンプルで、BMP パーサーを作る際にお世話になった nom を活用し、四則演算パーサーを作ったものです。
当初、外部ライブラリを使うと WASM のコンパイルが難しいかと思っていましたが、入出力が絡まない処理なら問題なく通ることが分かりました。
LLVM が適切に変換してくれるらしく、「まじか…？」と驚きつつも、その柔軟さに感動しました。

リポジトリのリンク:

• experiments-wasm-vue
• 動作を見てみる

Vue の環境構築と WASM の連携

Vue の開発環境は Vite を使ってセットアップしました。 そのため、通常の Vue 開発とは少し異なり、Vite の設定にも気を配る必要がある点がポイントになります。
また、今後は Nuxt への連携も視野に入れているのですが、ここで引っ掛かったのが WASM を Node.js のモジュールではなく、Web サイトとして使える形式にビルドすることでした。
どーやら通常の HTML 同様の紐付け方をすれば OK らしい？ということが分かったので、今回はそうしました。

Nuxt のディレクトリ構造と WASM の管理方法

Nuxt4 から、主要なコンポーネントのディレクトリが/app に集約されるようになるそう。 なので、同じプロジェクト内で/wasm ディレクトリを作り、WASM のコードを管理するのが良さそうだと考えています。
まだ検証の余地はありますが、この方法なら Vue/Nuxt のコンポーネントと適切に連携できそうなので、今後試していきたいと思います。

今後の展望—ランタイムの構想

WASM の可能性を探る中で、「Web ブラウザ上で動く独自ランタイムを作ってみたい」とも考え始めました。
カーネルレベルの設計とまではいきませんが、例えば：

• ブラウザ内で動く軽量な仮想環境
• WASM の能力をフル活用できる処理オフロード
• Rust の型安全性を生かしたスクリプト実行システム

こういうの作ってみたいなって願望を持ってます。願望です。はい。

まとめ

wasm はいいぞ