Yewを使ってバレンタインデーを迎えてみた

はじめに

https://yu1hpa.github.io/valentine2022/

UIは結構シンプルですが、Yewを使うにあたって苦労した点などもをまとめていきたいと思います。

お気持ち

https://yew.rs/

Yewについては、ここに書いてあります。

さて、苦しんだ点ですが、以下の二点です。

• wasmでrand crateを使う
• LocalStorageを使う

本記事では、後者のLocalStorageを使う際のことについて書きたいと思います。

LocalStorageを使う

まず、どこでLocalStorageを使っているかというと、「引いた絵文字」を格納しています。
したがって、LocalStorageを削除すれば、何回でも引くことができます。

JavaScript編

やりたいことをJavaScriptで書くと、以下のことです。

 /// https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
 localStorage.setItem('myCat', 'Tom');
 var cat = localStorage.getItem("myCat");

Yew編

Yewでは、どうやってやるのかGoogle検索すると、次のIssueが見つかりますが、使えませんでした。

https://github.com/yewstack/yew/issues/1287

いろいろ試行錯誤しましたが、結論から言うと、glooを使います。

https://docs.rs/gloo-storage/0.2.0/gloo_storage/struct.LocalStorage.html

rustwasm/glooには、LocalStorageを使うexampleがないので、がんばります。そのexampleをここに載せておきます。（本サイトにも使ってるので、そっちも参考にしてみてください）

https://github.com/yu1hpa/yew-gloo-storage-example

Rust風に書けていないところはPull Requestをお願いします。

おわりに

本サイトのGitHubはこちらです。

https://github.com/yu1hpa/valentine2022

見ていただき、ありがとうございました。
LocalStorageの使い方でハマってしまい、思った以上に時間がかかりました。
YewでLocalStorageを使う人の参考になれば幸いです。

あと、チョコレート、ちょこっとでいいので欲しいですね。