コンテンツへスキップ

Rust/WASM/JavaScript/Viteを使ったプロジェクトの作成と管理 2/4 プロジェクト作成編

前回はRust/Wasm/JavaScript(TypeScript)/Viteのプロジェクトを作成する前の段階で必要なものを揃えました。

プロジェクトを作成するスクリプトを用意する

Rust/wasm/Viteでの環境では、２種類のプロジェクトを用意する必要があります。

  • Rust のプロジェクト : Cargoによる作成
  • JavaScript のプロジェクト　: npmによる作成

この２つのプロジェクトを連動させる必要があって、それが敷居を高くする原因です。そこでプロジェクトを作るのにディレクトリ階層を用意します。

$ tree -L 2 hello
hello
├── hello_js
│ 　├── index.html
│ 　├── node_modules
│ 　├── package-lock.json
│ 　├── package.json
│ 　├── public
│　 └── src
└── hello_rs
    ├── Cargo.lock
    ├── Cargo.toml
    ├── pkg
    ├── src
    └── target

9 directories, 5 filesCode language: PHP (php)

これはプロジェクトhelloの構成のサンプルです。プロジェクト hello の下にrust用の hello_rsとJavaScript用のhello_jsを用意しているのです。これを簡単に作れるようにするのがこの記事の目的になりますね。この例についてはビルド後の状態を表してるので、プロジェクト初期化の状態とは違っているところがあることは書いておきます。もう一点、JavaScriptのVanillaフレームワークを前提で作ってあります。他のものを希望ならばnpm create… の行を各自で改変してください。ビルドの後にも少し面倒なことがあるのですが、それは次回のwasm-buildスクリプトの紹介で説明します。

スクリプトの紹介

そのスクリプトは次のとおりです。

#!/bin/bash

set -e
name=$1

pushd . > /dev/null

# ディレクトリ作って移動
cd $WASM_BASE
mkdir $name
cd $name

# Rust プロジェクト作成
cargo init ${name}_rs --lib

# Vite プロジェクト作成 (JavaScript)
npm create vite@latest ${name}_js -- --template vanilla
cd ${name}_js

# 必要なプラグインを最初に入れてしまう
echo "[+] Vite プラグインをインストール中..."
npm install -D vite-plugin-wasm vite-plugin-top-level-await
# npm install (その他の依存関係)

# 戻って Rust pkg を js プロジェクトにリンク or コピー
# mkdir -p ${name}_js/src/wasm
# ln -s ../${name}_rs/pkg ${name}_js/src/wasm/pkg

popd > /dev/nullCode language: Bash (bash)

これはbash用に作ってるので、１行目（Shebang: シバン/シェバン と言います。)をmacのようにzshならば書き換える必要があります。
そして、コピペしてみてください。シェルを立ち上げて

$ cd ~/bin
$ cat > wasm-project

として、ペーストしてください。次に

$ chmod 700 wasm-project

とすれば、使えるようになります。

wasm-projectの使い方

この wasm-projectの使い方は、

$ wasm-project hello

で作成ができるようにしてあります。すでに前の記事で説明したwasm-setupをして環境変数WASM_BASEが設定されていること、wasm-packがインストールされた前提で行ってください。

$ wasm-project hello
    Creating library package
note: see more `Cargo.toml` keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

> npx
> "create-vite" hello_js --template vanilla

│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  Yes
│
◇  Scaffolding project in /home/yasuto/projects/wasm/hello/hello_js...
│
◇  Installing dependencies with npm...
⠸

added 13 packages, and audited 14 packages in 875ms

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
│
◇  Starting dev server...

> hello_js@0.0.0 dev
> vite


  VITE v7.3.1  ready in 95 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: JavaScript (javascript)

こういうふうな感じでプロジェクトhelloを作っていけます。最後にサーバーが立ち上がるので、そこはctrl-cをして止めてください。これで、環境変数WASM_BASEで指定したディレクトリの下にhelloというプロジェクトのディレクトリができて確認できます。（2026/01での最新環境での表示ですが、安定期に入ったプロジェクトではないので表示は変化する可能性があります。）

どうしてサーバーが最後に立ち上がるかというとプロジェクトに初期のテンプレが挿入されてることの確認だと思ってください。この状態でブラウザでURLを開けばわかります。

補足

TypeScriptでやりたいという場合は、スクリプトの以下のところを修正すればよいです。

# 修正前（JavaScript）
npm create vite@latest ${name}_js -- --template vanilla

# 修正後（TypeScript）
npm create vite@latest ${name}_js -- --template vanilla-tsCode language: CSS (css)

プロジェクトディレクトリが_jsのままになります。すべて_tsに帰る場合は慎重になさってください。４つのスクリプトの変更に注意です。

次は第三回目のwasm-buildスクリプトのことを書きます。

最終更新: 2026.01.15
タグ: