🔖
WebAssemblyで遊びたい!準備編
こんにちは!kirigayaです。
WebAssemblyで遊んでいこうと思います。
この記事は環境構築だけです。
遊ぶ理由としては面白そうだったから...これしかありません。
参考にした本はこちら
さっそく遊び場(環境)の構築からやっていきます。
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