VueUse: 5分で分かる Vue.js 開発の効率化術

by Naoki Haba

Slide 1

Slide 1 text

VueUse: 5分で分かる Vue.js 開発の効率化術 Vue.js v-tokyo Meetup #21

Slide 2

Slide 2 text

2 みなさん、VueUseをご存知ですか？

Slide 3

Slide 3 text

3 VueUseは Composition APIの可能性を最大限に引き出す究極のユーティリティコレクションです

Slide 4

Slide 4 text

4 VueUseの魅力や実際の活用方法について紹介します

Slide 5

Slide 5 text

5 VueUseの魅力を少しでも感じ取っていただければと思います

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

9 株式会社エブリーについて

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

12 Copyright © 2015 every, Inc. All rights reserved. • 200以上の豊富な関数 • Vue 3と2の両方に対応 • 完全なツリーシェイキング対応 • TypeScriptで記述された型安全な設計 • 柔軟なAPI設計（refs引数、カスタマイズ可能） • CDN経由で使用可能（バンドラー不要） • SSRフレンドリー • インタラクティブデモ付きドキュメント • 様々なアドオンサポート（Router, Firebase, RxJS など） VueUseって何？その特徴と機能

Slide 13

Slide 13 text

13 Copyright © 2015 every, Inc. All rights reserved. • 多様な環境に対応 • Vite + Vue 3 • Nuxt 3 + Vue 3 • Webpack + Vue 3 • Nuxt 2 + Vue 2 • Vue CLI + Vue 2 幅広い互換性により、さまざまなプロジェクトやチームのニーズに柔軟に対応 VueUseって何？その特徴と機能

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

17 Copyright © 2015 every, Inc. All rights reserved. • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力：際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行う • useFocusTrap • モーダルやポップアップ内でフォーカスを制御する • useNProgress • ページ遷移時のプログレスバーを管理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う

Slide 18

Slide 18 text

18 Copyright © 2015 every, Inc. All rights reserved. • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力：際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行う • useFocusTrap • モーダルやポップアップ内でフォーカスを制御する • useNProgress • ページ遷移時のプログレスバーを管理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う

Slide 19

Slide 19 text

19 Copyright © 2015 every, Inc. All rights reserved. • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力：際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行う • useFocusTrap • モーダルやポップアップ内でフォーカスを制御する • useNProgress • ページ遷移時のプログレスバーを管理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う

Slide 20

Slide 20 text

Slide 21

Slide 21 text

21 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力：際立つ特徴と豊富な機能 useMouse まとめ • 🚀 超簡単実装 • const { x, y } = useMouse() • 👉 たった1行でリアルタイムのマウス位置取得が可能に！ • 🔄 自動的なライフサイクル管理： • 👉 マウント時に接続、アンマウント時に自動切断 • メモリリークの心配なし＆コード量大幅削減 • 🛠 柔軟なカスタマイズ： • 👉 初期値設定、更新頻度調整、特定要素内での追跡など • useMouse({ target, touch: false })

Slide 22

Slide 22 text

22 Copyright © 2015 every, Inc. All rights reserved. • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力：際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行う • useFocusTrap • モーダルやポップアップ内でフォーカスを制御する • useNProgress • ページ遷移時のプログレスバーを管理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う

Slide 23

Slide 23 text

Slide 24

Slide 24 text

24 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力：際立つ特徴と豊富な機能 useClipboard まとめ • 💾 リアクティブなクリップボード読み取り • クリップボードの内容が変わると自動でtextが更新される • 📝 簡単なクリップボード書き込み • 引数に渡した値がクリップボードにコピーされるcopy('Hello, world') • 🛠 柔軟なカスタマイズ • 入力ソースのカスタマイズやコピー後の表示期間設定など細かな制御が可能

Slide 25

Slide 25 text

25 Copyright © 2015 every, Inc. All rights reserved. • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力：際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行う • useFocusTrap • モーダルやポップアップ内でフォーカスを制御する • useNProgress • ページ遷移時のプログレスバーを管理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う

Slide 26

Slide 26 text

Slide 27

Slide 27 text

27 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力：際立つ特徴と豊富な機能 useAxios まとめ • 🚀 シンプルな API呼び出し • const { data, error, loading } = useAxios('/api/data') • 👉 たった1行でAPIからデータ取得が可能に！ • 🛠 柔軟なカスタマイズ • 👉 リクエストメソッド、ヘッダー、手動トリガーなど細かな制御が可能

Slide 28

Slide 28 text

Slide 29

Slide 29 text

29 Copyright © 2015 every, Inc. All rights reserved. まとめ • 📈 VueUseが提供する価値 • 🎨 宣言的で読みやすいコード • 再利用可能なコンポーザブル • 🔄 リアクティビティとライフサイクル管理の自動化 • ライフサイクルフックの自動処理 • 🧩 モジュール式の柔軟な設計 • 必要な機能だけを選択して導入可能 • カスタマイズ性の高いオプション

Slide 30

Slide 30 text

Slide 31

Slide 31 text

31 Copyright © 2015 every, Inc. All rights reserved. エブリーからのお知らせ一緒にサービスを作る仲間を大募集中です！ 🔍 エブリー採用 https://corp.every.tv/recruits ● Tech Blogもやってます ● 開発部 Xアカウント ● エブリー公式オウンドメディア「 every.thing」はこちら https://tech.every.tv/ https://everything.every.tv/ https://x.com/every_engineer

Slide 32

Slide 32 text

No content