次世代Form LibrariesのRegleに入門してみる
Vue Advent Calendar 2025 の 12 日目の記事です。
はじめに
過去の記事にてVueでTanStack Formを触ってみましたが、競合するライブラリとしてRegleが存在します。
Regleを触ったことがなかったので、調べて触ってみたことをまとめてみようと思います。
Regleとは
公式のトップページで以下の記載があります。
Headless form validation for Vue.js Type safe, model-based and intuitive API. The perfect evolution of Vuelidate.Vue.jsのためのヘッドレスなフォームバリデーション
型安全で、モデルに基づいた直感的API
Vuelidateの完璧な進化形。
VuelidateはVue 2の時から存在するFormバリデーションライブラリのことです。
The perfect evolution of Vuelidate.と記載があるとおり、Vuelidateからのマイグレーションガイドもありますね。（若干ハードル上げてないかなと思いつつ...🤔）
TanStack Formとの比較についての記載もありました。
Regle is a more lightweight and less boilerplate alternative to TanStack Form.
Regleは、TanStack Formよりも軽量で、ボイラープレートも少ない代替手段と言えるでしょう。
私もTanStack Formでバリデーションを書いたとき、ボイラープレートが多いなと感じていたので期待が膨らみます。
検証
Regleのプレイグラウンド環境があるのでそちらを使います。
フォームの要件
- 名前を登録するフォーム
- バリデーション条件
- サブミット時、ブラー時で検知
- バリデーション内容
- 空文字入力の場合は「名前は必須です」というエラーを表示
実装例
Regleを使って書くと以下の通りです。
<script setup lang="ts">
import { ref } from 'vue'
import { useRegle } from '@regle/core'
import { required, withMessage } from '@regle/rules'
const state = ref<null | string>(null);
const { r$ } = useRegle(state, {
required: withMessage(required, '名前は必須です')
})
async function handleSubmit() {
const { valid, data } = await r$.$validate()
if (valid) {
alert(data)
} else {
console.warn('Errors: ', r$.$errors)
}
}
</script>
<template>
<form @submit.prevent.stop="handleSubmit">
<div>
<label for="userName">名前</label>
<input
id="userName"
name="userName"
v-model="r$.$value"
@blur="r$.$validate()"
/>
<p v-if="r$.$error">{{ r$.$errors[0] }}</p>
</div>
<button type="submit">Submit</button>
</form>
</template>
お、useRegleという関数を利用していますね、順々に見ていきましょう。
コードの説明
useRegle
Regleの中核となる機能です。
公式に載っているように、状態とバリデーションルールなどを設定できるようです。
const { r$ } = useRegle(
/* 1. Your data (state) */,
/* 2. Your validation rules */,
/* 3. Optional modifiers */
);
また、第二引数のrequiredには自分で設定したバリデーション関数やRegleから提供されるバリデーション関数を設定できます。
Built-in rules がかなり充実している...!
今回は単一の状態だけなので以下のように書けます。
const state = ref<null | string>(null);
const { r$ } = useRegle(state, {
required: withMessage(required, '名前は必須です')
})
Built-in wrappersのwithMessageを使ってバリデーションのメッセージをカスタマイズできます。
<template>
useRegleの戻り値r$の$付きプロパティでフォームに関する処理が一手にできるようになっています。
-
$value：リアクティブなデータをバインディング -
$validate：バリデーションの実行関数 -
$errorと$errors：エラー有無とエラーメッセージの配列
r$にバリデーションに必要な要素が凝縮されています。
Validation propertiesを読み込むともっと踏み込んだことができそうです。
handleSubmit
ボタン押下によるhandleSubmit関数内でもr$が利用できます。
r$.$validate()の戻り値validとdataを利用してその後の処理を書けるので直感的ですね。
また$validate()実行後、validがtrue（バリデーション通過）の場合のdataは、バリデーションの結果が反映された型になります！
例えば今回の場合はstateの初期値の型を null | string として設定していましたが、handleSubmit内のdataを見てみるとnullがなくなっています。
これはruleにrequiredを設定したので、Regleが型をナローイングしてくれます。
結論
Regle、はじめて触ってみました。
個人的にはTanStack FormよりもVue.jsらしく書け、かつ型安全に書けるので推しのライブラリになりました。
また、ドキュメントが充実していてCheat Sheet、Playgroundが提供されているのも最高でした💯。
Discussion