blockの巣

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

2022/03/07 13:00 公開
Rust Yew

コードの解説とかはないです。


作ったのもの

自分で負荷を選んで抽選ボタンを押すと筋トレの内容が抽選されるので出てきた内容をこなすだけというものです。
日付が変わると再抽選できるようになります。
日替わり筋肉メイカー
リポジトリ

作った理由

筋トレをサボりがちなので楽しく達成感付きでやりたい&Webアプリ作りたいという理由です。
筋トレの内容を抽選するだけなら診断メーカーとかでも良いのですが負荷は自分で決めたかったのでやっぱり作ることにしました。

Yewを選んだ理由

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

苦労した点

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 PagesGitHub Actionsは便利ですね。
Yewの使用感に関してですが、以前Vueに少しだけ触れたことがあるのですがYewのホットリロードはVueと比べると遅いのは少し気になりました。ですが、好きな言語で開発できる&Rustのコンパイルのメッセージを見ながら開発・修正ができることを考えたら許容範囲だと感じました。