Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VueUse: 5分で分かる Vue.js 開発の効率化術
Search
Naoki Haba
July 26, 2024
Programming
5
3.5k
VueUse: 5分で分かる Vue.js 開発の効率化術
Vue.js v-tokyo Meetup #21 のLT資料です。
https://vuejs-meetup.connpass.com/event/321431/
Naoki Haba
July 26, 2024
Tweet
Share
More Decks by Naoki Haba
See All by Naoki Haba
Laravel+PHPStanで始める実践的静的解析入門
naokihaba
2
94
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
830
技術で挑む保育現場の課題解決 〜コドモンエンジニアの 開発スタイルと取り組み
naokihaba
1
110
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
1.2k
unplugin-vue-routerで実現する Nuxt 風ファイルベースルーティング
naokihaba
1
140
前職でNestJSを採用して得た体験からの学び
naokihaba
0
400
GitHub_Packagesで型情報を共通化したら素晴らしかった件
naokihaba
0
260
チームで始める_テスト文化のススメ
naokihaba
0
800
不具合に立ち向かう テスト戦略 ~ NestJSで作るCI環境 ~
naokihaba
0
530
Other Decks in Programming
See All in Programming
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Rails Girls Zürich Keynote
gr2m
95
14k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Code Reviewing Like a Champion
maltzj
524
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Pragmatic Product Professional
lauravandoore
35
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
VueUse: 5分で分かる Vue.js 開発の効率化術 Vue.js v-tokyo Meetup #21
2 みなさん、VueUseをご存知ですか?
3 VueUseは Composition APIの可能性を最大限に引き出す究極 のユーティリティコレクションです
4 VueUseの魅力や実際の活用方法について紹介します
5 VueUseの魅力を少しでも感じ取っていただければと思います
6 Copyright © 2015 every, Inc. All rights reserved. アジェンダ
1. 自己紹介 2. VueUseって何?その特徴と機能 3. VueUseの魅力:際立つ特徴と豊富な機能 4. まとめ
7 Copyright © 2015 every, Inc. All rights reserved. アジェンダ
1. 自己紹介 2. VueUseって何?その特徴と機能 3. VueUseの魅力:際立つ特徴と豊富な機能 4. まとめ
8 Copyright © 2015 every, Inc. All rights reserved. 自己紹介
• 羽馬 直樹 / @NaokiHaba • 所属:株式会社 エブリー • コミュニティ • NestJS 日本ユーザーグループ共同主催者 • 最近 • Vue Fes Japan 2024 CFP 提出しました
9 株式会社エブリーについて
10 Copyright © 2015 every, Inc. All rights reserved. エブリーが提供しているプロダクト、ソリューション一覧
エブリーではマルチプロダクトを展開し、あらゆる暮らしの最適化に向き合っています
11 Copyright © 2015 every, Inc. All rights reserved. アジェンダ
1. 自己紹介 2. VueUseって何?その特徴と機能 3. 実際どう使うの?実践的なユースケース 4. まとめ
12 Copyright © 2015 every, Inc. All rights reserved. •
200以上の豊富な関数 • Vue 3と2の両方に対応 • 完全なツリーシェイキング対応 • TypeScriptで記述された型安全な設計 • 柔軟なAPI設計(refs引数、カスタマイズ可 能) • CDN経由で使用可能(バンドラー不要) • SSRフレンドリー • インタラクティブデモ付きドキュメント • 様々なアドオンサポート(Router, Firebase, RxJS など) VueUseって何?その特徴と機能
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って何?その特徴と機能
14 Copyright © 2015 every, Inc. All rights reserved. アジェンダ
1. 自己紹介 2. VueUseって何?その特徴と機能 3. VueUseの魅力:際立つ特徴と豊富な機能 4. まとめ
15 Copyright © 2015 every, Inc. All rights reserved. VueUseライブラリが提供する豊富な関数を紹介します
VueUseの魅力:際立つ特徴と豊富な機能
16 Copyright © 2015 every, Inc. All rights reserved. 時間の都合上、全ての関数*
を紹介することはできないので いくつかピックアップした関数について紹介します *Functions | VueUse にVueUseの全関数一覧がリスト化されています VueUseの魅力:際立つ特徴と豊富な機能
17 Copyright © 2015 every, Inc. All rights reserved. •
useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力:際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う
18 Copyright © 2015 every, Inc. All rights reserved. •
useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力:際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う
19 Copyright © 2015 every, Inc. All rights reserved. •
useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力:際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う
20 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力:際立つ特徴と豊富な機能
useMouse • useMouse にオプションを渡すだけでマウス座標を取得できる • 内部的にはイベントリスナーを使用して座標を追跡している
21 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力:際立つ特徴と豊富な機能
useMouse まとめ • 🚀 超簡単実装 • const { x, y } = useMouse() • 👉 たった1行でリアルタイムのマウス位置取得が可能に! • 🔄 自動的なライフサイクル管理: • 👉 マウント時に接続、アンマウント時に自動切断 • メモリリークの心配なし&コード量大幅削減 • 🛠 柔軟なカスタマイズ: • 👉 初期値設定、更新頻度調整、特定要素内での追跡など • useMouse({ target, touch: false })
22 Copyright © 2015 every, Inc. All rights reserved. •
useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力:際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う
23 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力:際立つ特徴と豊富な機能
useClipboard • リアクティブな状態管理( copied状態など)が可能 • コピー成功後、 "copied"状態が真となる期間もカスタム可能
24 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力:際立つ特徴と豊富な機能
useClipboard まとめ • 💾 リアクティブなクリップボード読み取り • クリップボードの内容が変わると自動でtextが更新される • 📝 簡単なクリップボード書き込み • 引数に渡した値がクリップボードにコピーされるcopy('Hello, world') • 🛠 柔軟なカスタマイズ • 入力ソースのカスタマイズやコピー後の表示期間設定など細かな 制御が可能
25 Copyright © 2015 every, Inc. All rights reserved. •
useMouse • マウスの位置を追跡する • useToggle • ブール値の状態を切り替える • useClipboard • クリップボードの操作を行う • useGeolocation • ユーザーの位置情報を取得 • useDark • ダークモードの状態を管理する VueUseの魅力:際立つ特徴と豊富な機能 • useAxios • Axiosを使用してHTTPリクエストを行 う • useFocusTrap • モーダルやポップアップ内でフォーカ スを制御する • useNProgress • ページ遷移時のプログレスバーを管 理する • useQRCode • QRコードを生成する • useAsyncValidator • 非同期バリデーションを行う
26 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力:際立つ特徴と豊富な機能
useAxios • 自動的なリクエスト状態管理 • リアクティブなクエリパラメータ • クエリパラメータが変更されると自動的にリクエストが再送される
27 Copyright © 2015 every, Inc. All rights reserved. VueUseの魅力:際立つ特徴と豊富な機能
useAxios まとめ • 🚀 シンプルな API呼び出し • const { data, error, loading } = useAxios('/api/data') • 👉 たった1行でAPIからデータ取得が可能に! • 🛠 柔軟なカスタマイズ • 👉 リクエストメソッド、ヘッダー、手動トリガーなど細かな制御が可 能
28 Copyright © 2015 every, Inc. All rights reserved. アジェンダ
1. 自己紹介 2. VueUseって何?その特徴と機能 3. VueUseの魅力:際立つ特徴と豊富な機能 4. まとめ
29 Copyright © 2015 every, Inc. All rights reserved. まとめ
• 📈 VueUseが提供する価値 • 🎨 宣言的で読みやすいコード • 再利用可能なコンポーザブル • 🔄 リアクティビティとライフサイクル管理の自動化 • ライフサイクルフックの自動処理 • 🧩 モジュール式の柔軟な設計 • 必要な機能だけを選択して導入可能 • カスタマイズ性の高いオプション
30 Copyright © 2015 every, Inc. All rights reserved. 🎉
VueUseでVue開発をさらに楽しく! まとめ
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
None