進捗
前回の記事からちょこちょこ機能の開発を行っていました。
主に追加した機能は以下になります。
- ユーザーカードのスワイプアニメーションを実装
- LIKEボタンを押すと、左にスライドしてフェードアウト
- SKIPボタンを押すと、右にスライドしてフェードアウト
- ユーザーカードを複数枚用意し、1枚目をスワイプすると2枚目が表示されるように実装
- ユーザーカードがなくなった時のアラートを実装
実際の挙動
苦戦したこと
質問記事も作ったのですが、useSpringの扱いが難しかったです。
そもそもReact超初心者の私はhookの概念も曖昧なまま実装していたので、
何をuseEffectで処理して、何をイベントハンドラで処理すればいいのかの切り分けが難しかったです。
結局、react-springのドキュメントを読み漁り、
そもそもの扱い方が違っていることがわかりました。。
(useSpringで定義したスタイルをハンドラで直接更新しても、アニメーションが検知されないため、startプロパティを使う)
ログを仕込んでエラー調査することと、ドキュメント読み込みの重要性を再確認できました。