entry-header-eye-catch.html
entry-title-container.html

entry-header-author-info.html
Article by

Fukuoka.rs vol.2 で WebAssembly について話しました

こんにちは。ピクシブ福岡オフィスでエンジニアをしている petamoriken です。 先日 Fukuoka.rs vol.2 というイベントに登壇してきました。この記事はその LT に関する記事です。

WebAssembly by Rust

Rust で WebAssembly のバイトコードを作るにあたっての初歩的な部分について発表しました。

以前弊社のアドベントカレンダー2017で WebAssembly のスタンドアロンビルド という記事を書きましたが、当時の Rust では Nightly 環境でないとピュアな WebAssembly をターゲットにビルドすることが出来ませんでした。

しかし最近では Rust and WebAssembly というワーキンググループのもとで Rust の Stable 環境でもビルドすることが出来るようになり1、プロダクトに採用出来るようになってきています。特に wasm-bindgenwasm-pack (wasm-pack-plugin) を使えば webpack で普通のモジュールとして扱えるのが便利かと思います2

簡単に wasm-pack を使った例を載せますと、以下のように Cargo プロジェクトを作ります。プロジェクト名は sample としました。Gist にディレクトリを置くことが出来なかったのでファイル名を src¥lib.rs としていますが、src ディレクトリ以下に lib.rs があると思ってください。

そして cargo install wasm-pack で wasm-pack をインストールし、wasm-pack build コマンドを実行すると pkg ディレクトリに sample_bg.wasm という名前で WebAssembly のバイトコードと以下のファイルが作られます。

あとは webpack で扱えるようにこの sample プロジェクトに以下のファイルを追加します。 yarn もしくは npm install で依存する npm パッケージをインストールして npx webpack を実行するとブラウザで実行することが出来る HTML が得られます。WebAssembly ファイルの MIME を application/wasm として返さないといけないことに注意してください。

WebAssembly と似た用途で Emscripten を使って asm.js を出力したことがあるのですが、モジュールとして扱うのが大変だったり JavaScript のランタイムコードが膨れ上がったりして扱いにくいと感じていました。個人的に WebAssembly の技術とそのバイトコードを出力することが出来る Rust にとても期待をしていて、今回の Fukuoka.rs の会場でも同じ理由で Rust を学び始めたという方とディスカッションする一幕がありました。

宣伝まわり

最近福岡オフィスではもくもく会を開催しています。興味のある方はチェックしてみてください!

ピクシブ株式会社ではユーザーのためにプロダクトに先進的な技術を取り入れることが出来る、妥協ないエンジニアを募集しています!

福岡: 中途採用 / インターンシップ(学生)
東京: インターンシップ(学生)


  1. WebAssembly 固有な memory.grow 機能は Rust 1.33.0 以降で core::arch::wasm32 モジュールを使うことで実現できます。Chrome で実験的に実装されている Phase 2 ThreadsPhase 1 SIMD を試してみたい場合は Nightly 環境にしないといけません。 

  2. 将来的にブラウザに Import MapsLink rel=modulepreload 機能が入り、WebAssembly にも Phase 1 ECMAScript module integration が入れば webpack によるバンドリングも不要になるのかなと思っています。 

20191219014119
petamoriken
2017年7月から福岡オフィスでエンジニアをしている。元々フロントエンドエンジニアだったがiOSアプリやサーバーサイドなど様々な開発に携わっている。ECMAScriptやWeb標準を追うのが好き。Denoコントリビューター。百合男子。腐男子。