Rust で最初の WebAssembly コードを作成する方法

この記事では、最初の WebAssemly コードを作成するために何をすべきかを説明します。

WebAssembly について何か聞いたことがあると仮定しましょう。ただし、このテクノロジを使用した最初のコードはまだ作成していません。

ここでは、簡単なスターターパックを作成します。プログラミング言語Rustとの組み合わせが魅力的だったので選びました。

取り敢えずやってみましょう。

Rust と Cargo をインストールする

Rust:マルチパラダイム、高水準、汎用プログラミング言語 (https://www.rust-lang.org/)
Cargo: Rust ビルドツールとパッケージマネージャー (https://crates.io/)

Cargo.toml ファイルの初期化

cargo init --name rust_wasm_starter --lib
# Cargo.toml

[package]
name = "rust_wasm_starter"
version = "0.1.0"
edition = "2021"

[dependencies]

cargo add wasm-bindgen

# Cargo.toml

[package]
name = "rust_wasm_starter"
version = "0.1.0"
edition = "2021"

[dependencies]
wasm-bindgen = "0.2.84"

cargo install wasm-pack

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

use wasm_bindgen::prelude::wasm_bindgen;

#[wasm_bindgen]
pub fn add(a: usize, b: usize) -> usize {
    return a + b
}

wasm-pack build --release --target web

npm init
// package.json

{
  "name": "rust-wasm-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC"
}

npm i http-server --save

"scripts": {
  "start": "http-server -a localhost -p 5200",
  "build": "wasm-pack build --release --target web"
}

import init from "./pkg/rust_wasm_starter.js";
import {add} from "../pkg/rust_wasm_starter.js";

function run() {
    console.log(add(5, 5));
}

init().then(run)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Rust Wasm Starter</title>
    <script type="module" src="./index.js"></script>
</head>
<body>
    See the result in the console.
</body>
</html>

npm run start
Starting up http-server, serving ./

http-server version: 14.1.1
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://localhost:5200
Hit CTRL-C to stop the server

プロジェクトの立ち上げと実行に問題がある場合は、私の GitHub リポジトリをチェックしてみてください