こんにちは。ピクシブ福岡オフィスでエンジニアをしている petamoriken です。 先日 Fukuoka.rs vol.2 というイベントに登壇してきました。この記事はその LT に関する記事です。
WebAssembly by Rust
Rust で WebAssembly のバイトコードを作るにあたっての初歩的な部分について発表しました。
以前弊社のアドベントカレンダー2017で WebAssembly のスタンドアロンビルド という記事を書きましたが、当時の Rust では Nightly 環境でないとピュアな WebAssembly をターゲットにビルドすることが出来ませんでした。
しかし最近では Rust and WebAssembly というワーキンググループのもとで Rust の Stable 環境でもビルドすることが出来るようになり1、プロダクトに採用出来るようになってきています。特に wasm-bindgen と wasm-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 を学び始めたという方とディスカッションする一幕がありました。
宣伝まわり
最近福岡オフィスではもくもく会を開催しています。興味のある方はチェックしてみてください！
ピクシブ株式会社ではユーザーのためにプロダクトに先進的な技術を取り入れることが出来る、妥協ないエンジニアを募集しています！
福岡: 中途採用 / インターンシップ（学生）
東京: インターンシップ（学生）
-
WebAssembly 固有な
memory.grow機能は Rust 1.33.0 以降でcore::arch::wasm32モジュールを使うことで実現できます。Chrome で実験的に実装されている Phase 2 Threads や Phase 1 SIMD を試してみたい場合は Nightly 環境にしないといけません。 ↩ -
将来的にブラウザに Import Maps や Link rel=modulepreload 機能が入り、WebAssembly にも Phase 1 ECMAScript module integration が入れば webpack によるバンドリングも不要になるのかなと思っています。 ↩
