Rust で WebAssembly で Hello World

WebAssembly(wasm) はモダンなウェブブラウザーで実行できる新しいタイプのコードです。

ネイティブに近いパフォーマンスで動作するコンパクトなバイナリー形式の低レベルなアセンブリ風言語です

これを Rust から生成して、ブラウザで Hello World を表示させる手順です。

macOS Catalina で動作確認済みです。

Rust をインストール

% curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Rust のバージョン確認

% rustc -V
rustc 1.46.0 (04488afe3 2020-08-24)

wasm のテンプレートを作成する cargo generate というサブコマンドを
利用できるようにするために cargo-generate をインストールします。

Cargoは、Rustのビルドシステム兼、パッケージマネージャです。
Rustを入れるとCargoもセットでインストールされます。

cargo-generate をインストール

% cargo install cargo-generate

cargo generate で wasm のテンプレートを生成

% cargo generate --git https://github.com/rustwasm/wasm-pack-template

プロジェクト名を聞かれるので例えば
test_rust_wasm
と入力

Rust で npm パッケージ、 wasmを構築するためのツールである
wasm-pack のインストール

% curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

wasm-pack のバージョン確認

% wasm-pack -V
wasm-pack 0.9.1

% cd test_rust_wasm

ビルドします

% wasm-pack build --dev

npm を使うので node.js をインストールします。

% brew install node

package.json を生成

% npm init wasm-app www

% cd www

node_modules にライブラリをインストールします

% npm install

起動します

% npm run start

ブラウザで localhost:8080 にアクセスして
以下のように表示されれば ok です。

本サンプルは以下の書籍を参考にしました。

プログラミング言語Rust入門

RustではじめるWebAssembly入門～JavaScriptを超える高速なWebアプリ開発を実践しよう – 2021/8/4
https://codezine.jp/article/detail/14567

コメント