たいさブログ

taisa's engineer blog

JavaScript Rust

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 をインストールする

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

wasm-pack インストール

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

cargo-generate インストール

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

npm インストール

最新の npm を入れておく

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

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

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

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

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

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

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

wwwのドキュメントツリー

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

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

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

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

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

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

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

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

まとめ

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


-JavaScript, Rust
-,

執筆者:

関連記事

JavaScriptパターン

「JavaScriptパターン」第4章-関数-が面白かったからまとめながら写経した

タイトルにあるようにとても面白かったというのと、JavaScriptパターンの輪読会で第4章「関数」の後半を担当したのでその記録も兼ねて内容まとめながら写経した。 目次 はじめに 4.1 背景 4.2 …

ECMAScript 6を触ってみる – モダンになった文法

WEB+DB PRESS Vol.87は、@t_wadaさんの言うとおりES6を速習するのにとても良い書籍だと思う。個人的には「JavaScript: The Good Parts ―「良いパーツ」に …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月 …

「はじめてのフロントエンド開発」という共著本を出版しました

『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』という共著本を2018年5月9日に出版しました。 自分はこの中の第3章の環境構築を担当し …

ECMAScript 6を触ってみる – 標準化されたモジュール管理システム

前回に引き続きJSの速習コース実践ラスト。最後は「WEB+DB PRESS Vol.87 第1特集 第6章-標準化されたモジュール管理システム-」を速習する。 これまでのモジュール管理 JavaScr …