create-adaptable-composable

柔軟に組み合わせて使えるコンポーザブルを作成する

柔軟に組み合わせて使えるコンポーザブルは、リアクティブな入力と非リアクティブな入力の両方を受け取れる再利用可能な関数です。これにより、開発者は入力のリアクティビティを気にせず、さまざまなコンテキストでコンポーザブルを使用できます。

Vue.js で柔軟に組み合わせて使えるコンポーザブルを設計する手順：

1. コンポーザブルの目的、API 設計、想定される入出力を確認します。
2. リアクティブにする入力パラメーター（MaybeRef / MaybeRefOrGetter）を特定します。
3. リアクティブエフェクト内で、toValue() または toRef() を使って入力を正規化します。
4. Vue のリアクティビティ API を使って、コンポーザブルのコアロジックを実装します。

中核となる型の概念

型ユーティリティ

/**
 * value or writable ref (value/ref/shallowRef/writable computed)
 */
export type MaybeRef<T = any> = T | Ref<T> | ShallowRef<T> | WritableComputedRef<T>;

/**
 * MaybeRef<T> + ComputedRef<T> + () => T
 */
export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);

方針とルール

• 読み取り専用で、computed に適した入力には MaybeRefOrGetter を使います
• 書き込み可能、または双方向の入力が必要な場合は MaybeRef を使います
• パラメーターが関数値（コールバック／述語／比較関数）である可能性がある場合は、誤ってゲッターとして呼び出すおそれがあるため、MaybeRefOrGetter は使わないでください
• DOM／要素のターゲットで、computed／派生ターゲットを使いたい場合は、MaybeRefOrGetter を使います

MaybeRefOrGetter または MaybeRef を使う場合：

• リアクティブな値は toRef() で取得します（例：watcher のソース）
• 非リアクティブな値は toValue() で取得します

例

読み取り専用のタイトルパラメーターを持つ、柔軟に組み合わせて使える useDocumentTitle コンポーザブル

import { watch, toRef } from 'vue'
import type { MaybeRefOrGetter } from 'vue'

export function useDocumentTitle(title: MaybeRefOrGetter<string>) {
  watch(toRef(title), (t) => {
    document.title = t
  }, { immediate: true })
}

双方向で書き込み可能なカウントパラメーターを持つ、柔軟に組み合わせて使える useCounter コンポーザブル

import { watch, toRef } from 'vue'
import type { MaybeRef } from 'vue'

function useCounter(count: MaybeRef<number>) {
  const countRef = toRef(count)
  function add() {
    countRef.value++
  }
  return { add }
}