asm.jsの基本的な使い方・まとめ

asm.jsとは

asm.jsとはWEBブラウザベンダーのMozillaが提唱し, 同団体が提供するFirefoxにおいて実装されたJavaScriptの高速化技術です. その有効性が確かめられると他のブラウザベンダーもこれに追随し, 現在ChromeやEdgeなどのブラウザでも利用可能となっています.

asm.jsが生まれた背景

HTML5が世間一般に利用されはじめてWEBアプリケーションは高機能化の一途を辿っています. が, その一方でHTMLが本質的に抱えるパフォーマンスの問題が浮き彫りになっています. もともとWEBブラウザは短いHTML文書による情報の伝達を主目的としており, その上で動作するスクリプトも極めて限定的なものでした. つまり, JavaScriptはさっと書いて直ぐに動くことが売りであり, その動作パフォーマンスが問題となることはさほどなかったのです. しかしHTML5仕様の複雑化からも判るように, 昨今は音声・映像処理と言ったネイティブアプリケーション並みの機能が求められています. すると, もともとハイパフォーマンス向けに設計されていないJavaScriptの部分がどうしても動作速度的に見劣りするようになってしまったのです.

この問題は当初JavaScriptインタープリタの機能向上(JITコンパイル)やハードウェア環境の進化により自然に解決するものと見込まれていました. しかし現実にはPCと比べスペック的に非力なタブレット端末やスマートフォンの環境の台頭もあり, いよいよ放置することができなくなったのです.

JavaScriptはなぜ遅いのでしょうか? その原因の一つが動的型付けです. 人間からすると, 実装したい処理と直接関わらない型付けと言ったことを考えずに済むため一見ありがたいものです. しかしコンピュータ側から見ると, どのように処理するべきかその都度計算(型判定)する必要があります. 一方, 余程のことが無い限り変数はその使い途が限定されており, 数値を扱う変数は最後まで数値を格納していることがほとんどです. つまり, 予め数値として扱うことが判っているにも関わらず, 型判定という余計な処理を行わざるを得ないのです. これは多量の数値演算を伴う映像処理と言ったものに多大な影響を及ぼします.

その対処策として, まず型付き配列と呼ばれるバイナリデータを効率的に扱うためのオブジェクトが生まれました. が, それだけでは根本的な解決とはなりません. そこで「JavaScriptの文法と矛盾しない形で型の宣言を行うことは出来ないか?」というアイディアが生まれました. 静的な型付けができれば, インタープリタはより効率的な構文解析が行え, スクリプトの処理速度が向上するはずです.

こうしてasm.jsが生まれました. asm.jsはJavaScriptには本来ありえなかった数値型の概念を導入し, インタープリタが処理を行う際のヒントを与えることに成功しています.

asm.jsの特徴

以下にasm.jsの特徴についてまとめます

• JavaScriptのサブセットです.
  asm.jsはJavaScript文法に制約を加えたものであり, asm.jsをサポートしない環境では通常のJavaScriptコードとして振る舞います. これにより, 動作環境を意識せずにasm.jsを導入することが可能です. なお, この特徴がメリットでもデメリットでもあります.
• asm.jsで記述したコードは事前にコンパイルされ, メモリ内にキャッシュされます.
  JavaScriptコードは(概念上)実行時に内容が解釈されますが, asm.jsコードは構文解析時に事前にコンパイルされます. なおコンパイルの成否はデバッグツール等から確認できます.
• asm.jsは数値演算に特化した環境です.
  従ってイベントなどのUI処理等を行わせることは出来ません. また, 多くのJavaScript関数, オブジェクトは(Arrayですら)asm.jsコード内部から直接利用することは出来ません. なお, asm.jsから外部の処理を呼び出すことは出来ます.
• asm.jsにはデータ構造の概念が存在しません.
  配列・構造体・オブジェクト等のデータ構造をasm.js内部で利用することは出来ません. そのため複雑な処理は単純なコードに細分化され自ずと記述が肥大する傾向があります.
• 通常のJavaScriptコードよりも良好な処理パフォーマンスが得られます.
  低機能(低級)であるが故に, 一般的なネイティブコードと比べておよそ6〜7割のパフォーマンスが得られるとされています.
• 他言語からasm.jsコードを出力することが出来ます.
  実は最も重要な特徴で, C/C++と言った言語で記述した処理を機械的にasm.jsコードに変換することが可能です. JavaScript(に準じた)文法を直接操作することがなくなるため, プログラム開発が効率的に行えます.

