はじめに
こんにちは。「すば」と申します。
この記事はRust 3 Advent Calendar 2020の 21 日目の記事です。
体調悪くてめっちゃ遅刻しました・・・ごめんなさい
今回は、今自分が勉強中のseedというRustのフロントエンドフレームワークのざっくり紹介したいと思います。
対象読者
- フロントエンドやったことある人
- Rustの学習を始めたので、何か作ってみたい人
この記事の目的
ぶっちゃけると公式のドキュメントが神すぎるので、それさえ読んでいただければこんな記事読む必要ないです。
読んで！！
Seedとは？
簡単に言えば、Elmというフロントエンド用言語のアーキテクチャをRustに移植したフレームワークです。
もっと簡単に言えば、Reduxみたいなものです。
Seedのアーキテクチャは、主に３つの要素で構成されます。
| 要素 | 役割 |
|---|---|
| Model | アプリの状態 |
| View | Htmlのレンダリング |
| Update | onClick等のイベントに応じて、Modelを書き換える |
Component毎にローカルな状態を持つことはなく、基本的にグローバル変数一つで状態を管理します。
不安に思われるかもしれませんが、結構これでうまくいくんです。
また、更新処理が必ずUpdate内に集められているので、処理の一覧性が高くてメンテしやすいです。
個人的には、複雑なことを複雑にやってしまうことを戒めるアーキテクチャだと思っています。
Component毎に状態変数持ってたら、どれがどの値を持っているのかデバッグする時大変じゃないですか？
状態は全部同じ変数に格納しちゃえば見やすいですよ、的な
他にもさまざまなメリットがあるのですが、元ネタのElmの記事を検索すると色々出てくると思います
Why Elmで検索すると、このアーキテクチャの利点がたくさん出てきます。
Yewとの比較
日本では、Rustのフロントエンドフレームワークと言えば、Yewが有名です。
どちらもフロントエンドに必要な機能は過不足なく揃ってる印象です。
大きな違いはView部分の描画と、Component分割にあると思います
// Seed
fn view(model: &Model) -> Node<Msg> {
div![
C!["message"],
"Hello world",
]
}
// Yew
pub struct Container {
}
impl Component for Container {
// 省略...
fn update(&mut self, msg: Self::Message) -> ShouldRender {
// 省略...
}
fn view(&self) -> Html {
html! {
<div id="message">
Hello World
</div>
}
}
}
Htmlに関しては、どちらもMacroを用いて表現していますが、
Seedは関数的に、YewはJSX的に表現します。
ここらへんは好みだと思います
Component分割に関しては、
Seedが関数だけで、YewがStructをComponentとして表現しています。
また、Yewの方はUpdate関数でComponent内の状態を更新できるようになっていますが、
Seedは、前述したようにグローバル変数を更新して、参照するようになっています。
個人的には、Component内の状態は無ければ無いほど保守が楽なので、Seedの方が好きです。
一概に言い切ることはできませんが、YewよりSeedがシンプルに見えませんか？
公式のチュートリアルが充実している
公式のメニューをご覧下さい。
https://seed-rs.org/
- インストール
- Counterアプリ作成
- TodoMVCアプリ作成
- Time Tracker作成
これらがドキュメントに従うだけでサクッとできます。
少しづつレベルアップしていくので、終わった頃にはちゃんとしたアプリが作れるはずです。
Github内のサンプルが充実している
いろんな事例のサンプルが30個ほどあります。
実装で困った時に、ドキュメントと合わせて参考にしてみるといいんではないでしょうか。
RealWolrdもある
さまざまな言語で同一のインターフェースのブログを作るRealWorldというプロジェクトがあります。
もちろんSeedの実装もあります（上記のURL内にはないっぽいけど）
https://github.com/seed-rs/seed-rs-realworld
本格的なアプリの実装に役立つはずです。
（他の言語でも参考になるので、RealWorld自体は頭の片隅に置いておくといいですよ）
まとめ
Yewよりシンプルだと思うし、結構簡単にできるから、気軽にやってみよう！
exampleがたくさんあるから、まず書いてみよう！
counterあたりから始めるといいかも