VueUseのすすめ

Vue.js v-tokyo Meetup #16の登壇資料です。

🌟VueUseの使い所について紹介しました！

※プレゼンテーションの方でご覧いただくことで、GIFアニメーション付きの資料がご覧いただけます。

Transcript

1. VueUseのすすめ 2023年2月17日 AI事業本部 黒澤拓磨 それ、VueUseで できますよ！
2. もくじ 1 自己紹介 2 VueUseとは？ 4 5 Next step ! 3 QuickStart！ VueUseのユースケース
3. 自己紹介 self-introduction
4. 黒澤拓磨( くろたく) Twitter/Qiita/GitHub: @TakumaKurosawa #世界で一番シュークリームが好き 所属 　　株式会社サイバーエージェント 　　協業DX div. オンライン接客カンパニー 好きな言葉 当たり前を疑え by 澤円 人は意欲し創造することによって のみ幸福である by E ・アラン 趣味・好きなもの テニス / 靴磨き / アロマテラピー ゴルフ / カラオケ / エヴァ / ココロオークション 好きな技術 Go / Vue.js / Typescript / AWS / Docker / Kubernetes 職種 ソフトウェアエンジニア
5. VueUseとは？ What is VueUse?
6. VueUseとは？ Vue.js向けライブラリ群 Composition APIをベースにしたユーティリティ関数コレクション ⭐️ × 13.9k
7. QuickStart! Quick start !
8. QuickStart ! Vite + Vue 3 Nuxt 3 + Vue 3 Webpack + Vue 3 Nuxt 2 + Vue 2 Vue CLI + Vue 2
9. QuickStart ! ▼ Also CDN... ▼ Just type it !
10. VueUseの ユースケース VueUse use cases
11. 🤔 結構大変じゃない？ VueUseのユースケース ① undo & redo - useRefHistory 編集可能ページによく実装されてるやつ 「⌘ + z」連打したことあるよね？ メモリ上にHistory用のRefを用意 inputをWatchして変更がある度に HistoryにPushしていって・・・ undo, redoのアクションも用意しないと💦
12. useRefHistoryに対象のデータを渡してあげるだけ 内部的にはデータの履歴をArrayで管理している VueUseのユースケース ① undo & redo - useRefHistory
13. onKeyStrokeと組み合わせることでショートカットキー作成可能 上の例：← ＋ ⌘ ＋ Shift VueUseのユースケース ① undo & redo - useRefHistory
14. VueUseのユースケース ② slide show - useScroll 🤔 結構大変じゃない？ windowサイズ取得 スクロールイベントを Observe スクロール位置の計算 スライド数との同期 スクロールしていくことで コンテンツが切り替わるサイト
15. useScrollにスクロール対象の親DOMを渡す x, y座標の他にも、スクロール中かや方向などのStateも返ってくる VueUseのユースケース ② slide show - useScroll
16. VueUseのユースケース ③ Infinity scroll - useInfiniteScroll 🤔 結構大変じゃない？ DOMの高さ取得 スクロール位置の Observe 再fetch処理の実装
17. 無限スクロールの実装が超楽になりますよ！！ VueUseのユースケース ③ Infinity scroll - useInfiniteScroll
18. 🤔 結構大変じゃない？ VueUseのユースケース ④ Floating panel - useDraggable 無限に実装方法が思いつ く Drag可能かつ、要素が今 どこにあるのかJS処理し たい
19. 内部的にはVueUseのuseMouseを拡張して作られている イメージとしては、useMouseで取得したカーソルの座標位置を left: 12px; right: 100px のようなStyleに変換している VueUseのユースケース ④ Floating panel - useDraggable
20. Next Step ! Next step is ...
21. VueUseへ貢献してみよう！ 超高頻度でメンテされているアツいOSS🔥 ideasの中から自分に作れそうなものに挑戦してみるとよさそう💪
22. Thank you for watching! この後の セッションも お楽しみ 下さい！！ 2023年2月17日 AI事業本部 黒澤拓磨
23. Appendix Powered by Canva Thanks to Unsplash+ Powered by https://www.canva.com https://gopherize.me https://unsplash.com/ja https://carbon.now.sh/ VueUseリソース https://vueuse.org https://github.com/vueuse/vueuse 発表で使用したサンプルプログラム https://github.com/TakumaKurosawa/VueUse-tutorials