Web Assemblyが流行るかも

先日、LT大会でWebAssemblyについてお話ししたのでその内容含めて記事を書きました。

調べようと思った背景

弊社ではWebデザインのすり合わせにFigmaを使用しているのですが、そんなFigmaはWebAssemblyを使っているから高パフォーマンスを実現しているらしく、気になったので調べてみました。

公式ブログを見ると、本当にWebAssemblyのおかげでロード時間が大幅短縮されていることがわかります。

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

WebAssemblyとは

• ウェブブラウザで高速に実行できるバイナリフォーマットの仕様
  Javascript以外の言語（C++, Rust…）をブラウザ上で実行できるようにした

• コンパイル済みのコードを実行するため、処理速度が向上する
  ブラウザ上でのゲーム、動画編集、機械学習など
  
  →
  
  環境も整ってきてこれから活用するサイトが増えてきそう

そもそもjavascriptは

Webサイトに動きをつけるために開発されたプログラミング言語で、動的型付け言語、インタープリタ言語など遅い原因が多くあります。

そのためFigmaを始めとしたロード速度が求められるようなゲーム、機械学習など実行される想定はされていないです。

Web Assemblyを試してみた

入門書の電子書籍サイトという便利なサイトがあったので、こちらで実際にWebAssemblyを試してみました。

• ステップ1
  環境構築などは省きます。まずrustやc++などの言語で実行したいコードをかきます。
  上記のサイトではrustを使用していました。

#[no_mangle]
pub fn multiple(a: i32, b: i32) -> i32 {
    a * b
}

• ステップ2
  次に、書いたコードをWebAssemblyにコンパイルしてバイナリ形式のファイルに変換します。

$ cargo build --target=wasm32-unknown-unknown

• ステップ3
  そして、javascriptからコンパイルしたコードを読み出し、実行します。

<script>
    const wasm = './target/wasm32-unknown-unknown/wasm_dev_book_hello_wasm.wasm'
    fetch(wasm)
      .then(response => response.arrayBuffer())
      .then(bytes => WebAssembly.instantiate(bytes, {}))
      .then(results => {
        console.log(results.instance.exports.multiple(3, 5))
      })
  </script>

WebAssemblyのデメリット

では逆にデメリットは何か、いくつかありますがこのようなものがあります。

• デバックがしづらい
  バイナリ形式のため、直接デバッグできず、エラー原因がわかりにくい

• Javascriptの代替となるわけではない
  wasmとAPIとの直接通信やwasmモジュール同士の通信はまだ開発段階

• 保守性が微妙
  c++やRustで書くと引き継ぎが大変そう

ですがこの辺りは今後の開発で改善されていく可能性もありそうです。

最後に

WebAssemblyはwebのパフォーマンス向上以外に、セキュリティ面で優れていてコンテナに変わるとも言われており、今後の動向もチェックしていこうと思います。