VueUseのすすめ 2023年2月17日 AI事業本部 黒澤拓磨 それ、VueUseで できますよ！

もくじ 1 自己紹介 2 VueUseとは？ 4 5 Next step ! 3 QuickStart！ VueUseのユースケース

自己紹介 self-introduction

黒澤拓磨( くろたく) Twitter/Qiita/GitHub: @TakumaKurosawa #世界で一番シュークリームが好き 所属 　　株式会社サイバーエージェント 　　協業DX div. オンライン接客カンパニー 好きな言葉 当たり前を疑え by 澤円 人は意欲し創造することによって のみ幸福である by E ・アラン 趣味・好きなもの テニス / 靴磨き / アロマテラピー ゴルフ / カラオケ / エヴァ / ココロオークション 好きな技術 Go / Vue.js / Typescript / AWS / Docker / Kubernetes 職種 ソフトウェアエンジニア

VueUseとは？ What is VueUse?

VueUseとは？ Vue.js向けライブラリ群 Composition APIをベースにしたユーティリティ関数コレクション ⭐️ × 13.9k

QuickStart! Quick start !

QuickStart ! Vite + Vue 3 Nuxt 3 + Vue 3 Webpack + Vue 3 Nuxt 2 + Vue 2 Vue CLI + Vue 2

QuickStart ! ▼ Also CDN... ▼ Just type it !

VueUseの ユースケース VueUse use cases

🤔 結構大変じゃない？ VueUseのユースケース ① undo & redo - useRefHistory 編集可能ページによく実装されてるやつ 「⌘ + z」連打したことあるよね？ メモリ上にHistory用のRefを用意 inputをWatchして変更がある度に HistoryにPushしていって・・・ undo, redoのアクションも用意しないと💦

useRefHistoryに対象のデータを渡してあげるだけ 内部的にはデータの履歴をArrayで管理している VueUseのユースケース ① undo & redo - useRefHistory

onKeyStrokeと組み合わせることでショートカットキー作成可能 上の例：← ＋ ⌘ ＋ Shift VueUseのユースケース ① undo & redo - useRefHistory

VueUseのユースケース ② slide show - useScroll 🤔 結構大変じゃない？ windowサイズ取得 スクロールイベントを Observe スクロール位置の計算 スライド数との同期 スクロールしていくことで コンテンツが切り替わるサイト

useScrollにスクロール対象の親DOMを渡す x, y座標の他にも、スクロール中かや方向などのStateも返ってくる VueUseのユースケース ② slide show - useScroll

VueUseのユースケース ③ Infinity scroll - useInfiniteScroll 🤔 結構大変じゃない？ DOMの高さ取得 スクロール位置の Observe 再fetch処理の実装

無限スクロールの実装が超楽になりますよ！！ VueUseのユースケース ③ Infinity scroll - useInfiniteScroll

🤔 結構大変じゃない？ VueUseのユースケース ④ Floating panel - useDraggable 無限に実装方法が思いつ く Drag可能かつ、要素が今 どこにあるのかJS処理し たい

内部的にはVueUseのuseMouseを拡張して作られている イメージとしては、useMouseで取得したカーソルの座標位置を left: 12px; right: 100px のようなStyleに変換している VueUseのユースケース ④ Floating panel - useDraggable

Next Step ! Next step is ...

VueUseへ貢献してみよう！ 超高頻度でメンテされているアツいOSS🔥 ideasの中から自分に作れそうなものに挑戦してみるとよさそう💪

Thank you for watching! この後の セッションも お楽しみ 下さい！！ 2023年2月17日 AI事業本部 黒澤拓磨

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