VueUseはVue.jsのcomposable集

「コンポーザブル（composable）」とは、Vue の Composition API を活用して状態を持つロジックをカプセル化して再利用するための関数です。

VueUseはcomposableな関数やユーティリティの集まりで、Vue.jsアプリケーションの開発をより簡単で効率的にするために提供されています。

今回はVueUseの中の関数として、3つ紹介します。

useToggle

真偽値をトグル（切り替え）する機能を提供する関数です。

この関数を使用すると、ボタンのクリック時に状態を反転させるなどの機能が簡単に作成できます。

useToggleの戻り値には、valueとtoggleというプロパティが含まれています。

• value: 現在の真偽値の状態を示します
• toggle: 状態をトグルするための関数です

使用例を見てみましょう。

使用例

この例では、ボタンがクリックされるたびに、toggle関数が呼ばれます。

toggle関数が呼ばれるごとに、保持されているvalue値がトグルされます。

value値を表示して、現在の真偽値の状態を表示しています。

<script setup lang="ts">
import { useToggle } from '@vueuse/core';
const [value, toggle] = useToggle(false);
</script>

<template>
  <div>
    <p>Is Visible: {{ value }}</p>
    <button @click="toggle()">Toggle</button>
  </div>
</template>

VueUse useToggle 公式

useMouse

マウスの座標を取得し、リアクティブに返す関数です。

マウスの位置で画像を切り替えたりする場合などに便利な関数です。

useMouseの戻り値には、xとyというプロパティが含まれています。

• x: マウスのX座標
• y: マウスのY座標

使用例を見てみましょう。

使用例

useMouseにて取得したマウスの座標を表示しています。

マウスの座標や関連するプロパティは、リアクティブな値として提供されているため、

mouse.xとmouse.yの値が変更されると、それに連動して表示されているテキストも更新されます。

<script setup lang="ts">
import { useMouse } from '@vueuse/core';
const mouse = useMouse();
</script>

<template>
  <div>
    <p> X座標: {{ mouse.x }}</p>
    <p> Y座標: {{ mouse.y }}</p>
  </div>
</template>

VueUse useMouse 公式

useCounter

カウンターを簡単に管理するための関数です。

この関数を使うと、カウンターの増減やリセットなどを簡単に実現できます。

useCounterの戻り値には、countというプロパティや、inc・dec・set・reset関数が含まれています。

• count: カウンターの現在の値です。
• inc: 指定された値だけ、カウンターの値を増やすメソッド
• dec: 指定された値だけ、カウンターの値を減らすメソッド
• set: カウンターの値を指定された値に変更するメソッド
• reset: カウンターを初期値にリセットするメソッド

使用例を見てみましょう。

使用例

まず、useCounterにてカウンターの初期値を0で設定しています。

2つ増ボタンをクリックすることで、inc関数に2を渡しているため、カウンター値が2ずつ増えます。

2つ減ボタンをクリックすることで、dec関数に2を渡しているため、カウンター値が2ずつ減ります。

カウンター値は保持されているので、countを表示することで、増減後の値が表示されます。

<script setup lang="ts">
import { useCounter } from '@vueuse/core';
const { count, inc, dec } = useCounter(0);
</script>

<template>
  <h1>VueUse: useCounter</h1>
  <div>Count:{{ count }}</div>
  <div>
    <button @click="inc(2)">2つ増</button>
    <button @click="dec(2)">2つ減</button>
  </div>
</template>

VueUse useCounter 公式

まとめ

使用例を見ていただきましたが、とても簡単にVueUseライブラリを利用できることが分かって頂けたかと思います。

VueUseは、Vue.jsアプリケーションで状態やロジックを管理し、コンポーネントの開発をシンプルにし、再利用性を高めてくれます。

記事内で紹介した関数は、ほんのごく一部です。

VueUseを利用することで、様々な機能が簡単に作れます！

ぜひ取り入れて、色々なアプリケーションを作成してみてください。