このようにasm.jsは既存のJavaScriptコードに取って代わる存在ではありません. asm.jsはもともと(C言語やC++等の)他言語から出力したJavaScriptを効率的に動作させるにはどうすればよいかという発想から生まれており, そのためのWEBブラウザ側の追加機能として発展してきました. このことからasm.jsコードは比較的(コンピュータ向けの)低水準な内容とならざるを得ず, コードとしての可読性・効率性が犠牲になっています. 従って本来中身を知らずとも良い代物なのですが, あえてその動作原理を理解しておけば, asm.jsを使って出来る事についての見通しが立てやすくなります.

手組みのasm.jsコードの特徴

上記はasm.jsの一般論であり, 盲目的にasm.jsを採用すべきと考えるのは早計です. 本文書が目的としているasm.jsを手で扱う場合は更に次の点を考慮すべきです.

• オブジェクト指向的なアプローチが通用しません.
  プログラムを楽にする小細工は一切通用しないため, アルゴリズムの抽象化や処理の構造化と言った面でプログラマーの地力が問われます. 従って出来上がるコードの品質を担保することが極めて困難です.
• 処理の内容によってはほとんど効果が現れません.
  自動出力したasm.jsコードでは事前コンパイルというコストの前払いによりスクリプト実行の負荷を下げます. また, asm.jsモジュールの呼び出しには通常の関数呼び出しよりも微細ながらコストがかかります. そのため, (管理運用上)小規模になりがちな手組みのasm.jsコードではこれらの特性が仇となり, 却って動作速度を損なうことがあります. つまり, 真にasm.jsの恩恵を受けるためにはそれなり(暗黙のコスト増が気にならない程度)のコード規模が必要と言えます.
• asm.jsを意識したコードは本質的に速いコードです.
  asm.jsでコンパイル可能なコードは数値演算に特化していることから最適化が効きやすく, 通常のJavaScript環境下でも高速に動作し得ます. つまり, 無理にasm.jsを有効化する(事前コンパイルのコストを払う)ことなしに(asm.jsと同等とまでは言わないが)十分なパフォーマンスが得られることもあるのです^†.

このことから, asm.jsを「使う」「使わない」に加え, 「asm.jsの文法に則りながらも敢えてasm.jsを利用しない」という第3の選択肢が得られます. つまり, asm.jsをコーディング規約として利用し, 局所局所での最適化を図るのです. スクリプトコードを手作りする上で, JavaScriptが提供する便利なオブジェクト群を捨てるのは現実的ではありません. そのため, どの範囲までasm.jsを導入するのかと言ったさじ加減が重要となります.

asm.jsの動作環境

asm.jsは現在Firefox, Chrome, Edge, Opera, Safari^†の各ブラウザで動作します. 従って, ほとんどのブラウザ環境でasm.jsコードを高速に実行することが可能です. また, Node.JSなどの一部のJavaScript実行環境においてもasm.jsをサポートしています.

asm.jsの動作確認をする

asm.jsの動作をWEBブラウザのスクリーンから直接確認する方法はありません. ブラウザ組み込みの開発ツール(主にFirefox)で確認する事になります.

asm.jsの今後

このようにして生まれたasm.jsでしたが, 導入実績が増えるにつれ新たな問題が判ってきました. スクリプトの動作速度の向上に寄与したことは間違いないのですが, その対価としてスクリプトのロードまでに時間がかかってしまうのです. asm.jsコードはJavaScriptコードとの互換性を保つために全てテキストで記述されています. 一般に文字データは(圧縮を掛けたとしても)バイナリデータと比べサイズが肥大する傾向があります. そのため, とりわけ3D映像処理やゲームと言った巨大な演算を要するものにおいては, 機械的に出力したスクリプトが数十MB単位となることも珍しくありません. その結果データ通信にかかる時間, 構文解析にかかるコスト等が無視できないものとなってしまいました.

ではどうすればよいでしょう? asm.jsコードの送信はいわば都度ソースコードから実行可能ファイルを生成しているようなものですから, 予め動作が保証されているバイナリデータをプログラムコードとして配布できれば問題は解決します. 加えてバイナリデータであれば高い圧縮効率も期待できます. こうして現在検討されているものがWebAssemblyです. CやC++等の言語から専用のコンパイラを通してWEBブラウザで実行可能なバイナリプログラム(いわばコンパイル済みのasm.jsモジュール)を生成する試みで, WEBブラウザ側の対応が進めば有力な選択肢となるはずです.

するとasm.jsの存在意義が再び問われることになりますが, 既にJavaScriptインタープリタの動作速度向上と言った点で一定の役割を果たしていることから今後も重要な技術であり続けることは間違いありません. また, 個人的には小規模な手書きのスクリプトにおいても高速化が期待できると言った面で研究対象となりうると考えています. 従って手書きasm.jsという若干無謀にも思える試みを幾ばくかでもサポートできれば…これがこの文書作成の動機です.

