WebAssemblyとは｜概要や利用状況、将来性を解説 |【案件ナビNEWS】

Webサイトでプログラムを実行する際は、サーバーサイドとクライアントサイドを意識しなければなりません。特に、クライアントサイドは実行できるプログラムが少ないため、それを意識した開発が求められます。

ただ、WebAssemblyを利用すると、クライアントサイドでも幅広いプログラムの実行が可能です。今回は、Webサイトでプログラムを実行する仕組みである、WebAssemblyについて解説します。

この記事の目次

WebAssemblyとは
WebAssemblyを活用する4つのメリット
WebAssemblyはDOMに非対応
WebAssemblyの利用状況
WebAssemblyの将来性
まとめ

WebAssemblyとは

最初に、WebAssemblyとはどのような技術であるのか、理解を深めておきましょう。

概要

WebAssembly（略称：Wasm）は、ウェブブラウザ上で高性能なコードの実行を可能にする、新しい種類のコード形式です。従来、Web上、つまりクライアントサイドで実行可能な唯一の言語はJavaScriptでした。しかし、WebAssemblyの登場により、それが変化しているのです。

WebAssemblyは、バイナリ形式で配布されるプログラムであり、ブラウザが解釈とコンパイルを迅速におこなえます。結果、JavaScriptよりも高速に実行可能であり、特に高負荷の計算処理やパフォーマンスが求められるタスクにおいて効果を発揮するようになりました。

また、重要な特徴として「多様な言語からコンパイルすることが可能」ということが挙げられます。詳細は以下にまとめますが、他のプログラミング言語を用いてWebアプリケーションを開発できるのです。既存のコードベースやライブラリをWebで再利用できるため、開発の効率性が大幅に向上するようになりました。

他にも、WebAssemblyはブラウザのサンドボックス環境内で実行されるため、セキュリティが強固です。これらの特性が組み合わさることで、WebAssemblyはウェブブラウザ上での高度なゲーム、マルチメディア処理、画像・ビデオ編集ツール、物理シミュレーション、さらには機械学習アプリケーションなどを幅広く実装できるようになっています。

対応ブラウザ

WebAssemblyは2023年9月現在、主要なブラウザであれば多くが対応しています。例えば以下のとおりです。

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

パソコンで利用するブラウザはもちろん、スマートフォンやタブレット向けに最適化されたブラウザでも、WebAssemblyが利用できます。非常に多くの環境で利用できると理解して良いでしょう。なお、最新の対応状況は、公式サイトなどから確認できます。

参考：WebAssembly対応ブラウザ | Can I use… Support tables for HTML5, CSS3, etc
参考：WebAssembly対応ブラウザ | Roadmap – WebAssembly

対応言語

対応している言語の種類は少しずつですが、増えていて、現在は以下が利用できます。

Rust
C#
Dart
Go
Kotlin
Swift

その他の言語についても、WebAssemblyで利用できるように開発されている状況です。今後、さらに利便性の高いものへと進化するでしょう。

WebAssemblyを活用する4つのメリット

Web開発においてWebAssemblyを利用することにはいくつものメリットがあります。今回は4つに絞って解説します。

パフォーマンスの向上

WebAssemblyは、ブラウザ内での処理速度とパフォーマンスの向上を実現します。これは、WebAssemblyがバイナリ形式のコードであるからです。

現行、主流であるJavaScriptのコードはテキストベースであり、ブラウザによって読み込みから解釈、最終的にバイトコードへの変換へと進められます。これに対して、WebAssemblyはすでに低レベルのバイナリ形式で提供されているため、解釈とコンパイルにほとんど時間を要しません。

さらに、WebAssemblyはほぼネイティブのスピードで実行されます。これは、CPUの命令セットに非常に近い状態で提供されているからです。結果、高いリソースが必要とされる、ゲーム、3Dグラフィックス、音声と動画の処理などのアプリケーションでも、ブラウザ内で効率的に動作させることが可能です。

言語選択肢の増加

従来、Web開発のコーディングは主にJavaScriptでおこなわれていました。しかし、WebAssemblyの登場により、C/C++やRustなどが選択できるようになっています。

言語の選択肢が増えたことにより、開発者はより多くの言語から開発に適した言語を選択できるようになりました。自分の得意分野を考慮したり、最適なパフォーマンスと機能を提供する言語を選択したりできるのです。

また、特定の開発チームが既に習熟している言語を使用できるようになったこともメリットでしょう。学習に必要なコストを最低限に抑えられ、開発速度の向上へと繋げられます。

既存コードの再利用

WebAssemblyを使用すると、すでにC/C++など別の言語で書かれた既存のコードを再利用できます。既存のコードベースやライブラリを再利用できるようになり、新たにJavaScriptに書き直す手間がなくなるのです。

このような再利用を実現できれば、既存のアルゴリズムや、テスト済みのソースコードをWebに移行しやすくなります。本来は時間をかけて実装や評価する必要がありますが、これらを割愛することが可能です。

セキュリティの向上

WebAssemblyは、ソースコードがブラウザ内のサンドボックス環境で実行されるため、セキュリティの向上が期待できます。サンドボックスは、ホストシステムから隔離されているため、WebAssemblyのプログラムは制限された操作しか実行できないからです。これにより、マルウェアや他のセキュリティ脅威からシステムを保護できます。

