スクリプト言語TypeScriptでWebAssembly――「AssemblyScript」を体験する：いろんな言語で試す、WebAssembly入門（2）

第2回では、TypeScriptでWebAssemblyプログラムを開発できるAssemblyScriptを紹介します。差異こそありますがTypeScriptの構文を使ってコードを書けるので、フロントエンドに慣れた開発者にとってはWebAssemblyのための入りやすい選択肢と言えます。

[山内直（著）／山田祥寛（監修），WINGSプロジェクト]

連載：いろんな言語で試す、WebAssembly入門

　本連載のサンプルコードをGitHubで公開しています。こちらからダウンロードしてみてください。

JavaScriptとWebAssembly

　連載第1回では、WebAssemblyの概要を紹介し、さまざまなプログラミング言語の選択肢に触れました。静的な型付け言語であるC++やRustは、WebAssemblyのための開発言語として最適なのですが、学習コストの点で問題があります。できれば、フロントエンド開発でなじみ深いJavaScriptなどの言語を用いて、WebAssemblyアプリケーションを開発したいと思う人も少なくないはずです。

　残念ながら、本稿作成時点において、JavaScriptのコードをWebAssemblyに直接コンパイルする手段は用意されていません。しかし、AltJS（JavaScriptを置き換える言語）であるTypeScriptには、WebAssembly開発のためのツールとしてAssemblyScriptがあります。このAssemblyScriptを用いることで、TypeScriptのコードをWebAssemblyにコンパイルできます。

　TypeScriptはその名の通り「型の付いたJavaScript」です。型におおらかなJavaScriptに対して、型の指定を積極的に行うTypeScriptは、WebAssemblyに適しているのです。近年では、ReactやVueといったJavaScriptフレームワークでも利用可能になり、数あるAltJSの代表格といえます。

　この場合、JavaScriptの利用は従来の用法（モジュールの読み込み、DOMの構築、操作など）の範囲内に限定し、高速な処理が要求される部分でTypeScriptによるWebAssemblyを導入するといった組み合わせが考えられます。

　JavaScriptの習得者にとって、TypeScriptの学習コストはC++やRustほど高くはないと思われるので、有効な選択肢になるでしょう。今回は、このAssemblyScriptを紹介していきます。なお、TypeScriptについては、＠ITの記事を参考にしてください。

TypeScriptのTypeあれこれシリーズ

AssemblyScriptとは

　AssemblyScriptは、上記の通り、TypeScriptのコードをWebAssemblyのバイナリにコンパイルするためのツールです。ただし、TypeScriptの構文そのままでコンパイルできるわけではなく、WebAssemblyのためのサブセットという位置付けになります。そういう意味では、TypeScriptの構文を使ったWebAssemblyのための言語がAssemblyScriptとでしょう。

AssemblyScript

図　AssemblyScript

　TypeScriptとAssemblyScriptには、大まかに、以下のような違いがあります。

• 数値型が細かく追加されている。整数のi32やi64、浮動小数点数のf64など
• 参照型が細かく追加されている。内部参照のanyrefやArrayへのarrayrefなど
• 数値の代入に制限が発生する。サイズの大きい型から小さい型への代入はできない。浮動小数点数から整数への代入ができないなど
• undefinedやanyは使えない
• イテレータ構文（for〜ofなど）が使えない
• 例外処理（try〜catch）は使えない
• instanceofは使えない
• Union Typeは使えない
• 基本型はnullableにできない

　このうち数値型の違い、イテレータ構文、例外処理については、後述するコード例で紹介します。

AssemblyScriptを使う準備

　AssemblyScriptを使うために、幾つかのソフトウェアを準備しましょう。エディタおよび実行環境としてVisual Studio Code（以下、VSCode）を、ビルドと実行の環境としてNode.js（バージョン16以上）をそれぞれインストールしておきます。

　VSCodeをインストールしたら、拡張機能「Open in Default Borwser」をインストールしておきます。インストール後には念のため、設定から「Open In Default Browser > Run: Open With Local Http Server」の「ローカルHTTPサーバーで開く」にチェックが入っていることを確認してください。これは、ローカルにあるHTMLファイルなどからWebAssemblyのバイナリファイルを読み込めるようにするための指定です。

AssemblyScriptのインストール