🎄

WebAssemblyに入門する

2024/12/01に公開

はじめに

最近Rustで学ぶWebAssemblyという本を購入しました。
読み進めていく中でWebAssemblyにとてもワクワクしたので、
学んだことをアウトプットしつつ、その理解を深めていきたいと思います。

https://amzn.asia/d/3a9S1vE

WebAssemblyとは?

WebAssemblyとは、Webブラウザ上で動作する、新しいバイナリ形式のコードです。
省略形ではWasmと表記されます。
C++ や Rustなど様々な言語からコンパイルすることができ、
ネイティブに近いパフォーマンスで動作します。

ブラウザ上で動作する言語といえば、JavaScriptがありますが、
WebAssemblyはJavaScriptを置き換えるのではなく、共存し、パフォーマンス面などを補強する存在です。

JavaScriptの豊富な資産を活用しつつ、
プログラミング言語やプラットフォームにとらわれないWebAssemblyを併用することで、
これまで以上に柔軟かつパフォーマンスの高いアプリケーションを作成することができます。

https://developer.mozilla.org/ja/docs/WebAssembly/Concepts

WebAssemblyの特徴

WebAssemblyの特徴として、

  • 様々な言語からコンパイルすることができる
  • 作成元が信用できないコードも安全に実行できる

といった特徴があります。

様々な言語からコンパイルすることができる

C++ や Rust、Goなどの、様々な言語からコンパイルすることができ、
arm64やx86_64のように、ビルドターゲットとして指定することができます。

冒頭で触れたように、WebAssemblyはWebブラウザ上で動作します。
つまり、上記のようなプログラミング言語をコンパイルしてWebAssemblyに変換することで、
複数の言語がWebブラウザ上で動作できることになります。

また、コンパイルされたバイナリーファイル(Wasm)を、可読性のあるテキストファイル(WIT)に変換することができます。

作成元が信用できないコードも安全に実行できる

Webサイトは自由に作成し、公開することができるため
場合によっては悪意のあるコードを実行することができてしまいます。
そのため、現在のWebブラウザでは、そのような信頼のできないコードを安全に実行できる工夫がされています。

例えば、Google Chromeでは、V8というJavaScriptエンジンを使用しています。
V8のサンドボックス機能により、Webブラウザの実行環境とは別の環境の中で、
メモリ空間を切り離してJavaScriptを実行することができます。
これにより信頼のできないコードを安全に実行できるようになっています。

WebAssemblyもJavaScriptと同様に、誰でも作成・公開をできてしまうため、
サンドボックス環境を用いて安全に実行できるようになっています。

https://v8.dev/blog/sandbox

活用事例

本書の中で紹介されていた事例や、調べた中で興味深かった事例を紹介します。

Goodnotes

本書の中で、Goodnotesの事例が紹介されていました。
Goodnotesは私も愛用しているiOSのノートアプリですが、
元々はiOSとiPad向けのアプリとしてのみ提供されていました。
違うOSやプラットフォーム向けに同じアプリを提供するという課題に対して、
WebAssemblyを活用することで解決したとのことです。

FlutterやComposeなどで書き換えるという方法もありましたが、
すでに十分にテストされた10万行以上のコードを活用することができたそうです。

詳細が気になった方は、下記の記事をご覧ください。

https://web.dev/case-studies/goodnotes?hl=ja

Figma

弊社でも使用しているデザインツールのFigmaでも、
WebAssemblyを活用していると知りました。

FigmaはデスクトップアプリとしてもWebアプリとしても提供されていますが、
asm.jsでコンパイルした場合と比較して、ロード時間を3倍に短縮できたとのことです。

こちらも、詳細が気になった方は、下記の記事をご覧ください。

https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/

まとめ

本書を通して、WebAssemblyの魅力を感じました。
エコシステムが発展している最中ではありますが、
WebAssemblyを活用して、柔軟かつパフォーマンスの高いアプリケーションを作成してみたいと思います。

Aidemy Tech Blog

Discussion