asm.jsはいつ導入すべきか?

さて, asm.jsはWEBアプリケーションのパフォーマンスを劇的に向上させる可能性を秘めていることはわかりました. ではasm.jsはどのようなケースにおいて導入すべきでしょうか?

• 最初から“重い”処理をさせることが判っている場合.
  これはアプリケーションを組む前から複雑な処理(ゲームや映像処理)を行うことが判っている場合です. とは言え, どのようにasm.jsを適用すべきかについては綿密な設計が必要となるでしょう.
• 汎用の算術モジュールを作成する(もしくは移植する)場合.
  既に計算対象についてのアルゴリズム特性がわかっており, それをJavaScript上に展開するだけであればasm.jsは有力な選択肢です. 後から内容を変更する頻度が少なければ, 多少可読性が犠牲になっていたとしてもさほど影響は無いはずです. 無論, 十分なテストを行った上での話です.
• 計算対象が特定のデータ構造を持たない場合
  しかし元の設計がデータ構造に依存していた場合asm.jsに移植することが途端に困難(綿密な設計作業が必要)になります. 逆に単なる数値計算であればasm.jsに移行出来る公算が高くなります.
• asm.jsのコードを自動出力できる環境が整っている場合.
  asm.jsのコードを手で記述するのは根気の要る作業です. 従って, もしそのコードを機械的に出力できるのであれば(つまりEmscripten環境がある場合, C等で記述されたコード資産がある, コーディングが可能であるなら), 積極的に使っていくべきでしょう.
• パフォーマンスチューニングにおける最終手段として.
  一般的に言われているJavaScriptの最適化を施してなおパフォーマンスに劣る場合, 問題があると思われる(例えば次のような)箇所を部分的にasm.jsで置き換えるのです.
  • 複雑・面倒な計算を行っている箇所
    例)行列演算, 数値統計, 複利計算, ベジェ曲線の座標算出…
  • 単純だが繰り返し計算を行っている箇所^†
    例)アニメーションを行う際の座標計算, マウス座標の変換…
  しかしこの作業はある程度JavaScriptに慣れたメンバーが行うべきです. 無闇に導入しても却って既存のコードを毀損し, メンテナンス不可能なコードが出来上がります. また, パフォーマンスを計測しasm.jsを導入したことでパフォーマンスが改善するか確認してください. 先ほど見たとおり手組みのasm.jsコードは却って逆効果となる場合もあります.

いずれにせよ, 無闇に依存すべきものではありません. いわばasm.jsはJavaScript界の黒魔術とも呼べるもので, ソースコードの可読性低下, つまり生産性を犠牲にしてでも処理速度の向上を見込むわけですから, やり過ぎは却って自らに負担を強いる事になります. asm.jsを採用せずともJavaScriptのAPIは年々進化しており, 適切にオブジェクト・メソッドを選択するだけでも十分なパフォーマンス改善が見られるものです. とは言え, ループカウンタの記述等, ちょっと変えるだけでも目覚ましい効果が得られるケースもあり, 今後asm.jsから生まれた新たなJavaScriptのコーディング規約が浸透していくことも十分に考えられます.

asm.jsコードの構成

asm.jsコードの記述はそれほど難しくありません. 簡単な例を示します.

1. asm.js関数宣言
   asm.js関数は一般のfunction定義と同じように行います. この関数がasm.jsモジュールを生成します. function名は何でも良く, 無名functionとして即時実行しても構いません. また引数の名称についても制限はなく, 処理の内容に応じて適宜省略することが出来ます.
2. use asm宣言
   先頭で"use asm";を指定するとfunction全体がasm.jsコードとして解釈されます.
3. インポート宣言
   使用する組み込み関数(Math.xxx)や呼び出したい外部関数をここにリストアップしていきます.
4. 共有変数宣言
   関数共通に利用したい変数をここにリストアップします. なお, 演算子を使った初期化は出来ません.
5. 関数定義
   処理を行うための関数を記述していきます.
6. 外部への公開
   記述した関数のうち外部に公開したいものを連想配列形式にまとめ, returnします.
7. asm.jsモジュールの呼び出し
   asm.jsモジュールを定義した関数を呼び出すと, 上の(6)で生成した関数セットが返されるので, その中身を実行します.

asm.jsコードは見た目上通常のfunction宣言と区別がなく, script要素のどこに記述しても構いませんが, その構成は厳密に守る必要があります.

asm.js関数の引数の意味

asm.js関数として定義したfunctionは最大3つの引数をとります. asm.jsモジュールを使う場合適宜引数を渡します. それらの役割は次のとおりです.

