Monaca IDEでWebAssemblyを試す

WebAssemblyというキーワードは聞いたことがあるでしょうか。

WASMと略されることもあります。Webブラウザ上でバイナリファイルを実行する技術です。JavaScriptに比べると数倍高速に動作します。

また、バイナリファイルなのでコードを見られる心配もありません。

今回はMonaca IDEでWebAssemblyを利用する方法を紹介します。

※ この記事で紹介する機能は、Monaca有料プランでのみ利用できる機能が含まれています。

対象はPWA

注意点として、MonacaアプリではなくPWAを対象としています。

Monacaアプリの場合、CORSを許可したサーバ上からWebAssemblyのバイナリファイルを読み取ることで実行可能になりますが、iOSの場合は落ちてしまうようです。PWAとしてデプロイする場合は問題ありませんので、今回はPWAのみを対象とします。

Monaca IDE上で扱える言語について

WebAssemblyは技術であって、プログラミング言語ではありません。

WebAssemblyに変換できるプログラミング言語としては、C/C++/Rustが初期として知られていましたが、現在ではGo/C#/Swift/Kotlinなども対応しています。

LLVMと呼ばれる中間コードに変換できればWebAssembly化できると言われていますので、他のプログラミング言語でも利用できるでしょう。

現在対応しているプログラミング言語でMonaca IDE上で動かせるものはAssemblyScriptになります。

AssemblyScriptは、TypeScriptからWebAssemblyを生成します。生成時にNode.jsだけあれば良いので、他の言語のようにビルド環境を整えずに使えるのが利点です。もちろん、Monaca IDEではなくLocalKitやCLIを使う場合には好きな言語でWebAssembly開発が行えるでしょう。

ベースプロジェクトはPWAテンプレート

今回は、「最小限のPWAテンプレート」を選択してください（サンプルアプリケーションの中にあります）。

AssemblyScriptのインストール

AssemblyScriptはMonaca IDEのターミナル上でインストールします。

ターミナル機能は、Proプラン以上が必要になりますので注意してください。

npm install --save-dev assemblyscript

これでプロジェクト内で、 asc コマンドが使えます。

コードを試す

まず ~/project 以下に ts というフォルダを作ります（ここにAssemblyScriptのファイルを入れます）。

mkdir ts

そしてファイルを作ります。

touch ts/add.ts

ファイルツリーを更新した後、このファイルをMonaca IDEで開きます。

コードは簡単なもので、与えられた引数二つを足すだけです。

export function add(a: u32, b: u32) : u32 {
  return a + b;
}

コンパイルする

そしてAssemblyScriptを使ってコンパイルします。

ｎpx asc -o www/add.wasm ts/add.ts

これで www/add.wasm ファイルが生成されていれば成功です。

この .wasm という拡張子のファイルがWebAssemblyファイルになります。ファイルの中身を見ると分かりますが、バイナリになっています。

実行する

ではこの add.wasm を実行するコードを index.html に記述します。

mod.instance.exports.add でWebAssembly内のadd関数を取り出せます。
そして引数を与えて実行します。

WebAssembly.instantiateStreaming(fetch("add.wasm"), {}).then(mod => {
  const add = mod.instance.exports.add;
  const result = add(1, 2);
  console.log(result);
});