Vue — リアクティブバリデーション

Vue — リアクティブバリデーション

forms / ch01

このチャプターの到達ゴール

目的 (= 3 ルールのバリデーション)

入力フォームの追加ボタンを 「条件を満たすまで押せない」 状態にする:

→ これを computed だけで 組む。

個別バリデーションを computed で書く

<script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useTasksStore } from '@/stores/tasks'

const store = useTasksStore()
const { tasks } = storeToRefs(store)

const name = ref('')

// 個別バリデーション (= computed なので入力が変わるたび自動再計算)
const nameRequired  = computed(() => name.value.trim().length > 0)
const nameLength    = computed(() => name.value.length <= 30)
const nameNotDup    = computed(() => !tasks.value.some(t => t.name === name.value.trim()))
</script>

統合バリデーション + メッセージ

// 全部通ったら true
const isValid = computed(() =>
  nameRequired.value && nameLength.value && nameNotDup.value
)

// エラーメッセージ (= 優先順位で 1 つだけ出す)
const errorMessage = computed(() => {
  if (!nameRequired.value) return 'タスク名を入力してください'
  if (!nameLength.value)   return `30 文字以内で入力してください (現在 ${name.value.length})`
  if (!nameNotDup.value)   return '同じ名前のタスクが既にあります'
  return ''
})

> エラーは 1 つずつ出す 方が読みやすい (= 全部並べると圧迫感が強い)。

テンプレートに反映

<template>
  <input v-model="name" placeholder="タスク名 (30 文字まで)" />
  <p class="error">{{ errorMessage }}</p>
  <button :disabled="!isValid" @click="onSubmit">追加</button>
</template>

<style scoped>
.error { color: #b91c1c; font-size: 0.9em; min-height: 1.4em; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
</style>

> エラーメッセージ枠は 常に DOM にある (= min-height で高さが揺れない)。

「初期表示でエラーが出る」 問題

name = '' で開始 → いきなり 「タスク名を入力してください」 が出る。

これは UX として悪い (= 触ってないのに怒られる)。

→ 「ユーザーが触ったか」 フラグ を持つ:

const touched = ref(false)

const errorMessage = computed(() => {
  if (!touched.value) return ''          // 触られるまでエラーは出さない
  if (!nameRequired.value) return '...'
  // ...
})

// input に @blur="touched = true" を付ける

「重複チェック」 を store の getter にする

isNameTaken を store 側 に置くと再利用しやすい:

// stores/tasks.js
function isNameTaken(name) {
  const trimmed = name.trim()
  return tasks.value.some(t => t.name === trimmed)
}
return { tasks, load, add, isNameTaken }

呼び出し側:

const nameNotDup = computed(() => !store.isNameTaken(name.value))

> ルール: 「複数画面で使いそうなロジック」 は store へ。 1 画面限定なら view にあってよい。

onSubmit で防御 (= touched + isValid)

async function onSubmit() {
  touched.value = true
  if (!isValid.value) return         // 防御線 (= disabled をすり抜けても止まる)
  await store.add(name.value.trim())
  router.push('/')
}

> disabled は UI、 isValid チェックは ロジック。 両方持つ (= 二重防御)。

⚠️ ボタンを連打されたときの 二重送信防止 は api/ch01-async-ux-3states で扱う (= 失敗 UX 込みで設計するのが筋)。

「素の computed」 はどこまで使えるか (= 実務境界)

> 今日学んだ「computed バリデーション」 は 基礎の理屈。 実務では多くがライブラリで書かれている。

> ライブラリを使う日が来たとき、 中で起きていることが分かる状態を作るのが今日の目的。

チャプター完了サイン

• [ ] 空 / 31 文字 / 重複 の各ケースで ボタンが disabled になる
• [ ] それぞれ違うエラーメッセージが出る
• [ ] 初回フォーカス時はエラーが出ない (= touched 制御)
• [ ] 正しい入力を入れると 追加 → 一覧に戻る
• [ ] 「素 computed の限界 = 3 フィールド」 を 1 文で言える

> ⚠️ trim() を忘れない (= 「 」 (空白のみ) で追加できてしまうバグの典型)。

次に学ぶ領域