• 第一引数「stdin」
  asm.jsモジュールを利用するコンテキストを渡します. コンテキストとはスクリプトの実行環境を表し, 通常は変数selfがこれに相当します. 変数selfには通常windowオブジェクトが設定されているのですが, Workerを利用している時などはこの限りではありません. 従って引数にはwindowではなくselfを渡すようにしましょう.
• 第二引数「foreign」
  asm.jsモジュールから外部の処理を呼び出したい際に, 当該のfunctionをオブジェクト形式で渡します. asm.jsモジュールが内部で呼び出し可能な関数には大きな制約がありますが, foreignを介せば任意の関数を呼び出すことが可能です. もちろんasm.jsモジュールで作成した関数を渡すことも出来ます.
• 第三引数「heap」
  asm.jsモジュール内部で利用するメモリ領域をArrayBufferオブジェクトとして渡します. asm.jsモジュール内部では配列の生成はおろか, メモリの追加確保すら出来ません. 従って処理を行うのに十分なサイズのArrayBufferオブジェクトを渡すようにします. なお, 指定可能なArrayBufferオブジェクトのサイズには制約があり, 最小単位を0x10000(64kB)とし, 以降2の累乗倍のサイズを指定するようにします.

なお第一引数にコンテキストオブジェクトに似たオブジェクトは渡さないでください. JavaScript文法としては正しくとも, asm.jsとしてリンク失敗となり通常のJavaScriptコードとしてフォールバック実行される可能性があります. .

"use asm"宣言

function定義の先頭に"use asm";と記述すると, JavaScriptインタープリタはこのfunctionをasm.jsコードと解釈し, 事前コンパイルを試みます. なお, 先頭行以外に記述した場合, コンパイルエラーとなりfunctionはフォールバック実行されます.

インポート宣言

asm.jsモジュール内部で利用する関数を宣言していきます. 主にfunctionの第一, 第二引数で指定したオブジェクトから必要な関数を変数にコピーします. なお, 第一引数からコピーできる関数には制限があり, stdin.Mathに属する数値関数(の一部)である必要があります. なお, asm.jsモジュールはfunctionスコープ外の変数にアクセスすることは出来ません. 従って, windowオブジェクトなどのグローバル変数を直接参照することは出来ません. またMath関数であってもインポートできないものがあります. なお, var宣言の代わりにconstを用いることも出来ます.

頻繁にインポートされるMath関数

Math関数のうち, 次の2つは特別な役割が与えられています.

• stdin.Math.fround
  float(単精度浮動小数点)型の変数を宣言するために使われます.
• stdin.Math.imul
  int型同士の掛け算を行うために使われます. *演算子によるint変数同士の掛け算は行えません.

この他stdin.Math.floorなどが型変換によく用いられます. 従って, asm.jsコードのテンプレートを作成する場合はこれらの関数をインポートするように記述しておくとよいでしょう.

共有変数・定数宣言

内部で共有する変数(var)や定数(const)を定義します. なお, 変数の初期化には数値リテラルの指定のみが行え, 演算子や制御構文を活用した複雑な値の指定はできません. またheapに対する型付き配列(ArrayBufferView)の生成は共有変数宣言部でのみ許されています. なお詳しい初期化処理が必要な場合は別途初期化用の関数を定義します.

ArrayBufferViewとして利用できるものは[Int/Uint][8/16/32]ArrayもしくはFloat[32/64]Arrayのいずれかです. Uint8ClampedArray, DataViewオブジェクトを指定することは出来ません.

関数定義

asm.jsモジュールが内部で実行するfunctionを定義します. 引数を受けるfunction場合, 引数を省略することは出来ません. また引数と戻り値については明示的に型を指定する必要があります. つまり, 引数の内容に応じてfunctionの処理の内容を変化させる(override/overloadする)ことは出来ません.

ローカル変数を定義することも出来ます. この場合, 共有変数の定義を同じ記法で行います(但しconstによる定数宣言は利用できません). また, 変数の宣言は具体的な処理の前に行う必要があります(変数定義の巻き上げ解釈は為されません). なお, 使えるものは数値のみでありそれ以外は組み込みオブジェクトであっても使えません.

functionから別のfunctionを呼び出すことも出来ます. 但しこの場合, パラメータを渡す側と受ける側の変数の型, 数が一致している必要があります.

関数内で利用できない構文

functionのネスト(functionをfunction内部で定義)は出来ません. これは関数内部でFunctionオブジェクトを利用できないのと同義です.

この場合, サブ処理も独立した関数として定義します.

モジュールの初期化処理の定義

asm.jsモジュールの初期化が必要な場合は, init関数を定義しその中で初期化処理を記述します.

ヒープ領域のサイズ指定

処理に最低限必要となるヒープ領域のサイズが判っている場合は, 次のように記述することでasm.jsモジュール生成時にheap領域のサイズが足りなかった際にメッセージを表示させることが出来ます.

