@formkit/vue vs vuelidate: Vue.jsフォームバリデーションの設計思想と実装比較

Vue.js でフォームを扱う際、入力値の検証は避けて通れない課題です。@formkit/vue と vuelidate は、どちらもこの問題を解決するためのライブラリですが、アプローチが根本的に異なります。一方は「フォーム全体のプラットフォーム」、もう一方は「バリデーション専用のツール」です。現場でどちらを選ぶべきか、実装レベルで比較してみましょう。

🧱 アーキテクチャの違い：統合型 vs モジュール型

@formkit/vue は、FormKit というフルスタックなフォームフレームワークの Vue 向けバインディングです。フォームの構造定義、UI コンポーネント、バリデーション、エラー表示、状態管理をすべて一元的に扱います。

<!-- @formkit/vue: フォーム全体を <FormKit> で囲む -->
<template>
  <FormKit type="form" @submit="handleSubmit">
    <FormKit
      type="text"
      name="email"
      label="メールアドレス"
      validation="required|email"
    />
    <FormKit
      type="password"
      name="password"
      label="パスワード"
      validation="required|length:8,100"
    />
  </FormKit>
</template>

vuelidate は、バリデーションロジックのみを提供し、UI は完全に開発者の責任です。Vue のリアクティブシステムと連携して、検証結果を $v オブジェクトとして公開します。

<!-- vuelidate: 既存の input 要素に直接適用 -->
<template>
  <form @submit="handleSubmit">
    <input
      v-model="form.email"
      :class="{ error: $v.form.email.$error }"
      type="email"
      placeholder="メールアドレス"
    />
    <div v-if="$v.form.email.$error">有効なメールアドレスを入力してください</div>

    <input
      v-model="form.password"
      :class="{ error: $v.form.password.$error }"
      type="password"
      placeholder="パスワード"
    />
    <div v-if="$v.form.password.$error">8文字以上で入力してください</div>
  </form>
</template>

<script setup>
import { reactive } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required, email, minLength } from '@vuelidate/validators'

const form = reactive({ email: '', password: '' })

const rules = {
  email: { required, email },
  password: { required, minLength: minLength(8) }
}

const $v = useVuelidate(rules, form)

const handleSubmit = () => {
  $v.value.$validate()
  if (!$v.value.$error) {
    // 送信処理
  }
}
</script>

🔧 バリデーションルールの定義方法

@formkit/vue では、HTML 属性として文字列でルールを指定します。組み込みルール（required, email, matches など）に加え、カスタムルールも登録可能です。

<FormKit
  type="text"
  name="username"
  validation="required|matches:/^[a-z0-9_]+$/"
  :validation-messages="{
    matches: '英数字とアンダースコアのみ使用できます'
  }"
/>

vuelidate では、JavaScript オブジェクトでルールを宣言します。関数や正規表現、非同期検証も自然に記述できます。

import { helpers } from '@vuelidate/ validators'

const usernameRegex = /^[a-z0-9_]+$/

const rules = {
  username: {
    required,
    format: helpers.regex('username', usernameRegex)
  }
}

📦 状態管理とエラー表示

@formkit/vue は、各フィールドの状態（valid, errors, touched など）を内部で管理し、自動的にエラーメッセージを表示します。テーマやプラグインで外観をカスタマイズ可能ですが、DOM 構造は FormKit が制御します。

<!-- エラーメッセージは自動で表示される -->
<FormKit type="text" name="name" validation="required" />
<!-- 入力が空の場合、自動で「This field is required.」が表示 -->

vuelidate は、$v.fieldName.$error や $v.fieldName.$invalid といったフラグを提供するだけです。エラーメッセージの表示位置、スタイル、タイミングはすべて開発者が制御します。

<div v-if="$v.form.name.$error && !$v.form.name.required">
  名前は必須です
</div>

🔄 動的フォームへの対応

@formkit/vue は、type="group" や type="list" といった特殊なタイプで、ネストや配列フィールドを簡単に扱えます。

<FormKit type="group" name="address">
  <FormKit type="text" name="street" />
  <FormKit type="text" name="city" />
</FormKit>

<FormKit type="list" name="hobbies">
  <FormKit type="text" name="item" />
</FormKit>

vuelidate でも動的フォームは可能ですが、ルール定義とデータ構造を手動で同期させる必要があります。

// 配列のバリデーション
const rules = {
  hobbies: {
    $each: {
      name: { required }
    }
  }
}

🧩 カスタム入力との統合

@formkit/vue では、独自の入力コンポーネントを FormKit の仕組みに登録する必要があります。createInput ユーティリティを使い、FormKit の状態システムと連携させます。

import { createInput } from '@formkit/vue'

const CustomDatePicker = createInput((props) => {
  return h(DatePickerComponent, {
    modelValue: props.context.value,
    'onUpdate:modelValue': props.context.node.input
  })
})

vuelidate は、どんな入力要素とも自由に組み合わせられます。v-model でバインドされた値に対して、別途ルールを定義するだけです。

<CustomDatePicker v-model="form.date" />
<!-- バリデーションルールは通常通り定義 -->

🌐 非同期バリデーション

@formkit/vue では、async ルールを登録することで非同期検証を実現します。

FormKit.createConfig({
  rules: {
    uniqueEmail: async (value) => {
      const response = await fetch(`/api/check-email?email=${value}`)
      return response.ok
    }
  }
})

vuelidate では、非同期ルールを直接オブジェクトに記述できます。

const rules = {
  email: {
    required,
    asyncUnique: async (value) => {
      const res = await fetch(`/api/check-email?email=${value}`)
      return res.ok
    }
  }
}

✅ まとめ：どちらを選ぶべきか？

💡 実践的な判断基準

• 新規プロジェクトで、フォームがアプリの中心機能 → @formkit/vue で開発速度を最大化。
• 既存アプリにバリデーションを追加、または UI/UX に強い制約がある → vuelidate で最小限の侵入で実装。
• チームが FormKit の思想に共感できる → @formkit/vue の恩恵を最大限享受。
• バリデーションロジックをユニットテストしたい → vuelidate の純粋な関数ベースのルールがテストしやすい。

どちらも成熟したライブラリであり、メンテナンスも継続されています。重要なのは、プロジェクトの要件とチームの技術戦略に合致する方を選ぶことです。