また、WebAssemblyは静的に型付けされ、構造化も済まされているため「型安全」が保証されています。これにより、意図しないデータ操作や不適切なメモリアクセスを防ぐことも可能です。さらに、WebAssemblyはメモリアクセスを制限し、バッファオーバーフローのような一般的なプログラミングエラーから保護する役割も果たしてくれます。

WebAssemblyはDOMに非対応

WebAssemblyは高速に実行できるバイナリ形式のコードで、複数のプログラミング言語からコンパイルできる魅力的なものです。しかし、直接的にはWebのDocument Object Model（DOM）にアクセスできないという制約があります。これはWebAssemblyの設計思想に由来し、ブラウザと相互作用するか、どのような目的で使用されるべきかに関連している部分です。

上記でも解説したとおり、WebAssemblyは主に高パフォーマンスが求められる計算の実行や、既存の高度に最適化されたコードのWebへの移植を目的としています。つまり、DOMとの相互作用よりも、CPUの計算能力を最大限に利用することが重視されているのです。そのため、WebAssemblyが直接DOMにアクセスする機能を持っていない理由は「最初から設計に考慮されていなかった」だといえるでしょう。

ただ、WebAssemblyがDOMとまったく併用できないわけではありません。WebAssemblyとDOMとの間を、JavaScriptでブリッジすれば活用が可能です。WebAssemblyからJavaScriptに制御を戻すことで、JavaScriptを通じてDOMにアクセスしたり、DOMの変更を実現できます。

このような使い方があることも踏まえると、WebAssemblyとJavaScriptは互いにサポートし合う関係です。JavaScriptがDOM操作やイベント処理などのブラウザとの相互作用を担当し、WebAssemblyは高負荷の計算処理を担当します。

WebAssemblyの利用状況

実際に、WebAssemblyがどのような状況で利用されるのか、ユースケース的に紹介します。

ゲーム

WebAssemblyは、ブラウザで高パフォーマンスなゲームを動作させるのに適しています。例えば、複雑な3Dグラフィックスや物理シミュレーションを効率的に処理することが可能です。WebAssemblyを導入すると、Webゲームの開発において魅力的な機能を実現できるでしょう。

実際、UnityやUnreal Engineなどの大規模なゲームエンジンがWebAssemblyのサポートを明言しています。同様の仕組みが広がれば、さらに効率よくゲームを開発できるようになるはずです。

音声と動画のエンコード/デコード

音声や動画のエンコード/デコードはリソースを大量に消費します。これを効率的に処理するためには高性能な計算能力が必要であり、WebAssemblyならばこれをブラウザ上で実現することが可能です。

また、特定のエンコード/デコードアルゴリズムをWebAssemblyで実装すると、ブラウザがネイティブにサポートしていないフォーマットでも動画や音声を再生できます。ユーザの利便性を高めるという観点でも、WebAssemblyが役立つため積極的に利用されています。

物理シミュレーションや機械学習

WebAssemblyの計算能力は、物理シミュレーションや機械学習のアルゴリズムの実行にも利用できます。これにより、ユーザーがブラウザ上でリアルタイムにシミュレーションを視覚化したり、機械学習モデルを用いた予測や分析を実現したりできるのです。

このようなシミュレーションや学習は、JavaScriptだけでは実現することが難しくなっています。しかし、WebAssemblyで他の言語を組み合わせることで、比較的簡単に実装できるようになるのです。

WebAssemblyの将来性

最後に、WebAssemblyの将来性についても考察し解説していきます。

GitHubでの開発が続き将来性に期待

WebAssemblyは、GitHubを中心に開発が進められています。2023年9月現在、1日に数回はGitHubの内容が更新されていて、非常に活発な状況です。このような状況を踏まえると、開発が急に終了する可能性は低く、将来性は明るいといえるでしょう。

また、開発が予定されている機能は、今後の活用が期待されるものが中心です。新しくそれぞれのブラウザに搭載されることで、ユーザの利便性が大きく変化するでしょう。開発される機能に左右される部分はありますが、大いに期待できるプロジェクトであると考えられます。

JavaScriptの完全な置き換えとはならない

JavaScript以外のプログラミング言語を活用するために、WebAssemblyが開発されています。ただ、JavaScriptには独自の特徴があるため、これが不要になるというわけではありません。JavaScriptとWebAssemblyは、両方を活用することが求められます。

特に、上記でも触れたようなDOM操作は、WebAssemblyの設計指向を踏まえると実装されるとは考えられません。しかし、Web開発においてDOMは非常に重要な要素であるため、無視することはできないのです。つまり、WebAssemblyが発達してもJavaScriptは必須となるため、その点は理解しておくと良いでしょう。

まとめ

Webで複数のプログラミング言語を実行するWebAssemblyについて解説しました。今まではJavaScriptの選択肢しかありませんでしたが、WebAssemblyの開発が進められ、他の言語も利用できるようになっています。

ただ、WebAssemblyには利点だけではなく、DOMを操作できないなどの注意点がある状況です。そのため、今後のWeb開発でJavaScriptが利用されなくなるような状況にはなりません。WebAssemblyとJavaScriptを併用する時代となるでしょう。