この操作を行うfunctionを実際に呼び出す必要はありません. 定義しておくだけで有効になります.

外部への公開

asm.jsモジュールの生成処理が完了したら, その内容をオブジェクトにまとめreturnします.

asm.jsモジュールの呼び出し

asm.js関数を実行すると, asm.jsモジュールが生成されます. モジュールを使う側からは一般のfunctionオブジェクトと同じように扱えます. 但しその構成上パラメータとしては数値(及びそれに準じたもの)しか正しい内容を渡せません.

heap領域を使う場合は, asm.jsモジュール呼び出し側でArrayBufferオブジェクトを生成し, その内容をasm.js関数に渡します. 以後, asm.jsモジュールとはこのArrayBufferを介して数値データの受け渡しを行います.

ヒープサイズの算出

前もって確保すべきヒープ領域のサイズがわからない場合は, 渡すデータが64kBの2ⁿ倍に収まるような0以上の最小のnを求めます.

asm.jsを実装する場所

asm.js関数を定義する場所は原則どこでも構いません. しかし, 工夫することでより使い勝手の良いものとなります.

asm.jsモジュールを非同期的に読み込む

asm.jsを使ったコードを手書きする場合はそれほど気になりませんが, 機械的に出力したものを同期的に読み込むことはWEBページの応答性を著しく阻害します. この場合, スクリプトを非同期的に読み込むことを検討します.

スクリプトを非同期的に読み込むにはscript要素を生成しDOMに挿入します.

Workerを使ってasm.jsモジュールを別スレッドで実行する

asm.jsモジュールにはその役割上重い処理をさせがちですが, このような処理はWorkerを用いてブラウザが動作しているメイン処理と切り離すようにするとよいでしょう. 簡単な例を示します.

Worker内部の処理はメイン処理とは別のスレッドで動作するため, messageイベントを介して非同期的にデータをやりとりします.

asm.jsコードの実装例

以下は画像にフィルタ効果(セピア化)をかける処理をasm.jsで実装したものです.

処理結果

canvas要素にはグラフィックを描くためのAPIが備わっており, その中のgetImageDataを実行すると画像のピクセルデータを型付き配列(Uint8ClampedArray)オブジェクトとして取得できます. 従って, この内容をasm.jsモジュール管理下のheap領域に転写し, 処理を行った後でcanvas要素に書き戻せば画像の加工処理が完了したことになります.

JavaScriptにおける整数表現, 単精度浮動小数点数表現

JavaScriptでは数値を表面上倍精度(64bit)浮動小数点数として扱います. が, 数値演算の内容によっては内部的に整数や単精度(32bit)浮動小数点数として扱うことも出来るようになっています. 内部的に整数/単精度浮動小数点数として扱える範囲であれば足し算であれ掛け算であれ演算結果は整数/単精度浮動小数点数となり, それを超えると自動的に倍精度浮動小数点形式に変換(暗黙的なキャスト)されるのです.

また, 組み込みの演算子・関数の特徴として次のものがあります.

• 整数値に|0を施すと, 値が32bit整数値の範囲に切り詰められます.
• (倍精度)浮動小数点値にMath.fround関数を施すと, 値が単精度浮動小数点数に丸められます.

すると, これらの仕組みを巧みに操り, 数値変数の内部形式を固定する(つまり擬似的に型付けされている)ようにコードを記述することが可能です. asm.jsではこのように記述されたコードを元に, キャスト処理を意図的に省いた実行コードを生成することで処理を高速化します. また, こうすることでJavaScript固有の動作が取り除かれ, LLVM中間コードからJavaScriptコードへの変換が可能となります.

変数と数値型

asm.jsは「(32bit)整数型:int」「倍精度(64bit)浮動小数点型:double」「単精度(32bit)浮動小数点型:float」の3つの数値型のみを扱います. string, またその他の組み込みオブジェクトは扱えません. なお, true/falseを表すboolean値はboolean型の代わりにint型を用います.

• (32bit)整数型:int
  小数部を持たない数値を指します. また, 真偽値を表します. (真:1, 偽:0)
• 倍精度(64bit)浮動小数点型:double
  64bit長による浮動小数点形式で表される概数を表します.
• 単精度(32bit)浮動小数点型:float
  32bit長による浮動小数点形式で表される概数を表します.

一度これらの型で扱うと決めた変数には最後まで同じ型の数値のみを格納します. もし, この条件に違反するとコンパイルエラーとして扱われ, 通常のJavaScriptコードとして実行されます.

型の宣言方法

