Rust+WebAssembly+yewでToDoアプリを実装
前回の記事に引き続きRustを勉強していくにあたっての備忘録的な感じの記事になります。
今回はRustとWebのUIを作るのに最適なYewというフレームワークを使用して簡単なToDOアプリを作成します。
■完成イメージ
Yewとは
YewとはWebAssemblyを使用したマルチスレッドのUIフレームワークです。
一言で言うと、Webフロントフレームワーク、といったところですかね。
ReactのようなイメージでOKだと思います。
特徴は以下の通り
・WebAssemblyに変換されるためブラウザ上での実行が可能
・コンポーネントベースのフレームワークでReactやElmにかなり似ている
・JSとの互換性があるためNPMパッケージを使用して既存のJSアプリと統合可能
・DOM APIの呼び出しを最小にすることと、Webワーカーを使用して処理を
バッググランドに簡単にオフロードすることで優れたパフォーマンスを出す
WebAssemblyとは
WebAssembly（略称：WASM）とは、C言語などの高級言語をブラウザ上で実行可能なバイナリ形式にする技術です。
私たち開発者が直接WASMをさわることはなく、C言語やRustなどでコードを実装し、それらがWASMバイトコードにコンパイルされます。
コンパイルされたコードはWeb上で実行され、ネイティブマシンコードに変換されるため高速で動く、といった感じです。
JSに取って代わる言語というよりは、JSでは実現できない高負荷な処理をWASMで実行するといった形で使われることが多く、これからもそれは変わらないとされています。
時代が進むにつれてWEBに求められることは多くなってきました。
その要求に答えることが可能な言語がJSでしたが、それも時代がすすむにつれて役不足になってきたため（例えばWebゲームや高負荷がかかる計算など）より高速に、スマートにWeb上で動かす仕組みが必要になったわけです。
JSは毎回コンパイルしないといけないですし、動的片付けをしているため速度がでない、といえば言い過ぎですが、それでもコンパイラ言語には勝てないということですね。
WASMについてもっと詳しく知りたい方は以下の記事を参考にするといいかもしれません。
・記事1（英語）
・記事2（英語）
・記事3（日本語）
プロジェクト作成
それでは早速Yewを触っていきましょう。
・YewのGithub
・Yewのオフィシャルサイト
//環境
MacOS
cargo 1.46.0
rustup 1.22.1
wasm-pack v0.9.1
wasm-bindgen-cli v0.2.68まずはWASMにビルドするツールをインストールします。
Rustには主に3つのビルドツールがあるみたいですが今回はwasm-packを使用します。各ツールの違いについてはYewのオフィシャルサイトをご覧ください。
% cargo install wasm-pack次にRustプロジェクトを作成します。
まずは動くことを確認したいので、ボタンを押したら数が増えていく、というサンプルプログラムを実装します。また、今回はmain.rsが必要ないので必ず「–lib」を入れてください。
cargo new --lib yew-app && cd yew-app次にcargo.tomlに依存関係を定義します。
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
yew = "0.17"
wasm-bindgen = "0.2.67"以下をlibフィルへ。
use wasm_bindgen::prelude::*;
use yew::prelude::*;
struct Model {
link: ComponentLink<Self>,
value: i64,
}
enum Msg {
AddOne,
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
Self {
link,
value: 0,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::AddOne => self.value += 1
}
true
}
fn change(&mut self, _props: Self::Properties) -> ShouldRender {
// Should only return "true" if new properties are different to
// previously received properties.
// This component has no properties so we will always return "false".
false
}
fn view(&self) -> Html {
html! {
<div>
<button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button>
<p>{ self.value }</p>
</div>
}
}
}
#[wasm_bindgen(start)]
pub fn run_app() {
App::<Model>::new().mount_to_body();
}最後にstaticフォルダを作成しその中にindexファイルを作成します。
mkdir static<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yew Sample App</title>
<script type="module">
import init from "./wasm.js"
init()
</script>
</head>
<body></body>
</html>次に、wasm-packを使用してビルドした後に自身のローカルサーバを立ち上げてlocalhostに接続すればアプリケーションを触れるはずです。
今回はcargoのツールを使用してサーバを立ち上げますがpythonとかでもOKです。
wasm-pack build --target web --out-name wasm --out-dir ./static% cargo +nightly install miniserve
% miniserve ./static --index index.htmlhttp://127.0.0.1:8080/ or http://localhost:8080/
こんな感じのボタンを押せば数が増えていくアプリが確認できます。
動作確認ができましたの次にToDoアプリを作成します。
まずは依存関係を定義します。
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
yew = "0.17"
wasm-bindgen = "0.2.67"
strum = "0.19"
strum_macros = "0.19"
serde = "1"
serde_derive = "1"libファイルを更新
#![recursion_limit = "512"]
use serde_derive::{Deserialize, Serialize};
use strum::IntoEnumIterator;
use strum_macros::{EnumIter, ToString};
use wasm_bindgen::prelude::*;
use yew::events::KeyboardEvent;
use yew::format::Json;
use yew::services::storage::{Area, StorageService};
use yew::web_sys::HtmlInputElement as InputElement;
use yew::{html, Component, ComponentLink, Href, Html, InputData, NodeRef, ShouldRender};
const KEY: &str = "yew.todomvc.self";
pub struct Model {
link: ComponentLink<Self>,
storage: StorageService,
state: State,
focus_ref: NodeRef,
}
#[derive(Serialize, Deserialize)]
pub struct State {
entries: Vec<Entry>,
filter: Filter,
value: String,
edit_value: String,
}
#[derive(Serialize, Deserialize)]
struct Entry {
description: String,
completed: bool,
editing: bool,
}
pub enum Msg {
Add,
Edit(usize),
Update(String),
UpdateEdit(String),
Remove(usize),
SetFilter(Filter),
ToggleAll,
ToggleEdit(usize),
Toggle(usize),
ClearCompleted,
Focus,
Nope,
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
let storage = StorageService::new(Area::Local).expect("storage was disabled by the user");
let entries = {
if let Json(Ok(restored_model)) = storage.restore(KEY) {
restored_model
} else {
Vec::new()
}
};
let state = State {
entries,
filter: Filter::All,
value: "".into(),
edit_value: "".into(),
};
let focus_ref = NodeRef::default();
Model {
link,
storage,
state,
focus_ref,
}
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::Add => {
let description = self.state.value.trim();
if !description.is_empty() {
let entry = Entry {
description: description.to_string(),
completed: false,
editing: false,
};
self.state.entries.push(entry);
}
self.state.value = "".to_string();
}
Msg::Edit(idx) => {
let edit_value = self.state.edit_value.trim().to_string();
self.state.complete_edit(idx, edit_value);
self.state.edit_value = "".to_string();
}
Msg::Update(val) => {
println!("Input: {}", val);
self.state.value = val;
}
Msg::UpdateEdit(val) => {
println!("Input: {}", val);
self.state.edit_value = val;
}
Msg::Remove(idx) => {
self.state.remove(idx);
}
Msg::SetFilter(filter) => {
self.state.filter = filter;
}
Msg::ToggleEdit(idx) => {
self.state.edit_value = self.state.entries[idx].description.clone();
self.state.clear_all_edit();
self.state.toggle_edit(idx);
}
Msg::ToggleAll => {
let status = !self.state.is_all_completed();
self.state.toggle_all(status);
}
Msg::Toggle(idx) => {
self.state.toggle(idx);
}
Msg::ClearCompleted => {
self.state.clear_completed();
}
Msg::Focus => {
if let Some(input) = self.focus_ref.cast::<InputElement>() {
input.focus().unwrap();
}
}
Msg::Nope => {}
}
self.storage.store(KEY, Json(&self.state.entries));
true
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
let hidden_class = if self.state.entries.is_empty() {
"hidden"
} else {
""
};
html! {
<div class="todomvc-wrapper">
<section class="todoapp">
<header class="header">
<h1>{ "todos" }</h1>
{ self.view_input() }
</header>
<section class=("main", hidden_class)>
<input
type="checkbox"
class="toggle-all"
id="toggle-all"
checked=self.state.is_all_completed()
onclick=self.link.callback(|_| Msg::ToggleAll) />
<label for="toggle-all" />
<ul class="todo-list">
{ for self.state.entries.iter().filter(|e| self.state.filter.fit(e)).enumerate().map(|e| self.view_entry(e)) }
</ul>
</section>
<footer class=("footer", hidden_class)>
<span class="todo-count">
<strong>{ self.state.total() }</strong>
{ " item(s) left" }
</span>
<ul class="filters">
{ for Filter::iter().map(|flt| self.view_filter(flt)) }
</ul>
<button class="clear-completed" onclick=self.link.callback(|_| Msg::ClearCompleted)>
{ format!("Clear completed ({})", self.state.total_completed()) }
</button>
</footer>
</section>
<footer class="info">
<p>{ "Double-click to edit a todo" }</p>
<p>{ "Written by " }<a href="https://github.com/DenisKolodin/" target="_blank">{ "Denis Kolodin" }</a></p>
<p>{ "Part of " }<a href="http://todomvc.com/" target="_blank">{ "TodoMVC" }</a></p>
</footer>
</div>
}
}
}
impl Model {
fn view_filter(&self, filter: Filter) -> Html {
let flt = filter.clone();
html! {
<li>
<a class=if self.state.filter == flt { "selected" } else { "not-selected" }
href=&flt
onclick=self.link.callback(move |_| Msg::SetFilter(flt.clone()))>
{ filter }
</a>
</li>
}
}
fn view_input(&self) -> Html {
html! {
// You can use standard Rust comments. One line:
// <li></li>
<input class="new-todo"
placeholder="What needs to be done?"
value=&self.state.value
oninput=self.link.callback(|e: InputData| Msg::Update(e.value))
onkeypress=self.link.callback(|e: KeyboardEvent| {
if e.key() == "Enter" { Msg::Add } else { Msg::Nope }
}) />
/* Or multiline:
<ul>
<li></li>
</ul>
*/
}
}
fn view_entry(&self, (idx, entry): (usize, &Entry)) -> Html {
let mut class = "todo".to_string();
if entry.editing {
class.push_str(" editing");
}
if entry.completed {
class.push_str(" completed");
}
html! {
<li class=class>
<div class="view">
<input
type="checkbox"
class="toggle"
checked=entry.completed
onclick=self.link.callback(move |_| Msg::Toggle(idx)) />
<label ondblclick=self.link.callback(move |_| Msg::ToggleEdit(idx))>{ &entry.description }</label>
<button class="destroy" onclick=self.link.callback(move |_| Msg::Remove(idx)) />
</div>
{ self.view_entry_edit_input((idx, &entry)) }
</li>
}
}
fn view_entry_edit_input(&self, (idx, entry): (usize, &Entry)) -> Html {
if entry.editing {
html! {
<input class="edit"
type="text"
ref=self.focus_ref.clone()
value=&self.state.edit_value
onmouseover=self.link.callback(|_| Msg::Focus)
oninput=self.link.callback(|e: InputData| Msg::UpdateEdit(e.value))
onblur=self.link.callback(move |_| Msg::Edit(idx))
onkeypress=self.link.callback(move |e: KeyboardEvent| {
if e.key() == "Enter" { Msg::Edit(idx) } else { Msg::Nope }
}) />
}
} else {
html! { <input type="hidden" /> }
}
}
}
#[derive(EnumIter, ToString, Clone, PartialEq, Serialize, Deserialize)]
pub enum Filter {
All,
Active,
Completed,
}
impl<'a> Into<Href> for &'a Filter {
fn into(self) -> Href {
match *self {
Filter::All => "#/".into(),
Filter::Active => "#/active".into(),
Filter::Completed => "#/completed".into(),
}
}
}
impl Filter {
fn fit(&self, entry: &Entry) -> bool {
match *self {
Filter::All => true,
Filter::Active => !entry.completed,
Filter::Completed => entry.completed,
}
}
}
impl State {
fn total(&self) -> usize {
self.entries.len()
}
fn total_completed(&self) -> usize {
self.entries
.iter()
.filter(|e| Filter::Completed.fit(e))
.count()
}
fn is_all_completed(&self) -> bool {
let mut filtered_iter = self
.entries
.iter()
.filter(|e| self.filter.fit(e))
.peekable();
if filtered_iter.peek().is_none() {
return false;
}
filtered_iter.all(|e| e.completed)
}
fn toggle_all(&mut self, value: bool) {
for entry in self.entries.iter_mut() {
if self.filter.fit(entry) {
entry.completed = value;
}
}
}
fn clear_completed(&mut self) {
let entries = self
.entries
.drain(..)
.filter(|e| Filter::Active.fit(e))
.collect();
self.entries = entries;
}
fn toggle(&mut self, idx: usize) {
let filter = self.filter.clone();
let mut entries = self
.entries
.iter_mut()
.filter(|e| filter.fit(e))
.collect::<Vec<_>>();
let entry = entries.get_mut(idx).unwrap();
entry.completed = !entry.completed;
}
fn toggle_edit(&mut self, idx: usize) {
let filter = self.filter.clone();
let mut entries = self
.entries
.iter_mut()
.filter(|e| filter.fit(e))
.collect::<Vec<_>>();
let entry = entries.get_mut(idx).unwrap();
entry.editing = !entry.editing;
}
fn clear_all_edit(&mut self) {
for entry in self.entries.iter_mut() {
entry.editing = false;
}
}
fn complete_edit(&mut self, idx: usize, val: String) {
let filter = self.filter.clone();
let mut entries = self
.entries
.iter_mut()
.filter(|e| filter.fit(e))
.collect::<Vec<_>>();
if !val.is_empty() {
let entry = entries.get_mut(idx).unwrap();
entry.description = val;
entry.editing = !entry.editing;
} else {
self.remove(idx);
}
}
fn remove(&mut self, idx: usize) {
let idx = {
let filter = self.filter.clone();
let entries = self
.entries
.iter()
.enumerate()
.filter(|&(_, e)| filter.fit(e))
.collect::<Vec<_>>();
let &(idx, _) = entries.get(idx).unwrap();
idx
};
self.entries.remove(idx);
}
}
#[wasm_bindgen(start)]
pub fn run_app() {
yew::start_app::<Model>();
}次にindexファイルを修正。（スタイルシートをCDNで読み込むだけです）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yew • TodoMVC</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-common@1.0.5/base.css"/ >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-app-css@2.1.2/index.css" />
</head>
<body>
<script type="module">
import init from "./wasm.js"
init()
</script>
</body>
</html>最後にビルド＆サーバーをたてます。
wasm-pack build --target web --out-name wasm --out-dir ./static && miniserve ./static --index index.htmlまだソースの解析ができていないので解説がついていません。
ソースの解析が進み次第、解説も取り入れていきく予定です。
この記事へのコメントはありません。