【Vue.js】Composable関数でロジックを共通化する方法｜useFetch・useFormの実装例

// composables/useCounter.js
import { ref } from 'vue'

export function useCounter(initial = 0) {
  // 関数の中で作った ref は、呼び出しごとに別の状態になる
  const count = ref(initial)

  function increment() {
    count.value++
  }

  // ref を含む、普通のオブジェクトで返す（分割代入しても、リアクティブのまま）
  return { count, increment }
}

<script setup>
import { useCounter } from './composables/useCounter'

// 同じ Composable を2回呼んでも、状態は別々
const a = useCounter(0)
const b = useCounter(10)
</script>

<template>
  <button @click="a.increment">A：{{ a.count }}</button>
  <button @click="b.increment">B：{{ b.count }}</button>
</template>

// composables/useSharedCounter.js
import { ref } from 'vue'

// 関数の「外」に置くと、呼び出した全員で同じ状態を共有する
const count = ref(0)

export function useSharedCounter() {
  function increment() {
    count.value++
  }
  return { count, increment }
}

// composables/useEventListener.js
import { onMounted, onUnmounted } from 'vue'

export function useEventListener(target, event, callback) {
  onMounted(() => target.addEventListener(event, callback))
  // 副作用は、コンポーネントが破棄されるときに必ず後始末する
  onUnmounted(() => target.removeEventListener(event, callback))
}

// composables/useWindowWidth.js
import { ref } from 'vue'
import { useEventListener } from './useEventListener'

export function useWindowWidth() {
  const width = ref(window.innerWidth)

  // Composable の中で、別の Composable を呼べる
  useEventListener(window, 'resize', () => {
    width.value = window.innerWidth
  })

  return { width }
}

// composables/useForm.js
import { reactive, ref, watch } from 'vue'

// rules：{ 項目名: 値 => エラーメッセージ（なければ空文字） }
export function useForm(initialState, rules) {
  const form = reactive({ ...initialState })
  const errors = reactive({})
  const submitted = ref(false)

  function validate() {
    for (const key of Object.keys(rules)) {
      errors[key] = rules[key](form[key]) || ''
    }
    return Object.values(errors).every(message => !message)
  }

  // 送信を試みたあとは、入力のたびに検証し直す（直したエラーが消える）
  watch(form, () => {
    if (submitted.value) validate()
  })

  // 検証に通ったときだけ、onValid を呼ぶ関数を返す
  function handleSubmit(onValid) {
    return () => {
      submitted.value = true
      if (validate()) onValid({ ...form })
    }
  }

  return { form, errors, handleSubmit }
}

<script setup>
import { useForm } from './composables/useForm'

const { form, errors, handleSubmit } = useForm(
  { name: '', email: '' },
  {
    name: (v) => (v ? '' : '名前は必須です'),
    email: (v) => (/^\S+@\S+$/.test(v) ? '' : 'メールアドレスの形式が正しくありません')
  }
)

const onSubmit = handleSubmit((values) => {
  console.log('送信する値：', values)
})
</script>

<template>
  <form @submit.prevent="onSubmit">
    <div>
      <input v-model="form.name" placeholder="名前">
      <p v-if="errors.name">{{ errors.name }}</p>
    </div>
    <div>
      <input v-model="form.email" placeholder="メールアドレス">
      <p v-if="errors.email">{{ errors.email }}</p>
    </div>
    <!-- 送信ボタンは無効にしない（押せない理由が分からなくなるため） -->
    <button type="submit">送信</button>
  </form>
</template>

<!-- NG：一度エラーになると、二度と押せなくなる -->
<button :disabled="!isValid">送信</button>

<!-- isValid は errors から作られるが、errors は validate() を呼ばない限り更新されない。
     ボタンが無効だと validate() を呼べないので、入力を直してもエラーが消えず、詰んでしまう -->

// composables/useFetch.js
import { ref, watchEffect, toValue } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)

  // watchEffect は setup 中に即時実行されるので、最初の描画前に loading が true になる
  watchEffect(async () => {
    const target = toValue(url)   // await より前（同期の部分）で読む。URL が変わると再実行される

    loading.value = true
    data.value = null
    error.value = null
    try {
      const res = await fetch(target)
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      data.value = await res.json()
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  })

  return { data, error, loading }
}