変数に対する型を宣言場所としては「functionのパラメータの型の指定」「共有/ローカル変数の型の指定」「functionの戻り値の型の指定」の3つがあり, 型ごとに記述する方法が異なります.

つまり変数に対する初回代入時の数値型をもって変数の型としているわけです. 従って変数のみを定義することは出来ません.

式内における型の補正

演算子や関数を伴う計算結果は元の数値型とは異なる型を返すことがあります. 例えば32bit整数の足し算が32bit整数の範囲を超えてしまうケースです. asm.jsではこのような数値を扱えませんから, 計算直後に|0を適用することで数値を32bit整数値に切り詰めねばなりません. 同様にdouble値, float値についても処理を継続するには演算結果が得られる度に数値型を補正するようにします.

この作業は変数を関数にパラメータとして渡す際, 関数から値を受け取った際, 型付き配列にインデックスを渡す際, 型付き配列の内容を受け取る際, 演算子に数値を渡す際のほとんどで行います.

数値リテラルの型

変数の型と同様に数値リテラルについても型が決定されます. これは先ほどの共有/ローカル変数の型指定にも使われていました.

型付き配列

asm.jsはもうひとつ, 型付き配列のみアクセスすることが出来ます. これは外部から渡されたArrayBufferを汎用のメモリ領域として扱うためのもので, 用途に応じて型付き配列のインターフェースを被せて中身にアクセスします(ArrayBufferの中身を直接操作する手段はありません). 但しインデックスによる値の操作以外はコンパイルエラーとなります.

型付き配列では種類ごとに得られる数値が異なります. そのためasm.js内外でデータを共有する場合は, 大抵同じ型付き配列インターフェースが利用されます.

型付き配列の内容を取り出す

型付き配列の内容を変数に取り出す際もしくは計算に用いる際, 型の補正が必要となります.

型付き配列では範囲外のインデックスにアクセスしようとした場合, JavaScriptではundefinedが返されます. 従ってそのままでは数値として扱えません. ここで型の補正を施すとそれぞれ0(undefined|0),NaN(+undefined), NaN(fround(undefined))となり, 型付き変数に格納可能となるのです.

型の補正は配列インデックスに変数を指定する際にも必要です. インデックスにはint型を渡す必要があるため, 適宜int型に補正します.

補足)型付き配列とエンディアン

JavaScriptでは通常メモリ内部でのバイトデータの並べ方(エンディアン)を考える必要はありませんが, 型付き配列を扱う場合は少し違います. ArrayBufferオブジェクトはJavaScriptが動作している環境の記憶領域に直接マップされているため, それを参照する型付き配列もエンディアンの影響を受けるからです. そのため, 複数のシステム間で生のバイナリデータを受け渡す場合はJavaScriptと言えどエンディアンを意識した処理が必要となります. JavaScriptではそのためにDataViewインターフェースが定義されています.

型の相互変換

asm.jsにおいては常に変数の型を意識しなければなりません. 従って, 異なる型の変数間で数値をやりとりする場合, 適切に型変換を指定しないとコンパイルエラーとなります. 以下に相互変換のための代表的なコードを示します.

int型に変換する必要がある場合は, Math.floor関数をインポートしておきましょう.

補足)型付き変数指定の副次的効果

変数に対する型付けは原則asm.js環境下でしか有効ではありません. がJavaScriptエンジンによっては通常のJavaScript動作環境においてもこの記法を元にコードの最適化を行うものがあります. 例えばループ処理を記述する場合, インデックス値のインクリメントに「i++」を使うよりも「i = (i+1)|0」を用いたほうがパフォーマンス的に有利な場合があります.

補足)asm.js仕様が定義している型

以下はasm.jsが仕様が定義している“概念としての”データ型です. 一部は一般的なプログラム言語における数値型の分類とも合致しており, 見方を変えると数値変数の内部状態とも言えます. 灰色のものは扱いに注意を要する型で, 処理を継続する場合には何らかの型の補正が必要となります.

型をその特性で分類すると次のようになります.

asm.jsで利用可能な演算子

asm.jsでは数値演算に関わる演算子のみが利用できます. 従って「||」や「&&」等の論理演算子や, 「new」や「instanceof」, 「===/!==」等のオブジェクトに関わる演算子はコンパイルエラーとなります.

大抵の演算子については左項と右項の型を揃える必要があります. また, 整数値に対する演算結果は32bit範囲から外れている可能性があるため切り詰め処理を要します.

int型の掛け算

この内注意すべき演算子としては, 「*」が挙げられます. この演算子はint型の掛け算には使えません. 別途Math.imul関数を使う必要があります. なぜならJavaScriptにおける巨大な整数値同士の掛け算処理は容易に32bit整数の範囲を超えてしまうからです. そのため, 他の処理系との互換性を高めたMath.imul関数を使う必要があるのです.

