Posted on

Rust+WebAssembly で Hello, World!

以前 Rust をはじめてみよう!という記事を書いた。今回は Rust + WebAssembly を使って Hello, World!の出力をやってみた。

WebAssembly について

まず WebAssembly とは何か。本家サイトの Overview をみてみる。ここにある通り、WebAssembly(WASM)は C/C++/Rust などの高級言語を使って開発をしバイナリ形式で動かすことができる。その為 Web 上で高速に動かすことができる。とりわけゲームなどの実行速度が求められるような分野で有効になる。Chrome、Firefox、Safari、Edgeで利用が可能。

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.
https://webassembly.org/

よくデモに出てくる Unity を使った動画
https://webassembly.org/demo/Tanks/

Youtube動画

再生回数が一番多い動画をあげておく。2018年2月の動画ですごく分かりやすく説明されている。

Rust+WebAssembly のドキュメント

ここからは以下の記事を実際にやってみる。実際にほぼそのまま実行しているだけなので以下についてはリンクをチェックするだけでも良いです。
https://rustwasm.github.io/book/game-of-life/hello-world.html

事前準備

参考URL:https://rustwasm.github.io/book/game-of-life/setup.html

rustup を使って rust をインストールする

curl https://sh.rustup.rs -sSf | sh
source $HOME/.cargo/env

source $HOME/.cargo/envは .zshrc などに記述しておくとよい

wasm-pack インストール

wasm-pack を使うとビルド・テスト・公開などが簡単にできる

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

cargo-generate インストール

cargo-generate を入れるとcargo generateコマンドが使えるようになり、この後の Git リポジトリからのソース取得ができる

cargo install cargo-generate

npm インストール

最新の npm を入れておく

npm install npm@latest -g

サンプルプロジェクトのテンプレート

Hello, World!のサンプルプロジェクトを取得する

cargo generate --git https://github.com/rustwasm/wasm-pack-template
// プロジェクト名を聞かれるのでここはドキュメントの通り`wasm-game-of-life`とする

ドキュメントツリーは以下のようになる。ドキュメントにはないtestsが追加されていた。ここでsrc/lib.rsgreet関数の文字列が、Hello, wasm-game-of-life!となっているので一応Hello, World!と変えておく。

wasm-game-of-life
├── Cargo.toml
├── LICENSE_APACHE
├── LICENSE_MIT
├── README.md
├── src
│   ├── lib.rs
│   └── utils.rs
└── tests
    └── web.rs

wasm-packコマンドでビルドしてみる。rustcのバージョンが1.30以上でないとエラーが発生するけどrustup updateコマンドでアップデートすれば問題なく進められる。

wasm-pack build
| [1/9]   Checking `rustc` version...
Your version of Rust, '1.29', is not supported. Please install Rust version 1.30.0 or higher.

rustupを使ってrustcをアップデートする

rustup update

ビルドが完了するとpkgディレクトリができる

wasm-pack build
pkg
├── README.md
├── package.json
├── wasm_game_of_life.d.ts
├── wasm_game_of_life.js
└── wasm_game_of_life_bg.wasm

Webページを作成する為に以下のコマンドを実行する。するとあらたにwwwディレクトリができる。

npm init wasm-app www
npx: 1個のパッケージを3.137秒でインストールしました。
 Rust +  Wasm = ❤

wwwのドキュメントツリー

www
├── LICENSE-APACHE
├── LICENSE-MIT
├── README.md
├── bootstrap.js
├── index.html
├── index.js
├── package-lock.json
├── package.json
└── webpack.config.js

wwwディレクトリへ移動し依存関係をインストールする

npm install

pkgディレクトリへ移動し以下のコマンドを実行する

npm link
/usr/local/lib/node_modules/wasm-game-of-life -> /Users/satomasaki/Dev/taisa/wasm-game-of-life/pkg

更にwwwディレクトリへ移動して以下のコマンドを実行する

npm link wasm-game-of-life
/Users/satomasaki/Dev/taisa/wasm-game-of-life/www/node_modules/wasm-game-of-life -> /usr/local/lib/node_modules/wasm-game-of-life -> /Users/satomasaki/Dev/taisa/wasm-game-of-life/pkg

index.jsimport箇所のhello-wasm-packwasm-game-of-lifeに更新する

