vueuse-math-skilld

@vueuse/math 15.0.0

Vue 3 向けのリアクティブな数学関数です。すべてのコンポーザブルは computed 内で toValue を使って入力値を解決するため、引数には数値、ref、ゲッター（MaybeRefOrGetter<number>）を指定でき、結果はすべての入力値を追跡する ComputedRef<number> になります（dist/index.js:70-71）。唯一の例外として、変更可能な ref を指定した useClamp は書き込み可能な computed を返します（dist/index.d.ts:83）。

環境

• インストール：npm i @vueuse/math @vueuse/core（README.md:10）。@vueuse/core が必要なのは、whenever などの core 関数と組み合わせる場合だけです。
• Vue のピア依存関係は ^3.5.0（package.json:42）です。v14 以降の最小要件です。
• Node.js は >= 22（package.json:39）です。v15 では Node.js 20 のサポートが終了しました（リリース）。
• v13 以降は ESM 専用です："type": "module"。CommonJS ビルドはありません（package.json:3；リリース）。CJS のコンテキストから読み込む必要がある場合は、動的な import() を使用してください。
• "sideEffects": false（package.json:24）：未使用のコンポーザブルはツリーシェイクで除去されます。
• ランタイム依存関係：@vueuse/[email protected]（package.json:45）。clamp と reactify を提供します。
• エントリポイントは dist/index.js、型定義は dist/index.d.ts です（package.json:30,34）。

エクスポート

dist/index.d.ts:167 より：

• 関数：createGenericProjection、createProjection、logicAnd、logicNot、logicOr、useAbs、useAverage、useCeil、useClamp、useFloor、useMath、useMax、useMin、usePrecision、useProjection、useRound、useSum、useTrunc
• 型：ProjectorFunction、UseProjection、UseMathKeys、UseMathReturn、UsePrecisionOptions
• 非推奨の別名：and、or、not（dist/index.d.ts:20-21,32-33,44-45）

シグネチャ、動作に関する注意事項、各関数の使用例については、references/api.md を参照してください。バージョン固有の変更については、references/migrations.md を参照してください。

よくあるタスク

書き込み可能なクランプ済み状態：変更可能な ref を渡すと、代入時に自動的にクランプされます。

import { useClamp } from '@vueuse/math'

const level = ref(0)
const clamped = useClamp(level, 0, 10)
clamped.value = 15 // clamped.value and level.value are 10

読み取り専用のクランプ：ゲッターまたは読み取り専用 ref を渡します（dist/index.js:113）。

const ratio = useClamp(() => raw.value / total.value, 0, 1)

配列を作成する代わりに、残余引数を使って固定の ref を集計します（dist/index.d.ts:154-155）。

const total = useSum(refA, refB, refC)
const peak = useMax(refA, refB, refC)

スライダー、チャート、進捗 UI などで、値をある範囲から別の範囲にマッピングします。

const progress = useProjection(scrollY, [0, pageHeight], [0, 100])

コンポーネント間で同じ射影を再利用します。範囲はリアクティブにできます。

const toPercent = createProjection(domain, [0, 100])
const a = toPercent(inputA)

小数点以下の桁数を指定して丸め、toFixed が返す文字列ではなく number を維持します。

const price = usePrecision(ref(3.1415), 2) // 3.14
const up = usePrecision(ref(3.1415), 2, { math: 'ceil' }) // 3.15

ブール値フラグをリアクティブに組み合わせ、@vueuse/core の whenever に副作用を渡します。

import { whenever } from '@vueuse/core'
import { logicAnd } from '@vueuse/math'

whenever(logicAnd(ready, hasData), run)

ルールと注意点

• エイリアス and、or、not は使用しないでください。v14 で非推奨となり、logicAnd、logicOr、logicNot に置き換えられました（dist/index.d.ts:20,32,44、リリース）。
• useAverage は空チェックなしで array.length で除算します。空の入力では NaN になります（dist/index.js:91-96）。空の場合はご自身で処理してください。
• useMax() は入力がない場合 -Infinity を返し、useMin() は Infinity を返します。どちらも引数を展開して Math.max／Math.min に渡すためです（dist/index.js:157-176）。
• 集計関数（useSum、useAverage、useMin、useMax）は、ref、getter、数値、それらの配列を受け取り、toValueArgsFlat によってネストされた配列を1階層分フラット化します（dist/index.js:75-81）。
• usePrecision は値の10進文字列を介してスケーリングすることで、浮動小数点の誤差を回避します（accurateMultiply、dist/index.js:187-193）。options.math のデフォルトは 'round' です（dist/index.d.ts:122）。
• useMath が受け取るのは、'pow' や 'sqrt' など、関数である Math のキーのみです。PI などの定数は使用できません（dist/index.d.ts:96）。
• 射影はデフォルトで線形です：(input - from[0]) / (from[1] - from[0]) * (to[1] - to[0]) + to[0]（dist/index.js:12-14）。非線形マッピング（対数スケール、イージング）にはカスタムの projector を渡すか、数値以外のドメインには createGenericProjection を使用してください（dist/index.d.ts:4-6）。
• テンプレートやウォッチャーでは、computed(() => Math.x(...)) よりもこれらのコンポーザブルを優先してください。Math の呼び出しを一元化し、すべての引数に対するリアクティビティを維持し、ツリーシェイキング用の @__NO_SIDE_EFFECTS__ アノテーションも付与されています（dist/index.js:4,15,111）。