なお, int型と整数値リテラルの掛け算であれば条件付きで利用できます. リテラル値が-2²⁰+1〜2²⁰-1の範囲であれば, いかなる32bit整数値と掛け算を行っても, double値における整数表現の範囲に収まる(つまり, 浮動小数点形式へのアップキャストが発生しない)からです. もちろん計算結果は32bit整数値の範囲から外れている可能性がありますから型の補正を行います.

比較演算子

「==」等の比較演算子を用いる場合, 左項と右項の型を揃える必要があります. また, int型の場合はそのままでは符号の有無を判断することが出来ないため, 型の補正を行います. また比較結果を変数に格納する場合は, int型の変数に代入します.

比較結果を組み合わせる場合は論理演算子ではなく, ビット演算子を用います.

booleanリテラルの扱い

asm.jsでは真偽値リテラル「true/false」を使うことは出来ません. 別途整数値変数として定義することも出来ますが, 予約語である「true/false」とは別の名称を付ける必要があったり, 数値型としての比較を行わざるを得ず, 決して使い勝手の良いものではありません. どうしても必要な場合は「1/0」で代用しましょう.

条件演算子

条件演算子を用いる場合, then項とelse項の型を揃えます.

asm.jsで利用可能な算術関数・定数

演算子と同様にasm.jsでは数値演算に関わる算術関数及びそれに関わる数値定数のみが利用できます. いずれもMathオブジェクトのものを事前にインポートしてから利用します. なお, 戻り値の型が元と異なるものになっている可能性があるため, 適宜型の補正が必要となります.

一方Mathに定義されていてもインポート出来ないものもあります. roundやsqrt等がこれに当たります. なお処理速度を犠牲にしても良いのであれば, foreign関数として利用することは出来ます.

asm.jsと制御構文

asm.js環境においても原始的な制御構文は一部制限付きで動作します.

条件判定文

if構文

if構文を使う際に用いる比較演算子は左項と右項の型を揃えておく必要があります.

switch構文

switch文の条件式はint型である必要があります. また, ラベルは数値リテラルでなければなりません.

ループ構文

for構文

for文でカウンタをインクリメントするには面倒ですが数値の代入を用います.

do-while, while構文, continue文, ラベル付きbreak文

asm.jsにおいてもdo-while及びwhile構文, continue文, ラベル付きbreak文は使用可能です.

制御構文とreturn文

asm.jsでは関数が返す値はどのような経路を辿ったとしても同じ型であることが求められます. これは, 実装ロジック上ありえないルートにおいても同様で, return文が存在しない場合にコンパイルエラーとなります. 例えば次のようなケースです. 通常switch構文の全てでreturn文を使っていた場合, そこまでで処理は終了しますが, asm.jsコンパイラのためにswitch文を抜けた先にもreturn文が必要となります.

asm.jsで使えない構文

逆に機能上の制限から使えない構文もあります.

• asm.jsでは文字列, in演算子を使うことが出来ないため, for-in構文はコンパイルエラーとなります.
• asm.jsはtry-catch-finally構文をサポートしません. 関連してthrow文も使えません.
• {}によるスコープの分離は出来ません.
• この他ES6で新たに導入された構文は使えません.

つまり, 必要最低限の制御構文だけを使ってコードを記述していきます. これはいわゆる低級言語によるプログラミングに似ています. 実際, asm.jsコードの元となるLLVM形式の中間コードは, CやC++等の高級言語で記述されたプログラムをより機械語寄りに変換したものです. これらは本来プログラムのしやすさと言ったものとは無縁のものであり, 結果asm.jsコードも似たようなものになります.

JavaScript側のfunctionを呼び出す

asm.js関数の第二引数foreignにfunctionオブジェクトを設定しておくとasm.jsモジュールからモジュール外部の任意の関数(foreign関数)を呼び出すことが出来ます. この機能を用いると, asm.jsの機能だけでは実現できない仕組みをJavaScriptコードで補うことが可能になります. 例えば, ログの出力やUIコンポーネント(input要素)の設定値と言った内容をasm.js内部から参照することが可能になります. 但し, その仕組み上受け渡し可能なデータは数値に限られますし, 処理を動作速度の遅い世界に任せることになりますから使いすぎは禁物です.

foreign関数の構成

foreign関数を定義する場合, 次の点に注意します.

• パラメータの数, 型については意識せずに実装して良い.
  従って, 渡されるパラメータの数に応じた処理を実行しても正しく動作します.
• 戻り値はasm.js内部に渡る値なので, 原則数値のみを渡すようにします.
• asm.js内部ではtry-catch構文を用いた制御を行えません.
  従ってステータスコードと言った形で処理の正常/異常終了を伝達します.

