よこのじ(@yokonoji_work)です。
Webで様々な処理を実行するJavaScriptですが、処理速度は速くありません。にもかかわらず、Web上で表現したいことはより高度になっています。ゲームや動画編集などをJavaScriptでやるには処理速度に問題が・・・これをWebAssemblyが解決してくれます。
WebAssemblyとは?
WebAssemblyとは、ブラウザ上で実行する機械語(バイナリコード)のフォーマットです。
C、C++のような処理の速い言語をWebAssembly形式にコンパイルできるように設計されています。その他、RustやGoもWebAssemblyに対応した言語です(記事中では冗長を避けるためにC、C++との記載で説明していきます)。
WebAssembly形式にコンパイルすることにより、Web上でC、C++で書かれたプログラムを実行することが可能となります。
WebAssemblyを利用するメリットには次のようなものがあります。
- Web上でC、C++の処理を元の水準に近い速度で実行できる(高速処理)
- 既存のプログラムを他の言語に書き換えずにWeb上で実行できる(資産の利用)
WebAssemblyは、Web技術の標準化を進めるW3Cや主要ブラウザのベンダーMozilla、Google、Apple、Microsoftが開発に関わっていますよ。
WebAssemblyとJavaScriptは仲間
WebAssemblyはJavaScriptと並行して動作するように設計されています。これは、WebAssemblyからJavaScriptの関数を呼び出すなど、両者の間で機能を共有することが可能ということです。
- 高速処理が可能なWebAssembly
- Web上で多くの処理・表現が可能なJavaScript
WebAssemblyはJavaScriptを駆逐する技術ではなく、JavaScriptと一緒にWebの可能性を広げる技術です。
WebAssemblyは必要か?
Webブラウザに実行環境が搭載されているJavaScriptは様々な処理を行っています。元々高速に動作するプログラミング言語ではなかったJavaScriptですが、2008年頃に複数のブラウザがJIT(ジャストインタイムコンパイラ)という仕組みを導入したことで、処理の実行速度が急激に向上しました。
JITにより当初の10倍高速になったJavaScriptは、Node.jsによってサーバーサイドで使用されたりと、それまでとは違う分野もカバーしていくこことなりました。
より広い活躍が期待されるJavaScriptですが、さらに処理速度を向上させるにはどうするか?その技術としてWebAssemblyが必要とされています。
WebAssemblyは完璧ではない
WebAssemblyを使えば処理は速くなりますが、扱いには注意が必要です。
WebAssemblyは外部ファイルとして存在してJavaScriptから呼ばれて実行されます。よって、このファイルサイズ分だけ通信時間がかかりますし、JavaScript側は呼び出すための処理が追加されるのでその分だけ処理時間は増えます。
図のように、処理の中でJavaScriptが遅く足を引っ張っている状況では、WebAssemblyによる処理の高速化は大きな効果があります。しかし、JavaScriptが占める割合が小さいと最悪の場合、通信時間などが増えた分、全体としては元より時間がかかってしまうことさえ考えられます。
WebAssemblyの今後に期待
こちらはWebAssembly公式のデモページです。
Unityで作られたゲームがWebAssemblyにエクスポートされたものらしいです。実際にプレイしてみると、このとおり軽快に動きます。
Web技術の標準化を進めるW3CやMozilla、Google、Apple、Microsoftが開発に関わるWebAssemblyは今後Webの主要な技術になる予感がします。
そうなれば、既存のプログラムがWeb上に持ち込まれ、あらゆるサービスが場所や動作環境を選ばずに利用できるようになります。
今後の展開を期待したいですね。
JavaScriptは世界で最も需要のあるプログラミング言語です
[itemlink post_id=”761″]
[toggle title=”参考サイト”]
A cartoon intro to WebAssembly
【2017年4月版】WebAssemblyとは?〜実際にC言語をブラウザで動かす〜
WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]
「WebAssembly」がITの未来に変革もたらす|Google、Apple、Microsoft、Mozillaが共同で開発した新概念
[/toggle]