検索
連載

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

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

Share
Tweet
LINE
Hatena
「いろんな言語で試す、WebAssembly入門」のインデックス

連載:いろんな言語で試す、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のインストール

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る