経済を回してみた

1 min読了の目安（約1700字）IDEAアイデア記事 1
Next.js
#
preact
#
クソアプリ

https://twitter.com/nixeneko/status/1360916737789583368

経済って文字を回転させるWebサービスを作りました

この程度ならすぐ作れるだろうと思ったのですが
制作の過程でいくつか学びがあったので書いていきます

Next.js と Preact を組み合わせる

React で書きつつ予め html を生成しておきたかったので
Next.js を SSG 用途で使うことにしました
ファイルサイズを下げるため React の代わりに Preact を入れて使います

以前は React の代わりに Preact を入れるだけだったのですが
Fast Refresh が効かないという話を Twitter でつぶやいたらアドバイスを受けました

yarn add next preact preact-render-to-string \
  github:preact-compat/react#1.0.0 github:preact-compat/react-dom#1.0.0
yarn add -D @types/node @types/react typescript

https://twitter.com/Abdullah_Mzaien/status/1352913838769897472

便利なものがあると知ったのでより調査を進めた結果
Next.js の公式 リポジトリの examples に Preact と組み合わせる例があり
next-plugin-preact の存在を知りましたので今回はそれを使いました

yarn add -D next-plugin-preact webpack@^4

Next.js に webpack がバンドルされるようになった都合で webpack@^4 を別途インストールする必要があります

animationiteration イベント

経済という文字を回転させるだけだと寂しいので
回転させた回数を表示させたいと思いました

回転は CSS により行うので
CSS アニメーションが終わった時点でそれを検知したいです
ちょうど良いイベントがありました

animationiteration イベントは、 CSS アニメーションの反復が1回分終了し、次の回が始まったときに発生します。

https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/animationiteration_event より引用

const ref = useRef<HTMLParagraphElement>(null)
useLayoutEffect(() => {
  if (!ref.current) return
  ref.current.addEventListener('animationiteration', () => {
    setcount(c => c + 1)
  })
}, [ref])

その他

scss で初めて for を使ってみたり
Lighthouse で満点をとるためにちょっといじったりしました

作ってて楽しかったです

ソースコードはこちらになります

image