Rustでwasmを使ってJSで使える関数を作ったときに引数に&selfを入れると関数がJS側でundefinedになる

Question

Rustでグラフを描画するcrateの plotters のデモを使ってプログラムを書いているのですが、コードを少し変えた時にタイトルにあるようなエラーが出ます。

環境

• Windows10
• Rust 1.50.0

Rust 側のコード

use wasm_bindgen::prelude::*;

#[derive(Clone)]
pub struct Data {
	pub x: Vec<f32>,
	pub y: Vec<f32>,
}

impl Data {
	pub fn new() -> Data {
		let x: Vec<f32> = Vec::new();
		let y: Vec<f32> = Vec::new();

		Data { x: x, y: y }
	}
}


#[wasm_bindgen]
pub struct Chart {
    convert: Box<dyn Fn((i32, i32)) -> Option<(f64, f64)>>,
    data: Data,
}

#[wasm_bindgen]
impl Chart {
    /// Draw provided power function on the canvas element using it's id.
    /// Return `Chart` struct suitable for coordinate conversion.
    pub fn plot(&self, canvas_id: &str, p: i32) -> Result<Chart, JsValue> {
        let map_coord = func_plot::draw(canvas_id, p).map_err(|err| err.to_string())?;
        let data = Data::new();
        Ok(Chart {
            convert: Box::new(move |coord| map_coord(coord).map(|(x, y)| (x.into(), y.into()))),
            data: data,
        })
    }

    /// This function can be used to convert screen coordinates to
    /// chart coordinates.
    pub fn coord(&self, x: i32, y: i32) -> Option<Point> {
        (self.convert)((x, y)).map(|(x, y)| Point { x, y })
    }
}

plot関数の引数に &self を入れるとJS側でplotがundefinedになって、外すと正常に使えます。今の状態ですとplot内でselfは使っていませんが将来的には let data = Data::new() の部分を let data = self.data.clone()に置き換えて使っていくつもりです。

JS側のコード

JS側でどのようにしてコードを使っているかというと、

bootstrap.js

init();

async function init() {
  if (typeof process == "object") {
    // We run in the npm/webpack environment.
    const [{ Chart }, { main, setup }] = await Promise.all([
      import("rapid_scan"),
      import("./index.js"),
    ]);
    setup(Chart);
    main();
  } else {
    const [{ Chart, default: init }, { main, setup }] = await Promise.all([
      import("../pkg/rapid_scan.js"),
      import("./index.js"),
    ]);
    await init();
    setup(Chart);
    main();
  }
}

index.js

let chart = null;

// ...

/** Update displayed coordinates. */
function onMouseMove(event) {
  if (chart) {
    var text = "Mouse pointer is out of range";

    if (event.target == canvas) {
      let actualRect = canvas.getBoundingClientRect();
      let logicX = (event.offsetX * canvas.width) / actualRect.width;
      let logicY = (event.offsetY * canvas.height) / actualRect.height;
      const point = chart.coord(logicX, logicY);
      text = point ? `(${point.x.toFixed(3)}, ${point.y.toFixed(3)})` : text;
    }
    coord.innerText = text;
  }
}

/** Redraw currently selected plot. */
function updatePlot() {
  const selected = plotType.selectedOptions[0];
  status.innerText = `Rendering ${selected.innerText}...`;
  chart = null;
  const start = performance.now();
  chart = Chart.plot("canvas", Number(selected.value));  // <-- ここで使ってる

  const end = performance.now();
  status.innerText = `Rendered ${selected.innerText} in ${Math.ceil(
    end - start
  )}ms`;
}

のように、HTMLから最初に呼び出される bootstrap.jsでWASMをインポートしておいて index.js内でそれを使うという感じになっています。

どのように実行しているか

コードの実行には wasm-packとbasic-http-serverを使っています。

wasm-pack build --target web
basic-http-server

ビルド時には何のエラーも出ません。

なぜ、引数に&selfを加えただけで関数がundefinedになってしまうのでしょうか？どうぞよろしくお願いいたします。

Answer 1

plot関数の引数に &self を入れるとJS側でplotがundefinedになって、外すと正常に使えます。

