ホーム

WebAssemblyとは?何ができるかを解説

作成日: 2023-10-22

更新日: 2023-11-3

WebAssemblyとは?何ができるかを解説

この記事を読んだ後に理解できること

  • WebAssemblyの概要
  • WebAssemblyでできること
  • WebAssemblyの仕組みについて

WebAssemblyとは

WebAssemblyとは、ウェブブラウザ上で動作する新しい種類のプログラムコードです。

特に、高い速度と多様な機能を提供して、ウェブの体験を向上させる目的で開発されました。

WebAssemblyが解決する問題

WebAssemblyを使うことでハイパフォーマンスなアプリケーションを提供することができます。

例えば以下のような領域での活躍が期待されています。

  • 3Dゲーム
  • 仮想現実
  • 画像・動画編集

上記のような領域では、ハイパフォーマンスなアプリケーションが必要です。

しかし、現在Webブラウザ上で動作するプログラムは、JavaScriptのみです。

JavaScriptは決してパフォーマンスに優れた言語ではありません。

WebAssemblyを用いることでこれらの領域でもネイティブアプリケーションレベルのパフォーマンスを発揮することが可能です。

ネイティヴアプリケーションに関する補足

「ネイティブアプリケーション」とは、特定のデバイスやオペレーティングシステム(OS)向けに最適化されて開発されたアプリケーションを指します。

ネイティブアプリケーションは、直接デバイスのハードウェアリソースを利用するため、Webアプリケーションに比べて一般的に高速に動作します。

WebAssemblyはJavaScriptの代替ではない

WebAssemblyは、フロントエンド領域における新しい選択肢ではありますが、JavaScriptを代替するものでありません

WebAssemblyが目指すのは、JavaScriptとの共存です。

これまでのWebアプリケーションは、JavaScriptのみが基本でした。

今後は、JavaScriptとWebAssemblyを使うケースが出てきます。

WebAssemblyでできること・できないこと

WebAssemblyはまだ黎明期の段階なので、当然できることに制限があります。

WebAssemblyができること

  • ネイティブに近いパフォーマンスでのコード実行

    WebAssemblyはネイティブコードに非常に近い速度で動作するため、高い計算パフォーマンスが必要なタスクに適しています。

  • 多言語対応

    C, C++, Rustなどの多くの低水準言語からWebAssemblyへのコンパイルが可能です。これにより、これらの言語で書かれたアプリケーションやライブラリをWeb上で動かすことができます。

  • JavaScriptとの連携

    WebAssemblyはJavaScriptとシームレスに連携できるため、既存のJavaScriptのフレームワークやライブラリと組み合わせて使用することができます。

  • セキュアな実行環境:

    WebAssemblyはサンドボックス内で実行されるため、ホストシステムに対する直接的な悪影響を及ぼすことはできません。

  • ポータブル

    WebAssemblyはプラットフォームやデバイスに依存せずに動作します。

WebAssemblyができないこと

  • 直接のDOM操作

    WebAssemblyは直接DOMを操作する機能を持っていません。DOMの変更や操作が必要な場合、JavaScriptを経由して行います。

  • システムへの直接アクセス

    WebAssemblyはセキュリティの観点から、実行しているデバイスやシステムのリソースに直接アクセスすることはできません。

  • 高水準言語の全機能

    一部の高水準言語の機能やライブラリはWebAssemblyにコンパイルする際にサポートされていないか、または効果的に動作しない場合があります。

  • すぐに実行される

    WebAssemblyモジュールは、実行前にブラウザによってコンパイルされる必要があります。

  • 全てのブラウザで動作

    古いブラウザや一部の特定のブラウザでは、WebAssemblyはサポートされていない場合があります。

WebAssemblyの仕組み

WebAssemblyのコードは、RustやC言語といった低水準の言語で書かれたプログラムをWebAssemblyという形式に変換(コンパイル)することで生成されます。

ここでいう低水準の言語とは、「マシンに近い言語」のことを指します。

低水準の言語の特徴としては、以下があげられます。

  • ハードウェアの詳細に近いコードを記述する
  • メモリ管理や最適化などを手動で行うことが多い
  • 実行速度が速い

これに対して、人間が読みやすい言語を「高水準の言語」と呼びます。

例えば、PythonやJavaScriptなどが高水準の言語に分類されます。

WebAssembly形式にコンパイルされたモジュールをJavaScriptのコード内でimportする等で使うことができます。

まとめ

WebAssemblyでは、ざっくり以下ができるようになります。

  • ネイティヴアプリケーションレベルのパフォーマンスを発揮することができる
  • JavaScript以外の言語(Rust、C言語等)をブラウザ上で実行できる
  • 拡張現実、画像・動画編集等のアプリケーションにおいてハイパフォーマスを発揮する