Webアプリケーションが進化するとともにJavaScriptが担う処理が膨大化するなか、実行速度を補完する目的でWebAssemblyの活用が広がっています。

本記事では、C/C++などで構成された既存のプログラムをWebブラウザでも実行できる、WebAssemblyの概要や活用シーンを紹介。UnityやGoogle Earth、AutoCADなどにも採用されている、WebAssemblyの将来性も含めてわかりやすく解説していきます。

WebAssemblyとは？

WebAssemblyは、Webブラウザ上で高速に動作するバイナリコードの仕様を指す言葉です。WebAssemblyの頭文字を取って、「Wasm」と略されることもあります。ネイティブに近いパフォーマンスをWebブラウザで発揮できるため、Webブラウザを介したアプリケーションに適したフォーマットとして評価されています。

なお、WebAssemblyはJavaやPHPなどのプログラミング言語ではありません。WebブラウザでコンパイルされたC/C++やRustを実行する仕組み（アセンブラ）を指すものです。Webアプリケーションが複雑になるとともに、JavaScriptでは処理速度が追い付かないことを補完する目的で誕生しました。

WebAssemblyが利用される目的としては、ネイティブアプリケーションをWebアプリケーションとして移行するケースが主流となっています。また、処理の重い高性能なブラウザゲームの開発にも使われることがあります。

JavaScriptでは対応しきれない処理速度が要求される場合に、ブラウザ上で別のプログラミング言語を実行させる仕組みと考えればイメージしやすいでしょう。

対応ブラウザと対応言語

2023年2月現在、主要とされている多くのブラウザにWebAssemblyは対応しています。

• Google Chrome
• Microsoft Edge
• Safari
• Firefox
• Opera
• Chrome for Android
• iOS Safari
• Android Browser
• Firefox for Android

なお、最新の対応状況についてはこちらを参照してください。

また、次のプログラム言語に対応しています。

• Java
• PHP
• C# .NET
• C++
• Ruby
• C
• Swift
• R
• Go
• Rust

ほかの言語についても開発が進められているため、対応領域は今後さらに拡大していくと見込まれています。

WebAssemblyのフォーマット

プログラミング言語で書かれたアプリケーションを実行するためには、コンパイルが必要です。

C++などで書かれたコードをコンパイルし、WebAssemblyバイトコード（WASMコード）に変換することで、Webブラウザ上での実行が可能になるという仕組みです。

通常、バイナリコードは人間による読み書きは困難です。一方、WASMではテキスト形式での表現が可能になっています。テキストエディターや開発ツールにて、レビューや編集を実行できるように設計されていることが、WebAssemblyの大きな特徴のひとつです。

なお、このWASMをテキスト形式にフォーマットしたものを、WAT（WebAssembly Text Format）と呼びます。

• WASM：バイナリ形式のフォーマット
• WAT：テキスト形式のフォーマット

上記のように両者の違いを覚えておくとよいでしょう。

WebAssemblyの必要性

通常、Webブラウザでアプリケーションを構成する際にはJavaScriptが用いられます。

これまで、JavaScriptはWebページにギミックを加える用途が主でした。しかし現在では技術の発達とともに要求される処理が煩雑化しています。Webアプリケーションが洗練されていくとともにJavaScriptの処理も膨大になりつつある状況です。

そこで必要とされたのが、WebAssemblyです。JavaScriptの処理速度問題を解決する補完策として、GoogleやMicrosoft、Mozzila、Appleで仕様の策定と開発が行われてきました。

JavaScriptに実行速度が求められるようになった

jQueryの登場によりクロスブラウザでの不整合が解消され、ajaxの普及でWebアプリケーションは進化し、そしてHTML5の標準化に至りさまざまなAPIが利用可能になりました。

つまり、JavaScriptが活躍するシーンは次第に増えてきています。当初の「HTMLの装飾」といったJavaScriptの役割からは想像ができないほど、Webアプリケーションは進化し続けているのです。

WebGLを用いた3Dゲームなどに見られるcanvasへの描画処理はその代表格でしょう。スマートフォンなどマシンスペックが比較的低いコンピュータで3Dアニメーションを含んだアプリケーションを実行させるには、JavaScriptでは処理が追い付かず、シームレスなユーザー体験を提供することはできません。また、JavaScriptはブラウザでアクセスする度にコンパイルが必要になるため、どうしても開始処理に時間がかかってしまいます。