また, foreign関数を使う(asm.js)側では次の点に注意します.

• パラメータとして渡す変数に対して必ず型の補正を行います.
  これは通常のasm.js環境での関数呼び出しと同じです.

パラメータの数によって処理を変化させる

foreign関数はJavaScriptの世界で定義されています. つまり, その実装内容に制限はありません. 従って次のようにパラメータ数不定の関数を定義しても, asm.js側から正しく呼び出せます.

foreign関数を介した外界へのデータ引き渡し

foreign関数を使えば, asm.jsの世界から外部にデータをpushすることが出来ます. これは例えばログの出力に応用できるでしょう.

foreign関数を介してasm.jsにデータを渡す

foreign関数のreturn値を用いるとasm.jsモジュールから外部の任意の数値を取得することが可能です. 但しその特性上取得できるのは単一の値のみです.

asm.jsモジュールを連携させる

foreign関数としてasm.js関数が生成した関数を指定することも出来ます.

数値文字列をasm.jsに渡す

数値が文字列として表現されていた場合, その文字列をasm.jsモジュールに渡すとその仕組み上自動的に数値型に変換されます. 変換ルールは|演算子, +演算子, Math.fround関数の(つまり, JavaScript標準の)仕様に従います.

文字列をasm.jsに渡す

asm.jsはもともと数値計算に特化した環境ですから, 一般的な文字列に対する処理は行えません. そもそもJavaScript本体が高度な文字列処理機構を備えているため, そのような処理を改めて実装する必要は無いはずです. しかし処理を最適化する目的から独自に文字列処理を実装する場合は, 文字列を数値データに変換することでasm.jsモジュール内部に渡します.

文字列から文字コード値への変換にはString.prototype.charCodeAtを, 逆に文字コードから文字への変換にはString.fromCharCodeを用います. この操作を文字列の長さの分だけ繰り返すのです. なお, 得られる値はUnicodeでの値(0〜65535・16bit値)になります.

TextEncoder/TextDecoderによるバイナリデータ化

文字列をバイナリデータに変換するAPIとして, 最も扱いやすいものとしては以下に示すTextEncoder/TextDecoderが挙げられます. これは文字列データを直接Uint8Arrayに変換するため, asm.jsモジュールと非常に親和性の高いものになっています.

Blobを経由した文字列のバイナリデータ化

Blob(Binary Large OBject)は本来ローカル環境のデータを扱う場合に便利なAPIですが, 直接文字列をバイナリデータ化する際にも利用できます.

文字列を一旦Blobオブジェクトに変換し, それをFileReadeでArrayBufferに変換した後asm.jsモジュールに渡すようにします. 処理結果はまたBlobオブジェクトとし, FileReaderで文字列に戻します. なお, Blobの読み込みをloadendイベントなどを使った非同期処理として記述せねばならず, コードの記述が若干煩雑化します. また, Blobを介した文字列処理では文字コードが強制的にutf-8として扱われるため, データの取り扱いがやや面倒です. 従ってBlob単独での利用は考慮しないほうが良いかもしれません.

Worker内部でのBlob処理

Worker環境下ではFileReaderオブジェクトの代わりにFileReaderSyncが利用できます. FileReaderと異なり, Blobオブジェクトの読み込みを(イベントを介さず)同期的に行えるため, 処理の流れに沿ったコードの記述が可能です.

ソースコードからasm.js関数を生成する

asm.jsモジュールを生成するasm.js関数も元を正せば単なるfunctionに過ぎません. 従って, eval関数やFunctionオブジェクトによる動的なasm.js関数の定義が可能です. 例を示します. function内部の処理は通常複数行で記述することが多いため, `を使ったテンプレート文字列によるコード記述が便利です.

これを応用すると, ソースコードの一部を外部から取得(インクルード)すると言った仕組みを構築することが可能です.

外部設定のインクルード

テンプレート文字列において${[変数名]}と記述することで外部変数の中身を文字列内部に取り込むことが出来ます. これを応用すると様々な設定を共有可能となります.

asm.js内外で定数を共有する

処理の都合上asm.jsモジュール内外で定数値を共有したい場合, 初期化関数を経由して定数値をasm.js内部に伝播するようにしますが, いささか記述が面倒です.

この時ソースコード文字列からasm.js関数を生成する方法を用いると, 簡潔に記述できます. asm.js内で定数を定義している部分をパラメータとし, 外部定数で置き換えるのです.

関数のインポート設定を共有する

複数のasm.jsモジュールを生成する場合, 参照しているMath関数の一覧を別変数に取り出しておくことで設定を共有することが出来ます.

関数定義を共有する

同様に共通に利用する関数そのものを別変数に切り出すことも可能です.