Vue × WASM × Rust—試行錯誤とこれからの展望

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

experiments-wasm-vue について

warning

本リポジトリは現在修復作業中です... なぜmainに手を加えたしとか、絶対に言っちゃダメですからね？

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

リポジトリのリンク:

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はいいぞ

参考など