モバイル端末の普及などを背景に、Webアプリケーションが高速動作する実行環境の需要が高まってきたのです。

asm.jsが登場したがロード時間に制約があった

より速い処理が必要とされるなか、JavaScriptの高速化を図る取り組みが行われます。それがasm.jsの登場です。

asm.jsはC/C++をWebブラウザで実行できるとして大きな話題になりました。開発はFirefoxで知られるMozillaです。それまでのJavaScriptは異なり、事前にコンパイルができるため、より高速にアプリケーションを実行する環境が整いました。

このasm.jsは、WebAssemblyのルーツともいわれていますが、不完全な仕様でもあります。WebブラウザでC/C++を実行でき、動作も高速なasm.jsでしたが、最終的にはJavaScriptの制約を抜け出すことはできませんでした。「ロードに時間がかかり過ぎていたために頓挫した」旨を、Mozillaの開発者も実際に言及しています。

他方、バグや仕様と実装の乖離が散見されていたという指摘もあります。いずれにしてもMozilla単独で開発していたasm.jsよりも主要ブラウザ各ベンダーが共同で策定しているWebAssemblyの方が汎用的であり、より広く世間に浸透していったことは事実です。

WebAssemblyでできること

WebAssemblyによって、以下の処理が可能になります。

• JavaScriptの限界を超えた高速処理
• 既存のソースコードのブラウザでの実行

WebAssemblyの最大のメリットは、WebブラウザでJavaScriptが担っていた処理の高速化が可能な点にあるでしょう。JavaScriptとのベンチマーク検証を行ったところ、WebAssemblyの方が5倍以上高速に動作したというケースもあるほどです。

また、WebAssemblyはC/C++などで構成された既存のプログラムをWebブラウザで実行できます。これは、ネイティブアプリケーションをWebアプリケーションへ容易に移行できるメリットになるものです。

JavaScriptの限界を超えた高速処理

いままでJavaScriptが担っていた処理を高速に実行するWebAssemblyの登場は、Webアプリケーション制作者にとって革新的なことでした。具体的な分野で表すなら、ネイティブな3Dゲームを専用のアプリケーションを介すことなく、Google ChromeやFirefoxなどで遊べるようになったということです。

こうしたゲームの例に限らず、あらゆるネイティブアプリケーションがWebアプリケーション化することで、インストールの有無を問わずどの端末からでもアクセスが可能な環境を構築できるようになります。

既存のソースコードのブラウザでの実行

既存のソースコードを流用できる最大のメリットは、やはり開発コストの削減です。

C/C++などのプログラミング言語で書かれているアプリケーションを、同等の機能を有するJavaScriptアプリケーションへ作り変えるとなると、莫大な費用と労力が発生します。また、C/C++と同等のパフォーマンスをJavaScriptが発揮することはまずありえないでしょう。

コストの面だけではなく、アプリケーションのクオリティに関しても、既存のプログラミング言語を流用できるメリットは大きいです。

WebAssemblyでできないこと

WebAssemblyは、DOM操作が出来ません。

そもそもWebAssemblyは、PHPやJavaのようなプログラミング言語ではないため、HTMLの要素を操作することを前提として設計されていません。HTMLの要素を動かしたい場合には、JavaScript経由で行う必要があります。

WebAssemblyのユースケース

具体的なWebAssemblyの利用シーンの例には、次のようなものが挙げられます。

• ビデオまたはオーディオ編集
• Webブラウザでのゲーム
• 科学分野での視覚化とシミュレーション
• コンピュータゲームのエミュレーター

重い処理を求められる描画や、物理や化学などの分野で行われる緻密なシミュレーションに利用されるケースが目立ちます。

WebAssemblyの将来性

現在、WebAssemblyはGithubにてGoogle、Microsoft、Mozzila、Appleによる開発が進められています。なお、実装済みの機能はWebAssemblyの公式サイトにまとまっています。Githubのリポジトリを確認すると、1時間単位で動いているため、今後の積極的な機能拡張も十分に期待できるでしょう。

最近ではGoogle Chromeがガベージコレクションに対応したことで、Dartなどの高水準言語が対応される可能性があるとしても注目を集めています。

実際にWebAssemblyが利用されているアプリケーションも多岐に渡ります。

• Unity
• Google Earth
• AutoCAD
• Figma

これらの著名なアプリケーション群も目にとまることから、今後の将来性も高く期待できる技術と評価できるでしょう。