🔖

WebAssemblyで遊びたい!準備編

2025/02/20に公開

こんにちは!kirigayaです。
WebAssemblyで遊んでいこうと思います。
この記事は環境構築だけです。
遊ぶ理由としては面白そうだったから...これしかありません。
参考にした本はこちら
https://learning.oreilly.com/library/view/rusttowebassemblyniyorugemukai-fa-an-quan-gao-su-puratutohuomufei-yi-cun-nowebapurikai-fa-ru-men/9784814400393/

さっそく遊び場(環境)の構築からやっていきます。
OSはmacです。
最初はRust以外必要ないと思っていました...
Node.jsが必要のようです。
Node.jsとはJavaScriptの実行環境のことです。
Node.jsのバージョンを複数管理できるnvm(Node Version Manager)という管理ツールをインストールします。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

ターミナルを再起動して、インストールされていることを確認する。

command -v nvm

Node.js(LTS(Long Term Support))をインストール

nvm install --lts --latest-npm
nvm alias default 'lts/*'

※Rustが入っていない人はインストール

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

pythonなどを触っている人は仮想環境は?と思うかもしれないですがNode.jsもRustも衝突しないよう独自の環境を作成することができます。Dockerなどは必要ないです。

続いて作業したいディレクトリに移動してRust webpackテンプレートを作成します。

npm init rust-webpack

🦀 Rust + 🕸 WebAssembly + Webpack = ❤️
Installed dependencies ✅

無事、プロジェクトが出来ました。

依存パッケージをインストールする

npm install

サーバーの起動

npm run start

起動できたらCargo.tomlファイルの中身を下記に書き換える

[package]
edition = "2021"
wasm-bindgen = "0.2.78"
[dependencies.web-sys]
version = "0.3.55"
[dev-dependencies]
wasm-bindgen-test = "0.3.28"
futures = "0.3.18"
js-sys = "0.3.55"
wasm-bindgen-futures = "0.4.28"

いらない行を削除する

[target."cfg(debug_assertions)".dependencies]
console_error_panic_hook = "0.1.5"

新たに追加する

[dependencies]
console_error_panic_hook = "0.1.7"

これで準備完了
おつかれさまでした...

岩田組

Discussion