every Tech Blog

株式会社エブリーのTech Blogです。

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

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

Vue

はじめに

こんにちは、Retail Hub 事業部でエンジニアを務めている 羽馬 です。

この記事は、Vue.js 日本ユーザーグループ主催の Vue.js v-tokyo Meetup #21 で登壇した際の発表資料を元に、VueUse というライブラリを使って Vue.js 開発を効率化する方法をご紹介します。

登壇資料はこちら：

speakerdeck.com

VueUse とは

VueUseは、Vue Composition APIのための包括的なユーティリティコレクションです。以下の特徴があります：

  • 200以上の便利な関数を提供
  • Vue.jsアプリケーション開発の生産性を大幅に向上
  • ローカルストレージ、デバイス情報、スクロール位置、フォームバリデーションなど、幅広い機能をカバー
  • 宣言的で再利用可能なコンポーザブル
  • ライフサイクルフックの自動処理
  • 必要な機能のみをインポート可能（tree-shaking対応）
  • 高度にカスタマイズ可能なオプション

vueuse.org

VueUseを使用することで、複雑な機能を簡潔に実装でき、開発効率を劇的に向上させることができます。

VueUseが提供する主な機能

VueUseは非常に多くの機能を提供していますが、ここでは特に有用な機能をいくつか紹介します：

  1. 状態管理

    • useStorage: ローカルストレージやセッションストレージとリアクティブな状態を同期
    • useState: シンプルな状態管理

  2. センサーと端末情報

    • useMouse: マウスの位置を追跡
    • useGeolocation: デバイスの位置情報を取得
    • useDeviceOrientation: デバイスの向きを検出

  3. ブラウザ操作

    • useClipboard: クリップボードの操作
    • useDark: ダークモードの切り替え
    • useFullscreen: フルスクリーンモードの制御

  4. アニメーションとタイミング

    • useInterval: 定期的な処理の実行
    • useTimeout: 遅延処理の実行
    • useTransition: スムーズな状態遷移

  5. ネットワークとAPI

    • useFetch: HTTPリクエストの簡易化
    • useWebSocket: WebSocketの操作

  6. UI操作

    • useVModel: v-modelの簡易実装
    • useInfiniteScroll: 無限スクロールの実装

これらの機能を使用することで、一般的なWeb開発タスクを簡単に、そして効率的に実装することができます。

VueUseの具体的な使用例

VueUseの機能の中から、特に有用なものをいくつか抜粋して具体的に説明します：

  1. ローカルストレージの利用 (useStorage)

ローカルストレージの利用 (useStorage)

   import { useStorage } from '@vueuse/core'

   const state = useStorage('my-storage-key', { count: 0 })

   // stateを変更すると自動的にローカルストレージに保存される
   state.value.count++

VueUseを使用しない場合：

   import { ref, watch } from 'vue'

   const state = ref(JSON.parse(localStorage.getItem('my-storage-key')) || { count: 0 })

   watch(state, (newState) => {
     localStorage.setItem('my-storage-key', JSON.stringify(newState))
   }, { deep: true })

   // stateを変更する度に手動でwatchを設定する必要がある
   state.value.count++

ダークモードの実装 (useDark)

VueUseを使用する場合：

   import { useDark, useToggle } from '@vueuse/core'

   const isDark = useDark()
   const toggleDark = useToggle(isDark)

   // ダークモードの切り替えが簡単
   toggleDark()

VueUseを使用しない場合：

   import { ref, watch } from 'vue'

   const isDark = ref(false)

   const toggleDark = () => {
     isDark.value = !isDark.value
     if (isDark.value) {
       document.documentElement.classList.add('dark')
     } else {
       document.documentElement.classList.remove('dark')
     }
   }

   watch(isDark, (newValue) => {
     localStorage.setItem('dark-mode', newValue)
   })

   // 初期化時にローカルストレージから設定を読み込む
   isDark.value = JSON.parse(localStorage.getItem('dark-mode') || 'false')

無限スクロールの実装 (useInfiniteScroll)

VueUseを使用する場合：

   import { useInfiniteScroll } from '@vueuse/core'

   const el = ref(null)
   const { arrivedState, reload } = useInfiniteScroll(el, () => {
     // 新しいデータをロードする処理
   })

VueUseを使用しない場合：

   import { ref, onMounted, onUnmounted } from 'vue'

   const el = ref(null)
   const isLoading = ref(false)

   const checkScroll = () => {
     if (!el.value) return
     const { scrollTop, scrollHeight, clientHeight } = el.value
     if (scrollTop + clientHeight >= scrollHeight - 50 && !isLoading.value) {
       isLoading.value = true
       // 新しいデータをロードする処理
       // 処理が完了したらisLoading.value = falseにする
     }
   }

   onMounted(() => {
     el.value?.addEventListener('scroll', checkScroll)
   })

   onUnmounted(() => {
     el.value?.removeEventListener('scroll', checkScroll)
   })

これらの例から分かるように、VueUseを使用することで、複雑な機能をより簡潔に、そして宣言的に実装できます。特に、ローカルストレージの同期やダークモードの実装など、頻繁に必要となる機能を簡単に実装できる点が大きな利点です。

一方で、VueUseを使用しない場合、より多くのボイラープレートコードが必要となり、ライフサイクルフックの管理やイベントリスナーの設定など、細かい実装の詳細に注意を払う必要があります。

ただし、プロジェクトの規模や要件によっては、外部ライブラリに依存せず、Vueの基本機能のみで実装することが適切な場合もあります。特に、使用する機能が限定的で、バンドルサイズを最小限に抑えたい場合などは、VueUseを使用しない選択肢も考慮に値します。

まとめ

VueUseは、Vue.jsアプリケーション開発において非常に強力なツールです。以下に、VueUseを使用することの主な利点をまとめます：

  1. 開発効率の向上：

    • 複雑な機能を少ないコードで実装可能
    • 頻繁に使用される機能が既に最適化されて提供されている

  2. コードの可読性と保守性の向上：

    • 宣言的なAPIにより、コードの意図が明確になる
    • コンポーザブルの再利用が容易

  3. 学習曲線の緩和：

    • Vue.jsのベストプラクティスが組み込まれている
    • 豊富なドキュメントとコミュニティサポート

  4. パフォーマンスの最適化：

    • ライフサイクルフックの自動管理
    • tree-shakingに対応し、必要な機能のみをバンドル可能

  5. Vue.jsエコシステム互換性：

    • Vue.js 2、Vue 3、Nuxt.jsなど、様々な環境で使用可能

VueUseを活用することで、開発者はビジネスロジックの実装に集中でき、結果としてより高品質なアプリケーションを効率的に開発することが可能になります。ただし、プロジェクトの要件や規模に応じて、VueUseの使用を検討することが重要です。

今後のVue.js開発において、VueUseは重要なツールの一つとなることが期待されます。継続的な学習と実践を通じて、VueUseの可能性を最大限に活用していくことをお勧めします。