WASM と RUST と Vite で開発をする準備

前提にしてること

この記事ではまだ開発するために未成熟なところが見られるrust+wasm+viteの開発環境をすこしシェルスクリプトを活用して、簡単に扱えるように準備するところから始める。

そこで、最初に前提とする環境はWindowsのWSLあるいはMac, Linuxを想定しています。難しい言葉で言うとPOSIX準拠の環境でなおかつbash/zshで扱うことを想定しています。残念ですが、windows/powershellでは使えないということです。

まず最初に、必要となるものは次のとおりです。

• rustの開発環境 cargo : cargo が使えること
• javascriptの開発環境 node.js : npm が使えること

この２つがすでに入ってることを前提にしていますので、入れてないのならまず最初にこの２つをあなたの環境にインストールしてください。それぞれのインストール方法は他のサイトを参考にしてね。

つぎに、シェルスクリプトを扱う上でのことです。作るスクリプトは ~/bin においておくことを前提で作っていますので、
~/.bashrc あるいは ~/.zshrc の最後に次のコードをつけてください。ただし、ここでつけ忘れてもwasm-setupで環境変数WASM_BASEを書き加えるようにしてありますが、$PATHに~/binを追加することは忘れないでください。

# 1. ターミナルの設定ファイルを開く（例: ~/.bashrc や ~/.zshrc）
# 2. 以下の設定を末尾に追記して、開発の「光の道筋」を通す

# WASMプロジェクトの総本山
export WASM_BASE="$HOME/projects/wasm"

# 自作スクリプト（wasm-build等）へのパス
export PATH="$HOME/bin:$PATH"Code language: Bash (bash)

このあと

$ source ~/.bashrc # あるいは ~/.zshrcCode language: JavaScript (javascript)

としておいてください。

次はあなたのユーザーディレクトリに実行ファイル専用のディレクトリを置くためです。もし~/binがないのならbinディレクトリを作ってください。

$ cd ~
$ mkdir bin
$ chmod 700 bin
$ cd bin

として、binディレクトリに移動してください。chmodで700としているのはあなた以外にはbinディレクトリを見ることをできないけど、あなたが読み書き実行ができるという設定です。べつに700を755でも差し支えありません。WSL環境では微妙に動作に問題がある場合も出てくるそうですその時にはこのことをヒントにしてください。（未確認）このbinディレクトリを作ってパスを通してパーソナルな実行ファイルを置くのはunix系の昔からの作法です。

シェルスクリプト wasm-setup を作る

次にwasm-setupファイルを作ります。以下のスクリプトをコピペしてください。トラブルシューティングも下に書いてあるのでそちらも読んでください。

#!/bin/bash
set -e

# 環境変数WASM_BASE を ~/.bashrc あるいは ~/.zshrcにつける
TARGET_DIR=${1:-$HOME/projects/wasm}
CONF_FILE=$([[ $SHELL == */zsh ]] && echo ~/.zshrc || echo ~/.bashrc)
grep -q "WASM_BASE" "$CONF_FILE" || echo "export WASM_BASE=\"$TARGET_DIR\"" >> "$CONF_FILE"

echo "=== WASM 開発基礎環境セットアップ ==="

# wasm-pack さえあれば、あとはプロジェクト側で何とかする設計
if ! command -v wasm-pack >/dev/null 2>&1; then
  echo "[+] wasm-pack をインストール中..."
  cargo install wasm-pack
else
  echo "[=] wasm-pack はインストール済みです"
fi

# node/npm の存在チェックだけで終了
command -v npm >/dev/null 2>&1 || { echo "[!] npm が必要です"; exit 1; }

echo "=== 基礎セットアップ完了！ ==="Code language: PHP (php)

できたwasm-setupを

$ chmod 700 wasm-setup

とします。これで

$ wasm-setup

とすればセットアップが完了します。必要なwasm-packとvite系プラグインをインストールできました。環境変数WASM_BASEがもし~/.bashrc あるいは ~/.zshrcになければ付け加えられます。デフォルトでは ~/projects/wasm になっていますが、　~/foo の下にプロジェクトを置きたい場合は、

$ wasm-setup ~/foo

としてみればいいです。この設定はすでに行われてる場合は.bashrc や .zshrcに上書きされません。最後に環境変数WASM_BASEがこの時点で加えたのなら

$ source ~/.bashrc # あるいは source ~/.zshrcCode language: JavaScript (javascript)

をすれば完了です。これで最初の仕事は終わります。

次の記事はスクリプトwasm-projectを使ってプロジェクトの作成についてになります。