import * as wasm from "wasm-game-of-life";
wasm.greet();

実行しページを開いてみるとHello, World!が表示される。

npm run start

ソースを少し変更してみる

wasm-game-of-life/src/lib.rsgreet関数を以下のように少し変更しwasm-game-of-life/www/index.jsgreet関数の引数に文字列を入れてみると渡した文字列が出力される

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}
wasm.greet("wasm!");

Webサーバを立ち上げたままでもwasm-pack buildと実行するだけでソースが更新され動作確認をすることができる。

まとめ

本当に少し触っただけながら、便利なツールがちゃんとあって、ある程度形ができて慣れてくればそれほどストレスなく開発が進められそう。

Posted on

平成最後にEvernoteの昔のエモい感じのメモ達を供養する

今年、持ってる本をすべてリサイクルに出した。そして今や自分の荷物はほとんどないと言っていいくらい無くなった。情報も整理したくなったのでとりあえずEvernoteに残ってるよくわからないメモ達も消してみた。すると昔悶々としてたんだな〜みたいなメモが見つかった。折角だからそんな昔のエモい感じのメモ達をさらしてから削除する。

SI会社に残らない理由

近い将来移民が大量に入ってくる
その頃には課長または部長になっている程度
エンジニアとして対応できるようになってたい
求心力がない
名前だけでかくて組織が時代についていけていない
40代以上の人間がぎりぎり、50代以上の人間は定年を待つばかり
使えない派遣が集まる
会社自体に魅力がない
優秀な人材は入ってこないし出ていく

君がオヤジになる前に

一週間に一本アプリリリース
モテル
家を持つリスク
結婚するリスク
オヤジ化が加速する
子供にいい思いをさせることはそこまで必要か
狭い家に住んでいた時代も経験していてよいのでは?
そのような体験が逆にうらやましかったこともある。
情報量
突き抜けること
保険には入らない
何十年先のことを憂う必要があるのか
気持ち悪い昔からの風習がある
昔の美徳は今の美徳ではない
英語はのりで


「君がオヤジになる前に」という本を読んだ時のメモとその時に感じがことが書いてあると思われる

『今はまだ』という呪文

起業時代
今はまだ実力がないから
というがその気になれば実は一週間または一ヶ月死ぬ気でやればそれなりに戦える実力がつくのではないか
そういう人間に限って本を買って終了ということがほとんど
何年かすればそれなりにできる自分になっていると思い込んでいる
SIer時代
同様に人材派遣をするSE業界でも、
今はまだ我慢してやってくれ。
そのうち景気が上向きになるときを待つ
今はまだ動き時でない
ではいつなのか?
周囲の人たち、親
今はまだやめとけ
とりあえず大手に入っておけ
『今はまだ』と『とりあえず』のダブルパンチ
とりあえずといって何十年も経過していくのが目に見えている
そしてかぶせるようにサラリーマンは我慢だと

戦わない人が多すぎる

Noと言えない日本人ニアルイコール
ただNoと言う必要があるのではなく、交渉しよう、戦おう
日本の政治も同様
いいカッコしいはやめよう
どうせいいカッコするのであれば我慢はやめよう、戦う姿を見せよう
部下に迷惑がかかる
さされそうになったら必死で抵抗するだろう
上司だろうが客であろうが頭が上がらない人であろうと関係ない
交渉しよう
交渉することを楽しもう
恋愛もそう
後からでは遅い、そのとき戦わなくては
その為に準備している必要があるだろう
また、急に戦場にたたされ先制攻撃を受けてしまったら
一旦保留して戦略を練ろう
体制を整えよう
少しだけでも有利にしよう
常に先制攻撃ができるようにしよう
リスクを回避しよう
最悪の事態を避けよう
アラームをあげよう

人生の命題

世界中でアプリケーションを作る
世界をアプリケーションを作りしながらまわる

超解釈

変化に対応していく対応力
対応していくしかない
変化は能力のあるひとがやるのさ
他にはないものをつくる
もしくは他にあるもののコピーをつくる

無題ノート

ふけとか、衰えとか、関係、かいもん、ねー!
いずれのメモも平成22年〜26年くらいに書かれたメモだった。
平成最後にこれらのメモ達をここに供養します。