はじめに

今日では WASM が大分浸透してきており、利用したくなる場面が今後出てくるでしょう。 本記事では簡単に実装できる最短手順を紹介します。

この記事は 広島大学 HiCoder & ゲーム制作同好会 GSD Advent Calendar 2023の 9 日目です。

実装

ここでは Next.js のプロジェクトの生成は省略しており、既にプロジェクトが存在していることが前提になっています。

インストール

それでは早速wasm-packのインストールを始めていきます。

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

WASM プロジェクト

WASM のプロジェクトの説明を始めます。

作成・ビルドが終了するとディレクトリ構成としては、最終的に以下のようになります。 Next.js と Rust のプロジェクトの位置に気をつけてください。

front/ # Next.js
    ├ lib/
    ├ # ...
    └ wasm/
        └ pkg/
            ├ front_wasm_bg.wasm
            ├ front_wasm_bg.wasm.d.ts
            └ # ...
front-wasm/ # Rust
    ├ lib/
    └ # ...

作成

wasm-pack new front-wasmで WASM のプロジェクトを作成します。

すると様々なファイルが生成されます。 初期のままだと実行結果がわかりにくいので、ここではlib.rsを以下のように変更します。

mod utils;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
struct Form {
    name: String,
}

#[wasm_bindgen]
impl Form {
    pub fn new(name: &str) -> Self {
        Self {
            name: name.to_string(),
        }
    }

    pub fn san(&self) -> String {
        format!("{}さん", self.name)
    }
}

ビルド

cd front-wasm
wasm-pack build --out-dir ../front/wasm/pkg

Webpack Config

続いて Next.js 側で WASM（asyncWebAssembly）を許可する設定を追加します。 また、issueが解決していないため、config.output.webassemblyModuleFilenameの設定も行います。

next.config.jsに以下を追記します。

module.exports = {
  // ...
  webpack(config, { isServer, dev }) {
    config.experiments = { ...config.experiments, asyncWebAssembly: true, layers: true }
    config.output.webassemblyModuleFilename =
      isServer && !dev ? '../static/wasm/[modulehash].wasm' : 'static/wasm/[modulehash].wasm'

    return config
  },
}

package.json

package.jsonに作成した WASM のパッケージを追記します。

"dependencies": {
    # ... ,
    "front-wasm": "file:./wasm/pkg"
}

npm installを実行し、変更を反映させます。

WASM の利用

WASM を Next.js 側で利用するには、import を使用することで行えます。

import { Form } from 'front-wasm'

export default function Yamada() {
  const form = Form.new('山田太郎')
  const name = form.san()
  return <div>{name}</div>
}

以下の画像のように正しく取得できました。

おわりに

上記の手順のみで簡単に実装できました。お疲れ様でした！