概要

h1タグのエレメントにhello wasmという文字列のテキストノードを子ノードとして追加し、そのh1エレメントをidがappのdiv要素に挿入します。

jsで以下のコードに相当する内容です。

let content = document.createElement("h1");
content.appendChild(document.createTextNode("hello wasm"));
document.getElementById("app").appendChild(content);

ソースコード

src/lib.rs

extern crate wasm_bindgen;

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    type Element;
    type Text;

    #[wasm_bindgen(js_namespace = document, js_name="getElementById")]
    fn get_element_by_id(id: &str) -> Element;

    #[wasm_bindgen(js_namespace = document, js_name="createElement")]
    fn create_element(tag_name: &str) -> Element;

    #[wasm_bindgen(method, js_name = "appendChild")]
    fn append_child_element(this: &Element, element: Element);

    #[wasm_bindgen(js_namespace = document, js_name="createTextNode")]
    fn create_text_node(text: &str) -> Text;

    #[wasm_bindgen(method, js_name = "appendChild")]
    fn append_child_text_node(this: &Element, text: Text);
}

#[wasm_bindgen(start)]
pub fn main() {
    let content = create_element("h1");
    content.append_child_text_node(create_text_node("hello wasm"));
    get_element_by_id("app").append_child_element(content);
}

src/index.js

import("../pkg");

src/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>hello wasm</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>

設定

cargo.toml

[package]
name = "hello-world"
version = "0.1.0"
authors = ["**********"]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

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

[dependencies]
wasm-bindgen = "0.2"

package.json

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "./node_modules/.bin/webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "^1.0.1",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  }
}

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = {
    resolve: {
        extensions: [".js"]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html")
        }),
        new WasmPackPlugin({
            crateDirectory: path.join(__dirname, "crate")
        })
    ]
};

実行

> wasm-pack build
> npm run server

localhost:8080にアクセスすると、hello wasmと表示されるはずです。

WasmでalertじゃないHello Worldをする。

概要

ソースコード

src/lib.rs

src/index.js

src/index.html

設定

cargo.toml

package.json

webpack.config.js

実行