Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VueUseのすすめ

 VueUseのすすめ

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

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

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

Takuma Kurosawa

February 17, 2023
Tweet

More Decks by Takuma Kurosawa

Other Decks in Programming

Transcript

  1. もくじ 1 自己紹介 2 VueUseとは? 4 5 Next step !

    3 QuickStart! VueUseのユースケース
  2. 黒澤拓磨( くろたく) Twitter/Qiita/GitHub: @TakumaKurosawa #世界で一番シュークリームが好き 所属   株式会社サイバーエージェント   協業DX div. オンライン接客カンパニー

    好きな言葉 当たり前を疑え by 澤円 人は意欲し創造することによって のみ幸福である by E ・アラン 趣味・好きなもの テニス / 靴磨き / アロマテラピー ゴルフ / カラオケ / エヴァ / ココロオークション 好きな技術 Go / Vue.js / Typescript / AWS / Docker / Kubernetes 職種 ソフトウェアエンジニア
  3. QuickStart ! Vite + Vue 3 Nuxt 3 + Vue

    3 Webpack + Vue 3 Nuxt 2 + Vue 2 Vue CLI + Vue 2
  4. 🤔 結構大変じゃない? VueUseのユースケース ① undo & redo - useRefHistory 編集可能ページによく実装されてるやつ

    「⌘ + z」連打したことあるよね? メモリ上にHistory用のRefを用意 inputをWatchして変更がある度に HistoryにPushしていって・・・ undo, redoのアクションも用意しないと💦
  5. VueUseのユースケース ② slide show - useScroll 🤔 結構大変じゃない? windowサイズ取得 スクロールイベントを

    Observe スクロール位置の計算 スライド数との同期 スクロールしていくことで コンテンツが切り替わるサイト
  6. 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