170 Views
September 29, 24
スライド概要
VueUseは、最大限にComposition APIを活用できるように設計されたユーティリティコレクションであり、素早くVue.jsアプリケーションを開発することができます。200以上の豊富な関数や、Vue 3と2の両方に対応した互換性の高さ、TypeScriptのような型安全な設計など、VueUseの特長を押さえつつ、Vue.js v-tokyo Meetup #21で紹介された具体的な活用方法や、多様な環境に対応した設計などが紹介されました。Vue.js開発者であれば、VueUseを使って効率的かつスマートな開発を実現することが可能です。
Software Developer
VueUse: 5分で分かる Vue.js 開発の効率化術 Vue.js v-tokyo Meetup #21
みなさん、VueUseをご存知ですか? 2
VueUseは Composition APIの可能性を最大限に引き出す究極 のユーティリティコレクションです 3
VueUseの魅力や実際の活用方法について紹介します 4
VueUseの魅力を少しでも感じ取っていただければと思います 5
アジェンダ 1. 自己紹介 2. VueUseって何?その特徴と機能 3. VueUseの魅力:際立つ特徴と豊富な機能 4. まとめ Copyright © 2015 every, Inc. All rights reserved. 6
アジェンダ 1. 自己紹介 2. VueUseって何?その特徴と機能 3. VueUseの魅力:際立つ特徴と豊富な機能 4. まとめ Copyright © 2015 every, Inc. All rights reserved. 7
自己紹介 • 羽馬 直樹 / @NaokiHaba • 所属:株式会社 エブリー • コミュニティ • NestJS 日本ユーザーグループ共同主催者 • 最近 • Vue Fes Japan 2024 CFP 提出しました Copyright © 2015 every, Inc. All rights reserved. 8
株式会社エブリーについて 9
エブリーが提供しているプロダクト、ソリューション一覧 エブリーではマルチプロダクトを展開し、あらゆる暮らしの最適化に向き合っています Copyright © 2015 every, Inc. All rights reserved. 10
アジェンダ 1. 自己紹介 2. VueUseって何?その特徴と機能 3. 実際どう使うの?実践的なユースケース 4. まとめ Copyright © 2015 every, Inc. All rights reserved. 11
VueUseって何?その特徴と機能 • 200以上の豊富な関数 • Vue 3と2の両方に対応 • 完全なツリーシェイキング対応 • TypeScriptで記述された型安全な設計 • 柔軟なAPI設計(refs引数、カスタマイズ可 能) • CDN経由で使用可能(バンドラー不要) • SSRフレンドリー • インタラクティブデモ付きドキュメント • 様々なアドオンサポート(Router, Firebase, RxJS など) Copyright © 2015 every, Inc. All rights reserved. 12
VueUseって何?その特徴と機能 • 多様な環境に対応 • Vite + Vue 3 • Nuxt 3 + Vue 3 • Webpack + Vue 3 • Nuxt 2 + Vue 2 • Vue CLI + Vue 2 幅広い互換性により、さまざまな プロジェクトやチームのニーズに 柔軟に対応 Copyright © 2015 every, Inc. All rights reserved. 13
アジェンダ 1. 自己紹介 2. VueUseって何?その特徴と機能 3. VueUseの魅力:際立つ特徴と豊富な機能 4. まとめ Copyright © 2015 every, Inc. All rights reserved. 14
VueUseの魅力:際立つ特徴と豊富な機能 VueUseライブラリが提供する豊富な関数を紹介します Copyright © 2015 every, Inc. All rights reserved. 15
VueUseの魅力:際立つ特徴と豊富な機能 時間の都合上、全ての関数* を紹介することはできないので いくつかピックアップした関数について紹介します *Functions | VueUse にVueUseの全関数一覧がリスト化されています Copyright © 2015 every, Inc. All rights reserved. 16
VueUseの魅力:際立つ特徴と豊富な機能 • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する Copyright © 2015 every, Inc. All rights reserved. • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う 17
VueUseの魅力:際立つ特徴と豊富な機能 • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する Copyright © 2015 every, Inc. All rights reserved. • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う 18
VueUseの魅力:際立つ特徴と豊富な機能 • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する Copyright © 2015 every, Inc. All rights reserved. • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う 19
VueUseの魅力:際立つ特徴と豊富な機能 useMouse • useMouse にオプションを渡すだけでマウス座標を取得できる • 内部的にはイベントリスナーを使用して座標を追跡している Copyright © 2015 every, Inc. All rights reserved. 20
VueUseの魅力:際立つ特徴と豊富な機能 useMouse まとめ • 🚀 超簡単実装 • const { x, y } = useMouse() • 👉 たった1行でリアルタイムのマウス位置取得が可能に! • 🔄 自動的なライフサイクル管理: • 👉 マウント時に接続、アンマウント時に自動切断 • メモリリークの心配なし&コード量大幅削減 • 🛠 柔軟なカスタマイズ: • 👉 初期値設定、更新頻度調整、特定要素内での追跡など • useMouse({ target, touch: false }) Copyright © 2015 every, Inc. All rights reserved. 21
VueUseの魅力:際立つ特徴と豊富な機能 • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する Copyright © 2015 every, Inc. All rights reserved. • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う 22
VueUseの魅力:際立つ特徴と豊富な機能 useClipboard • リアクティブな状態管理( copied状態など)が可能 • コピー成功後、 "copied"状態が真となる期間もカスタム可能 Copyright © 2015 every, Inc. All rights reserved. 23
VueUseの魅力:際立つ特徴と豊富な機能 useClipboard まとめ • 💾 リアクティブなクリップボード読み取り • クリップボードの内容が変わると自動でtextが更新される • 📝 簡単なクリップボード書き込み • 引数に渡した値がクリップボードにコピーされるcopy('Hello, world') • 🛠 柔軟なカスタマイズ • 入力ソースのカスタマイズやコピー後の表示期間設定など細かな 制御が可能 Copyright © 2015 every, Inc. All rights reserved. 24
VueUseの魅力:際立つ特徴と豊富な機能 • useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する Copyright © 2015 every, Inc. All rights reserved. • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う 25
VueUseの魅力:際立つ特徴と豊富な機能 useAxios • 自動的なリクエスト状態管理 • リアクティブなクエリパラメータ • クエリパラメータが変更されると自動的にリクエストが再送される Copyright © 2015 every, Inc. All rights reserved. 26
VueUseの魅力:際立つ特徴と豊富な機能 useAxios まとめ • 🚀 シンプルな API呼び出し • const { data, error, loading } = useAxios('/api/data') • 👉 たった1行でAPIからデータ取得が可能に! • 🛠 柔軟なカスタマイズ • 👉 リクエストメソッド、ヘッダー、手動トリガーなど細かな制御が可 能 Copyright © 2015 every, Inc. All rights reserved. 27
アジェンダ 1. 自己紹介 2. VueUseって何?その特徴と機能 3. VueUseの魅力:際立つ特徴と豊富な機能 4. まとめ Copyright © 2015 every, Inc. All rights reserved. 28
まとめ • 📈 VueUseが提供する価値 • 🎨 宣言的で読みやすいコード • 再利用可能なコンポーザブル • 🔄 リアクティビティとライフサイクル管理の自動化 • ライフサイクルフックの自動処理 • 🧩 モジュール式の柔軟な設計 • 必要な機能だけを選択して導入可能 • カスタマイズ性の高いオプション Copyright © 2015 every, Inc. All rights reserved. 29
まとめ 🎉 VueUseでVue開発をさらに楽しく! Copyright © 2015 every, Inc. All rights reserved. 30
エブリーからのお知らせ 一緒にサービスを作る仲間を大募集中です! 🔍 エブリー 採用 https://corp.every.tv/recruits ● Tech Blogもやってます ● 開発部 Xアカウント ● エブリー公式オウンドメディア「 every.thing」はこちら Copyright © 2015 every, Inc. All rights reserved. https://tech.every.tv/ https://x.com/every_engineer https://everything.every.tv/ 31