RustでWebブロック崩し作ってみた

虎の穴　虎の穴　虎の穴　虎の穴
Copyright © 2019 Toranoana Inc. All Rights Reserved.
RustでWebブロック崩し作ってみた
虎の穴ラボ　藤原佳顕
1

アジェンダ
• 自己紹介
• 動機と話すこと
• なぜRust
• 作ったもの
• Rust
• wasm-bindgen
• まとめ
2

自己紹介
3
let user = User {
name: "藤原佳顕".to_string(),
age: 29,
work: "Fantia開発(フロントエンド中心になんでも)".to_string(),
tech: vec!["TypeScript","React", “Vue”,"RoR","(Rust)"],
anime: "無限の住人".to_string(),
hobby: vec!["Hellsinker.","ダライアス外伝","レイストーム"]
};

動機と話すこと
• Rust+WebAssemblyでブロック崩し作ってみたので紹介
• 話すこと
– Rustの概要
– wasm-bindgenについて
– 書いたソース
• 話さないこと
– WebWorkerについて
– JavaScript/TypeScript側の細かいあれこれ
– Rustの細かい文法
– ビルドツールについて
4

なぜRust
• Rust使いたかった(趣味)
• 自分→フロントエンド得意ななんでも屋
– React.js、TypeScriptとか好きです
• 得意分野を消さないための種まきとしてWebAssembly
• Rustは公式でWebAssemblyのサポートがある
– wasm32-unknown-unknownターゲット
• C/C++→Emscripten
• Go→バイナリでかい問題
• 他
– Blazor、AssemblyScript
5

作ったもの
・MDNのCanvasブロック崩しのRust移植+α (https://yumenosora.co.jp/archives/tora-lab/1575)
6

作ったもの
採用サイトのトップからも飛べます (https://yumenosora.co.jp/tora-lab)
7

Rust
• C++の代替を狙う低レイヤ言語
• 速度
– (LLVMなので)C/C++と同程度
• パラダイム
– マルチパラダイム
– 関数型言語っぽくもオブジェクト指向っぽくも書ける
• 難しい？
– コンパイラが優秀なので適当に怒られておけば良いと思います
• 言語が出てきた当初からWebAssemblyのサポートを謳っている
• WebAssemblyまつわる周辺ツール: wasm-bindgen
8

wasm-bindgen
• wasm-bindgen
– 要するにRust↔JSをやってくれるクレート(ライブラリ)
– Mozilla肝いり
• web_sys
– browser APIとのつなぎ込み(DOM含む)
• js_sys
– JSとのつなぎ込み
9

中身(wasm-bindgen)
10
#[wasm_bindgen]
#[derive(Debug, Clone, Copy, Serialize)]
pub struct Brick {
x: f64,
y: f64,
status: BrickStatus,
life: u32
}
#[wasm_bindgen]
impl Brick {
pub fn new(x: f64, y: f64, status: BrickStatus) -> Brick {
Brick {
x: x,
y: y,
status: status,
life: 1
}
}
}
● wasm_bindgen attributeが付いている部
分がJS側にエクスポートされる
● メソッドも同様にエクスポートできる
import { Brick } from "mdn-breaking-blocks-wasm";
const brick = Brick.new(1, 1, 0);
(Rust側)
(JavaScript側)

中身(web_sys)
11
Web APIのインターフェース定義である WebIDLままのI/Fが用意されている
// windowがそもそも存在しない場合は unwrapでpanic
let _ = web_sys::window().unwrap()
.alert_with_message("YOU WIN, CONGRATULATIONS!");
let _ = web_sys::window().unwrap().location().reload();
// dyn_intoでキャスト→キャスト失敗したら map_errでエラー処理
let canvas: web_sys::HtmlCanvasElement = canvas
.dyn_into::<web_sys::HtmlCanvasElement>()
.map_err(|_| console::log_1(&JsValue::from_str("CanvasElement is invalid")))
.unwrap();
let context = canvas.get_context("2d")
.unwrap().unwrap()
.dyn_into::<web_sys::CanvasRenderingContext2d>()
.unwrap();

中身(js_sys)
12
JavaScript APIのRustラッパーになる→世界が違うのでうまいこと動くようにされている
// JavaScript側からコールバックを引数として受け取る
pub fn draw_with_callback(&mut self, callback: &js_sys::Function) {
for c in 0..self.bricks.len() {
for r in 0..self.bricks[c].len() {
if self.bricks[c][r].get_status() == BrickStatus::Live {
let brick_x = c as f64 * (BRICK_WIDTH + BRICK_PADDING) + BRICK_OFFSET_LEFT;
let brick_y = r as f64 * (BRICK_HEIGHT + BRICK_PADDING) + BRICK_OFFSET_TOP;
self.bricks[c][r].set_x(brick_x);
self.bricks[c][r].set_y(brick_y);
let this = JsValue::NULL;
// JavaScriptと違ってRustではコンパイル時に引数の数と型がわかっている必要がある
// したがってJSの関数をそのまま呼べない(最悪applyを使う)
let _ = callback.call2(&this, &JsValue::from(brick_x), &JsValue::from(brick_y));
}
}
}
}

まとめ
13
● wasm-bindgenを使うことで本来は難しいWebAssemblyとJavaScriptの相互
運用を行うことができます
● Rustは難しいと言われていますが、基本知識+コンパイラに従うことで書ける
ようになるきがします
● 今日の内容に近い内容はブログにも上げているのでぜひお読みください
(http://toranoana-lab.hatenablog.com/entry/2019/08/14/190159 )

RustでWebブロック崩し作ってみた

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to RustでWebブロック崩し作ってみた

Similar to RustでWebブロック崩し作ってみた (20)

More from 虎の穴開発室

More from 虎の穴開発室 (20)

Recently uploaded

Recently uploaded (7)