Yewで日替わりの筋トレのお題を出すWebアプリ作った

Seedと迷ったのですが、最近Yewの名前を目にすることが増えたので日本語の参考になる記事が増えてるならそっちでいいかというくらいの決め方です。
べつにこだわりがあったわけではありません。
これくらいの規模ならHTML + JavaScriptだけで作れると思いますがRustでWebアプリ作りたかったので…

苦労した点

HTML/CSS/JavaScriptわからん
Yewのドキュメント読めない(現在は解決済み)
Yew(というかWebAssembly)で使えない処理がある

HTML/CSS/JavaScriptわからん

これは普段書かないので毎回調べながらというのが面倒でした。
(特にCSSが思うようにならない)

Yewのドキュメント読めない(現在は解決済み)

なぜか開発中にYewのドキュメントのサイトでスクロールが正常にできずいつまでもベージ最上部に戻されるという謎の現象に見舞われていました。
そのため公式のドキュメント以外に他の方が公開してくれている記事などを読んで開発していました。
欲しい機能っぽいものを見つけても使い方がわからない場合は勘で書いてコンパイルエラーを読んで修正していく、みたいな進め方をしていました。よくこんなのでリリースできたな。

`Yew`(というか`WebAssembly`)で使えない機能がある

例えば自分が使いたいものだとchronoを使用して現在の日付を取得したかったのですが、どうもWebAssemblyがターゲットだと使えないらしくjs_sysクレートを使用してJavaScript側の日付取得処理を呼び出したりしていました。

デプロイ

mainブランチに変更があればGitHub ActionsでビルドしてGitHub Pagesにデプロイしています。 Rust + Yew で静的ページをGitHub Pagesにデプロイという内容を公開していくれている方がいたのでgh-pages.ymlをほぼそのまま使わせていただきました。
自分がやることはmainブランチの変更をpushするだけでなのでとても楽です。

Yewを使ってみた感想

機能単位でComponentとして定義する、Messageで変更などを飛ばす、といった点は慣れれば非常に使いやすかったです。
コード内にhtml!マクロでHTMLをほぼそのまま書けるしその中にRustのコードを書けるという点も便利でした。
ちょっとしたコンポーネントならわざわざComponentトレイトを実装しなくてもfunction_component(コンポーネント名)をつけた関数で実装できるのも手間や記述量が減ってよかったです。

あとがき

初のWebアプリ作成でした。小規模なものでもリリースできると楽しいですね。 HTML/CSS/JavaScriptはたまにちょっと触る程度なので毎回苦労してます。
Yewのドキュメントが読めないのは本当にキツかったです。今はドキュメントを読めるようになっているので少し読んでは「こんな機能あったのか」みたいなことになっているのでそのうちリファクタリングするとおもいます。
デプロイに関してはすごい楽でした。GitHub PagesやGitHub Actionsは便利ですね。
Yewの使用感に関してですが、以前Vueに少しだけ触れたことがあるのですがYewのホットリロードはVueと比べると遅いのは少し気になりました。ですが、好きな言語で開発できる&Rustのコンパイルのメッセージを見ながら開発・修正ができることを考えたら許容範囲だと感じました。

Yewで日替わりの筋トレのお題を出すWebアプリ作った

作ったのもの

作った理由

Yewを選んだ理由