① VS Code だけで Rust/WASM の最小デモをロリポップに構築する手順【静的サイト公開】

以前の記事では、レンタルサーバをブログ以外の用途に活用する方法として、静的サイトや Web アプリ、WASM デモなどを公開できる環境を紹介しました。今回はその応用として、実際に Rust/WASM の最小デモ環境をロリポップ上に構築してみた手順をまとめます。

ロリポップのレンタルサーバは PHP や WordPress だけでなく、 HTML・JavaScript・WASM で構成された静的サイトも問題なく公開できます。 VS Code と wasm-pack を利用することで、ローカル開発から公開までをシンプルに行うことができます。

1. Rust/WASM と JavaScript の役割分担

WebAssembly（WASM）はブラウザで高速に動作するバイナリ形式であり、 JavaScript と組み合わせることで高性能な Web アプリケーションを構築できます。

● Rust/WASM の役割

計算処理・画像処理・データ処理など、CPU 負荷の高い処理を高速に実行する部分を担当します
Rust のコードが .wasm にコンパイルされ、ブラウザで動作します
DOM 操作やイベント処理は行いません（WASM は DOM に直接アクセスできません）

● JavaScript の役割

WASM の読み込み・初期化を担当します
WASM の関数呼び出しを行います
DOM 操作、イベント処理、UI 制御を担当します
ブラウザ API（Canvas、fetch など）を利用します

● 全体構造

JavaScript（UI・制御）
        ↓
WASM（Rust の高速処理）

2. ローカル（VS Code）側のフォルダ構成

ロリポップの公開フォルダ /wasm に対応するローカルフォルダを作成します。

project-root/
├── hello_wasm/     ← Rust の開発プロジェクト（公開しない）
└── wasm/           ← ロリポップの /wasm に対応する公開フォルダ

3. Rust/WASM プロジェクトの作成

VS Code のターミナルで以下を実行します。

cargo new hello_wasm --lib
cd hello_wasm

4. Cargo.toml の編集

[package]
name = "hello_wasm"
version = "0.1.0"
edition = "2024"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

５．Rust コードの作成（src/lib.rs）

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn hello() -> String {
    "Hello, WASM!".to_string()
}

● use wasm_bindgen::prelude::*; の意味

wasm-bindgen は Rust と JavaScript をつなぐための公式ライブラリです。 WebAssembly 単体では JavaScript と直接やり取りできないため、このライブラリが橋渡しを行います。

この宣言により以下が可能になります。

#[wasm_bindgen] アトリビュートの利用
Rust の関数を JavaScript から呼び出せるようにする
Rust と JavaScript の型変換を提供する

６．wasm-pack によるビルド

wasm-pack build --target web

● wasm-pack build --target web の意味

このコマンドは以下の処理を行います。

Rust → WebAssembly（.wasm）にコンパイル
JavaScript から WASM を読み込むラッパーコード（.js）を生成
TypeScript 用の型定義（.d.ts）を生成
npm パッケージとして利用できる構成（package.json）を生成
すべてを pkg フォルダにまとめる

７．pkg フォルダの内容と用途

.gitignore
hello_wasm_bg.wasm
hello_wasm_bg.wasm.d.ts
hello_wasm.d.ts
hello_wasm.js
package.json

● .gitignore

pkg フォルダを Git 管理から除外するための設定です。

● hello_wasm_bg.wasm

Rust のコードがコンパイルされた WebAssembly 本体です。

● hello_wasm_bg.wasm.d.ts

WASM 側の低レベルな TypeScript 型定義です。

● hello_wasm.d.ts

JavaScript から利用する関数の TypeScript 型定義です。

● hello_wasm.js

JavaScript から WASM を読み込むためのラッパーコードです。

WASM の読み込み
メモリ初期化
Rust の関数を JS の関数として公開

● package.json

npm パッケージとして利用するためのメタ情報です。

8. 公開用フォルダ（wasm）への配置

hello_wasm/pkg を 手動で wasm/pkg にコピーします。

project-root/
└── wasm/
    └── pkg/
        ├── hello_wasm_bg.wasm
        ├── hello_wasm_bg.wasm.d.ts
        ├── hello_wasm.d.ts
        ├── hello_wasm.js
        └── package.json

９．Hello WASM 用 HTML の作成

project-root/
└── wasm/
    ├── pkg/
    └── hello/
        └── index.html

内容：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello WASM</title>
</head>
<body>
    <h1 id="msg">Loading...</h1>

    <script type="module">
        import init, { hello } from "../pkg/hello_wasm.js";

        async function main() {
            await init();
            document.getElementById("msg").textContent = hello();
        }

        main();
    </script>
</body>
</html>

10．トップページ（index.html）の作成

project-root/
└── wasm/
    ├── index.html
    ├── hello/
    └── pkg/

（複数デモ対応のカード型デザインをそのまま掲載可能です）

11．ローカル最終構成（VS Code）

project-root/
├── hello_wasm/
│   ├── src/
│   ├── Cargo.toml
│   └── pkg/        ← ここからコピーする
│
└── wasm/
    ├── index.html
    ├── hello/
    │   └── index.html
    └── pkg/        ← 公開用（コピー後）

12. ロリポップへのアップロード（SSH FS）

ロリポップへのアップロードは VS Code の SSH FS（SFTP）拡張機能を使用します。 SSH FS の設定・接続・アップロード手順については 別ブログ記事を参照してください。

13. 動作確認

https://wasm.kajiblo.com/

トップページが表示され、「Hello, WASM」をクリックすると Hello, WASM! が表示されれば成功です。

📝 VS Code だけで Rust/WASM の最小デモをロリポップのレンタルサーバに構築する手順