技術情報WebAssembly中津川篤司WebAssemblyというキーワードは聞いたことがあるでしょうか。WASMと略されることもあります。Webブラウザ上でバイナリファイルを実行する技術です。JavaScriptに比べると数倍高速に動作します。バイナリファイルなのでコードを見られる心配もありません。IDEでWebAssemblyを利用する方法を紹介します。この記事で紹介する機能は、Monaca有料プランでのみ利用できる機能が含まれています。対象はPWA注意点として、MonacaアプリではなくPWAを対象としています。Monacaアプリの場合、CORSを許可したサーバ上からWebAssemblyのバイナリファイルを読み取ることで実行可能になりますが、iOSの場合は落ちてしまうようです。PWAとしてデプロイする場合は問題ありませんので、今回はPWAのみを対象とします。IDE上で扱える言語についてWebAssemblyは技術であって、プログラミング言語ではありません。WebAssemblyに変換できるプログラミング言語としては、C/C++/Rustが初期として知られていましたが、現在ではGo/C#/Swift/Kotlinなども対応しています。LLVMと呼ばれる中間コードに変換できればWebAssembly化できると言われていますので、他のプログラミング言語でも利用できるでしょう。IDE上で動かせるものはAssemblyScriptになります。AssemblyScriptは、TypeScriptからWebAssemblyを生成します。生成時にNode.jsだけあれば良いので、他の言語のようにビルド環境を整えずに使えるのが利点です。IDEではなくLocalKitやCLIを使う場合には好きな言語でWebAssembly開発が行えるでしょう。ベースプロジェクトはPWAテンプレート今回は、「最小限のPWAテンプレート」を選択してください(サンプルアプリケーションの中にあります)。IDEのターミナル上でインストールします。ターミナル機能は、Proプラン以上が必要になりますので注意してください。いうフォルダを作ります(ここにAssemblyScriptのファイルを入れます)。tsそしてファイルを作ります。コードは簡単なもので、与えられた引数二つを足すだけです。b;}コンパイルするそしてAssemblyScriptを使ってコンパイルします。ファイルが生成されていれば成功です。いう拡張子のファイルがWebAssemblyファイルになります。ファイルの中身を見ると分かりますが、バイナリになっています。WebAssembly内のadd関数を取り出せます。引数を与えて実行します。console.log(result);});実行するプレビューパネルで、プロジェクトを表示すると、WebAssemblyが実行されているはずです。今回は開発者ツールのコンソールにログが出ていれば問題ありません。簡単なコードのため、インスペクターに「3」とのみ表示されています。まとめAssemblyScriptを使うことでTypeScriptを使ってJavaScriptライクにWebAssembly開発を行えるようになります。ループ処理や数値計算処理であればJavaScriptの数十倍〜数百倍の速度で実行できます。高速でコードが漏洩する心配のないWebアプリケーション開発のためにもぜひWebAssemblyを活用してください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。見やすい、メンテナンスしやすいJavaScriptのために。