RustでWebAssembly

RustでWebAssembly
株式会社セレス　インフラチーム
樫本直弘

About Me
● 樫本直弘（かしもとなおひろ）
○ GitHub:https://github.com/NaohiroKashimoto
● 株式会社セレスの（中略）インフラチーム所属
● 業務
○ 内部統制(IT)
○ バックエンドの管理（プロビジョニング、モニタリング、 etc...）
● バックグラウンド
○ N88-BASIC,80286のアセンブラからPerl,PHP,C/C++,C#,Ruby,Go,ES5,ES2015,Reactあたりま
で。
○ ガラケー開発、サーバー型電子マネー、決済、と来て現職

目次
● 自己紹介(済)
● なぜRustか
● なぜWebAssemblyか
● ブラウザから見たWASMの実行フロー
● WASMでの動作確認までのフロー
● 事前準備
● コードを見ながら実行してみよう
● 結論

GCないしメモリ管理とかイケてそう
ゼロコスト抽象化がかっこいい

Rustの特徴
● 安全性、速度、並行性にフォーカスした言語
○ 型安全
○ メモリセーフ
○ GCがない
○ マルチスレッドを実装しやすい
○ C++と同程度の実行速度
● コンパイラ言語
● 静的型付け

Rustの採用事例
● MozillaのFirefox
● Facebook Libra Core
○ Libraプロトコルのオープンソース実装
○ Libra:https://developers.libra.org/docs/libra-core-overview
○ GitHub:https://github.com/libra/libra
● Amazon Web ServiceのFirecracker
○ Rustで書かれたKVMを利用するMicroVM
○ AWS:https://aws.amazon.com/jp/blogs/news/firecracker-lightweight-virtualization-for-serverles
s-computing/
○ GitHub:https://github.com/firecracker-microvm/firecracker
● 他にもDropbox,Fastlyなどで活用されている。

何ができるかわからないから使ってみたい

WebAssemblyの特徴
● バイナリフォーマット
○ WebAssemblyのテキスト表現もある。 WAST(拡張子:.wast)とWAT(拡張子:.wat)の2つのフォー
マットが存在。
● 異なるプラットフォーム間でネイティブ水準の速度で実行可能
● 安全に実行できるようにサンドボックス内で実行される。
● wasm32とwasm64があるがwasm64のコンパイラがないので事実上wasm32の
み。

ブラウザからみたWASMの実行フロー
1. ブラウザがHTML読み込み
2. ブラウザがJavaScript読み込み&実行
3. JavaScript内からWASM読み込み＆実行

Rustを使ってWASMでの動作確認までのフロー
1. Rust(2パターン)
a. wasm-packでビルドする
b. rustcでビルドする
2. JavaScript(3パターン)
a. 手書きのJavaScript,HTMLでWASM呼び出し
b. wasm-packをnpmのローカルインストールで node_modulesにインポートしてwebpackでまとめ
る
c. create-wasm-appを使う

事前準備
1. Rustのインストール
2. npmのインストール
そこまで複雑ではないので詳しい説明は割愛します

コードみながら実行してみよう
1. Rustの単純なコード(JavaScriptのalertをRustから呼び出す）を書く
2. wasm-packでビルドするとpkgディレクトリが生成される。npm installで取り込める
形になっている。
3. publicディレクトリに移動してnpm initで初期化
4. npm install --save-dev webpack webpack-cli webpack-dev-server
5. package.jsonのscriptsにdev-server起動のコマンド書く
6. index.html,index.jsを用意しておく
7. webpack-dev-serverで確認

まとめ
● RustからWASM,WATを吐き出すまでのフローが煩雑に思えた。
● JavaScriptとRust間での変数の受け渡しのハードルが高い。個人開発者含めて広
がるには、まだ時間かかると思う（本番環境に適用するという意味で）。
● Rust/WebAssembly用のUIフレームワークyewを使ってみたい。

参考資料
● WebAssembly Specification
○ http://webassembly.github.io/spec/core/index.html
● WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]
○ https://dev.to/nabbisen/webassembly--3385
● Rust から WebAssembly にコンパイルする
○ https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm
● WebAssembly テキストフォーマットを理解する
○ https://developer.mozilla.org/ja/docs/WebAssembly/Understanding_the_text_format
● WebAssembly JavaScript API を使用する
○ https://developer.mozilla.org/ja/docs/WebAssembly/Using_the_JavaScript_API

参考資料2
● wasm-pack
○ rustのコードをいい感じに npmのモジュールにしてくれる。
○ https://github.com/rustwasm/wasm-pack
● yew
○ UIフレームワーク
○ https://github.com/yewstack/yew

ご静聴ありがとうございました

RustでWebAssembly

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a RustでWebAssembly

Semelhante a RustでWebAssembly (20)

Mais de ceres-inc

Mais de ceres-inc (6)

RustでWebAssembly