なぜ、引数に&selfを加えただけで関数がundefinedになってしまうのでしょうか？

plotは元々はcanvas_idとpの2つの引数を取る関連関数（wasm-bindgenによってJavaScriptのスタティックメソッドとしてエクスポートされる）ですが、&selfを足すことで、メソッドレシーバー（&self）、canvas_id、pの3つの引数を取るメソッド（JavaScriptのインスタンスメソッドとしてエクスポート）に変わりました。メソッドの定義が変わったわけですから、JavaScript側から呼び出すときもそれに合わせて変える必要があります。変えないで2引数のスタティックメソッドとして呼ぼうとすると、メソッドが存在しない（undefined）になります。

変更前

  // plotは2つの引数をとるスタティックメソッド。Chartのインスタンスを作成して返す
  chart = Chart.plot("canvas", Number(selected.value));

変更後

  // なにかの方法でChartのインスタンスを作成する
  chart = ...; // (1)
  // 
  // インスタンスに対してplotを呼ぶ
  // （インスタンスがplotのメソッドレシーバー（&self）になる）
  // plotはChartの新しいインスタンスを作成して返す
  chart = chart.plot("canvas", Number(selected.value));

(1)のところですが、たとえば、Rust側のChartにnewという関連関数を定義してChartのインスタンスを返すようにできます。

Chart構造体の定義を見るとconvertフィールドを初期化するためにクロージャーが必要なことがわかります。そのクロージャーを作るにはcanvas_idとpが必要です。つまりこれは、元の2引数のplot関連関数がやっていることと全く同じです。

変更前

#[wasm_bindgen]
impl Chart {
    // plot関連関数（2引数）
    pub fn plot(canvas_id: &str, p: i32) -> Result<Chart, JsValue> {
        let map_coord = func_plot::draw(canvas_id, p).map_err(|err| err.to_string())?;
        let data = Data::new();
        Ok(Chart {
            convert: Box::new(move |coord| map_coord(coord).map(|(x, y)| (x.into(), y.into()))),
            data: data,
        })
    }

変更後

#[wasm_bindgen]
impl Chart {
    // new関連関数（2引数）
    pub fn new(canvas_id: &str, p: i32) -> Result<Chart, JsValue> {
        let map_coord = func_plot::draw(canvas_id, p).map_err(|err| err.to_string())?;
        let data = Data::new();
        Ok(Chart {
            convert: Box::new(move |coord| map_coord(coord).map(|(x, y)| (x.into(), y.into()))),
            data,
        })
    }

    // plotメソッド（3引数）
    pub fn plot(&self, canvas_id: &str, p: i32) -> Result<Chart, JsValue> {
        let map_coord = func_plot::draw(canvas_id, p).map_err(|err| err.to_string())?;
        Ok(Chart {
            convert: Box::new(move |coord| map_coord(coord).map(|(x, y)| (x.into(), y.into()))),
            data: self.data.clone(),
        })
    }

  // Chartのインスタンスを作成する
  chart = Chart.new("canvas", Number(selected.value));
  // インスタンスに対してplotを呼ぶ
  // Chartの新しいインスタンスが返される
  chart = chart.plot("canvas", Number(selected.value));

これが質問の直接の答えになります。が、newとplotがほとんど同じことを繰り返していて無駄があります。また、インスタンスも2つ作ってます（1つ目はすぐに破棄）

無駄を無くすために、たとえばplotが&selfを取るのではなく、Dataを取るようにした方がいいかもしれません。

    pub fn plot(data: Data, canvas_id: &str, p: i32) -> Result<Chart, JsValue> {
        let map_coord = func_plot::draw(canvas_id, p).map_err(|err| err.to_string())?;
        Ok(Chart {
            convert: Box::new(move |coord| map_coord(coord).map(|(x, y)| (x.into(), y.into()))),
            data,
        })
    }

  // Dataのインスタンスを作成する
  data = Data.new();
  // plotでChartのインスタンスを作る
  chart = Chart.plot(data, "canvas", Number(selected.value));

Comments

[Yhaya]

なるほど、わかりやすい説明をいただきありがとうございます。少し自分のほうでも試してみます。

[Yhaya]

修正したところうまくいきました！ありがとうございます。