前回、Rustのソースからwasmファイルを生成し、これをJavaScriptと連携させるためのjsファイルも併せて生成してもらいましたが、直接それらを読み込もうとしたらエラーを吐かれて意図した動作をしてもらえませんでした。参考にしていたMDNのドキュメントはnpm向けにパッケージングされたモジュールを読み込んで利用するという内容でしたので、勝手にpkgディレクトリにできたファイルを読み込んだら単体のファイルでも動作するなんて単純な仕組みではないようです。

というわけで、副教材を探してみました。前回、pkgディレクトリが出来上がったあとの進め方をこちらで学んでみます。

npm init wasm-app www

まず、プロジェクトディレクトリの中に↑このコマンドでwwwというサブディレクトリを作成します。このコマンドではさらに確認環境になるWEBサーバーの設定やwebpackの設定もやってくれています。ありがたや。では、さっそく主戦場を新しくできたwwwディレクトリに移動します。

cd www

とりあえず、依存関係のあるnodeのモジュールを揃えるように書いてあるので、

npm install

とコマンドして、ファイルを揃えます。次にpackage.jsonの設定に自作のパッケージ（../pkgにできたファイル）との依存関係を新たに追記します。

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

hello-wasm の部分にはパッケージの名前を入れましょう。devDependencies項の上に追加しようって書いてあったけど、書く位置に決まりなんてあるのかな？（おとなしく従うけど）

もう一つ、index.jsも変更が必要で

import * as wasm from "hello-wasm";

importするモジュール名を自作のものに変更しました。もう一つ、副教材と違って自作の（MDNの）greet関数は引数を一つ持つので、

wasm.greet('aiueo');

適当に引数をつけておきました。この段階で、新たに自作のモジュールと依存関係ができているので再度

npm install

コマンドを叩いておきました。

npm run start

最後に↑このコマンドでlocallhost:8080にWEBサーバーが立ち上がってindex.htmlをブラウザから確認すると「Hello, aiueo!」と期待通りのalertダイアログが表示されてくれました。万歳！

なお残る謎の部分

動作は確認できましたが、実際にWASMファイルがどのように作用してこうなったのかわかっていません。webpackが何らかの作用をしてbootstrap.jsをどうにかしているようではありますが、このままだとどのファイルをWEBサーバーに上げれば最低限外の環境で動くのかもわかりません。モジュールの形態でファイル群を外に全部出しておく必要があるのか？だとしたらpackage.jsonを真面目に書いた方がいいのか？WASMファイルってもっと手軽に扱えないのか？と疑問はつきません。とりあえずブラウザでの動作確認はできたので、まずは中身の充実をはかりますが、最終的にサービスとして外に出す方法も考えないとならないですね。webpack難しい・・・。