min117の日記

初期desireもち。趣味Mac,メインFedora,仕事xp。

Rust + Wasm のサンプルを試す →「Hello World 足し算結果」を表示する

ハピタス登録で1,000円分になるURL

その買うを、もっとハッピーに。|ハピタス

 

Wasm ハンズオン

wasmbyexample.dev

 

$ cargo install wasm-pack

$ cargo init

cargo init により srcフォルダと、Cargo.tomlファイルができている。

 

Cargo.toml を書き換える

$ vim Cargo.toml

 

src/main.rs を lib.rsにリネーム

$ mv src/main.rs src/lib.rs

$ vim src/lib.rs

$ wasm-pack build --target web 

$ vim index.js

10行目の 24+24 は48なので

13行目の記述により、最終的に「Hello World addResult: 48」と表示されれば成功

 

$ vim index.html

あとはここまででできたindex.htmlを公開用の自Webサーバに載せて、ブラウザからindex.htmlへアクセス

Hello World addResult: 48

表示された!

 

仕組みの確認

index.js の

7行目で呼ばれた ./pkg/hello_world_bg.wasm が

10行目の addResultを計算して結果を↑に渡している。

7行目の  ./pkg/hello_world_bg.wasm をビルドしたソースはどこかと言うと

./src/lib.rs がそれで

addというメソッド(つまりは関数fnか…)を実装している。

 

./src/lib.rs から wasm へのコンパイルは 

$ wasm-pack build --target web 

のときやっていて、バイナリであるwasmは既に完成しているわけだから

例えば

index.js の

7行目のaddの後ろを(3, 500)に書き換えてやれば、再度

$ wasm-pack build --target web 

をしなくても、即時でWebブラウザに変更が反映される。

何となくわかった。

 

このサンプルサイト英語だけど良い。続きあとでやる。

wasmbyexample.dev

 

 

min117.hatenablog.com

min117.hatenablog.com

 

 

その買うを、もっとハッピーに。|ハピタス